React Native + React Navigation - 我希望屏幕在 Tab Navigator 上不可见

Question

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

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

然后我在 main 中导入 index.js:

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

如何才能在我的导航器 screen6、screen7、screen8 中导航到它们但不在 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 个选项卡，您将能够从第一个选项卡导航到屏幕 6 和屏幕 7。

编辑：

如果您不想在 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 },
  }
)

React Native + React Navigation - 我希望屏幕在 Tab Navigator 上不可见

Reac Native + React Navigation - I want screen not to be visible on TabNavigator

tabnavigator

reactjs

react-native

react-navigation

react-native-tabnavigator