Используйте ящик для переключения между несколькими навигаторами в реагировать родной

Question

Я хочу создать Меню iOS на iOS, которое будет действовать как вкладки, чтобы каждый элемент меню отображал уникальный стек навигации, который (в лучшем случае) также является постоянным при переключении между различными разделами. Пока у меня есть простой ящик (используя https://www.npmjs.com/package/react-native-drawer-layout)

<DrawerLayout
  ref="drawer"
  drawerBackgroundColor="#fff"
  drawerPosition={ DrawerLayout.positions.Right }
  drawerWidth={ 100 }
  renderNavigationView={ () => navigationView } >

  { contentView() }

</DrawerLayout>

Сам ящик отображает некоторые ссылки, которые при нажатии должны изменить содержание, отображаемое в главном окне:

navigationView() {
  return (
    <View style={ styles.drawer }>
      <MenuItem
        title="Home"
        onPress={ () => { this.setState({selectedSection: 'home' }) } }
        ...
      />
      <MenuItem
        title="Stories"
        onPress={ () => { this.setState({selectedSection: 'stories' }) } }
        ...
      />
    </View>
  )
}

И главное окно должно отображать уникальный навигатор для каждого раздела:

contentView() {
  switch( this.state.selectedSection ) {

    case 'home':
      return (
        <NavigatorIOS
          initialRoute={{
            component: HomeComponent,
            title: 'HOME',
          }}
        />
      )

    case 'stories':
      return (
        <NavigatorIOS
          initialRoute={{
            component: StoriesComponent,
            title: 'STORIES',
          }}
        />
      )
  }
}

К сожалению, это не работает вообще, потому что я только показываю начальный Навигатор (initial state.selectedSection = 'home'), но при изменении раздела Навигатор остается тем же, вместо того, чтобы быть замененным другим (например, рассказами) навигатором.

Answer 1

Я вроде решил это сам, используя следующее (DrawerLayout остается от моего первоначального вопроса):

import NavigatorHome from './NavigatorHome'
import NavigatorStories from './NavigatorStories'

const navigationView = (
  <View>
    <MenuItem
      title="Home"
      onPress={ () => { this.refs.navigator.jumpTo(mainRoutes[0]) } }
      ...
    />
    <MenuItem
      title="Stories"
      onPress={ () => { this.refs.navigator.jumpTo(mainRoutes[1) } }
      ...
    />
  </View>
)

const mainRoutes = [
  {
    component: NavigatorHome,
  },
  {
    component: NavigatorStories,
  },
]

const contentView = () => {
  return (
    <Navigator
      ref="navigator"
      initialRoute={ mainRoutes[0] }
      initialRouteStack={ mainRoutes }
      renderScene={ (route, navigator) => {
        return <route.component />
      }}
      configureScene={ (route, routeStack) => Navigator.SceneConfigs.FadeAndroid }
      style={ styles.content }
    />
  )
}

// NavigatorHome.js

import React from 'react'
import {
  NavigatorIOS,
} from 'react-native'

import FirstScreenInHome from './FirstScreenInHome'

const NavigatorHome = ({
  rootNav,
}) => {
  return(
    <NavigatorIOS
      initialRoute={{
        component: FirstScreenInHome,
        title: 'Welcome to the first screen',
      }}
    />
  )
}

export default NavigatorHome