Question

我想在iOS上创建一个抽象菜单，其作用类似于Tabs，以便每个菜单项显示一个唯一的导航堆栈，在不同的部分之间切换时（在最好的情况下）也是持久的。到目前为止，我有一个简单的抽屉（使用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 =＆＃39; home＆＃39;）以显示但是在部分更改时导航器保持不变而不是由其他（例如故事）导航器。

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

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

1 个答案: