react-native 中使用抽屉在多个导航器之间切换答案

【问题标题】：Use drawer to switch between multiple Navigators in react-nativereact-native 中使用抽屉在多个导航器之间切换
【发布时间】：2016-08-25 21:48:47
【问题描述】：

我想在 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',
          }}
        />
      )
  }
}

不幸的是，这根本不起作用，因为我只显示了初始导航器（初始 state.selectedSection = 'home'），但在部分更改时导航器保持不变，而不是被其他导航器替换（例如故事）导航器。

【问题讨论】：

标签： ios navigation react-native drawer

【解决方案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

【讨论】：