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?

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 },
  }
)