reactjs - Reac Native + React Navigation - 我希望屏幕在 TabNavigator 上不可见

Question

我为我的应用程序创建了一个 TabNavigator，但我只想要 5 个屏幕。我想导航到但不通过选项卡的其余部分（在那些我不希望选项卡也可见的部分中）。这是我现在的路由器：

export default TabNavigator(
  {
    Dashboard: {
      screen: DashboardContainer,
    },
    NotificationContainer: {
      screen: NotificationContainer,
    },
    Movements: {
      screen: MovementsContainer,
    },
    TopOwners: {
      screen: TopOwnersContainer,
    },
    Menu: {
      screen: MenuContainer,
    },
  },
)

我在主 index.js 中导入：

const App = () => (
  <Root>
    <Provider store={store}>
      <TabNavigator />
    </Provider>
  </Root>
);

我可以在我的导航器 screen6、screen7、screen8 中做些什么并导航到它们但不在 TabNavigator 上显示它们？

标签： reactjsreact-nativereact-navigationtabnavigatorreact-native-tabnavigator

Answer 1

您可以使用嵌套导航器：

const Screen1Router StackNavigator( // you can use a SwitchNavigator instead
  {
      Screen1: { screen: Screen1 },
      Screen6: { screen: Screen6 },
      Screen7: { screen: Screen7 },
  }
)

export default TabNavigator(
  {
    Screen1: {
      screen: Screen1Router,
    },
    Screen2: {
      screen: Screen2,
    },
    Screen3: {
      screen: Screen3,
    },
    Screen4: {
      screen: Screen4,
    },
    Screen5: {
      screen: Screen5,
    },
  }
);

在此示例中，将显示 5 个选项卡，您将能够从第一个选项卡导航到 Screen6 和 Screen7。

编辑：

如果您不想在 Screen6 和 Screen7 中看到选项卡，则必须将 tabNavigator 嵌套在 StackNavigator 中：

const tabNav = TabNavigator(
  {
    Screen1: {
      screen: Screen1,
    },
    Screen2: {
      screen: Screen2,
    },
    Screen3: {
      screen: Screen3,
    },
    Screen4: {
      screen: Screen4,
    },
    Screen5: {
      screen: Screen5,
    },
  }
);

export default StackNavigator( // you can use a SwitchNavigator instead
  {
      Screen1: { screen: tabNav },
      Screen6: { screen: Screen6 },
      Screen7: { screen: Screen7 },
  }
)