引き出しを使用して、反応ネイティブで複数のナビゲータを切り替える

Question

iOS上にタブのように機能するドロアメニューを作成して、各メニュー項目に固有のナビゲーションスタックが表示されるようにします（最適な場合）異なるセクション。

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

そして： は、これまでのところ私は

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

    { contentView() } 

</DrawerLayout> 

引き出し自体は、タップすると、メインビューに表示される内容を変更する必要がありますいくつかのリンクを表示する（https://www.npmjs.com/package/react-native-drawer-layoutを使用して）簡単な引き出しを持っていますメインビューは、セクションごとに独自のナビゲーターを表示する必要があります。

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

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

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

残念ながら、これがまったく機能していないので、私だけ最初のNavigatorを取得する（初期状態.selectedSection = 'home'）が表示されるが、セクションの変更時にNavigatorは同じままになる。物語）ナビゲータ。

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