StackNavigator 中的 DrawerNavigator 使用 react-navigation答案

【问题标题】：DrawerNavigator inside StackNavigator using react-navigationStackNavigator 中的 DrawerNavigator 使用 react-navigation
【发布时间】：2017-12-04 06:09:03
【问题描述】：

我正在尝试复制以下设计，但我找不到太多关于如何为特定屏幕实现 DrawerNavigator 并将其与 redux 挂钩的信息。 DrawerNavigator 独立于路线。我想要的只是个人资料图片、用户名、注销按钮和应用版本

【问题讨论】：

Here 是关于将 redux 与 react-navigation 集成的指南。相应的 github repo 已经嵌套了 tabNavigator，drawerNavigator 会有点相似。

标签： react-native react-redux react-navigation

【解决方案1】：

我假设您的应用程序将有 2 个用于身份验证的主导航器和主导航器。如果您使用react-navigation，您可能需要将DrawerNavigator 包裹在StackNavigator 中，如下图所示。

-StackNavigator
    -LoginScreen
    -DrawerNavigator
        -Settings
        -Logout
        -Credits
        -Join beta group
        -Send debug logs

对于初学者来说，最好看看 InfiniteRed 的教程，他们在其中整理了一个相当不错的教程，here。但是，我认为该教程有点过时，因为它与最新的 react-native 版本不兼容，至少对我来说是这样。

如果您已经精通 redux 并希望将导航器集成到您的应用中，您可能需要查看kyaroru's neat implementation。

另一方面，如果您使用的是 RNRF（我使用的是 4.0.0-beta.22 版本），那么您可能要坚持使用这种结构，其中 DrawerComponent 只是一个非常简单的类。

export default class RouterComponent extends Component {
  render() {
    return (
      <Router>
        <Scene key="root" hideNavBar>
          <Scene key="splashScreen" component={SplashScreen} />
          <Scene key="auth" hideNavBar>
            <Scene key="signIn" component={SignIn} />
            <Scene key="signUp" component={SignUp} />
          </Scene>
          <Drawer
            hideNavBar
            key="drawer"
            contentComponent={DrawerComponent}
            drawerIcon={() => <Feather name="menu" size={24} color="#000" style={{ paddingLeft: 20 }} />}
            drawerWidth={300}>
            <Scene key="main">
              <Scene key="home" component={Home} title="Home" />
              <Scene key="profile" component={Profile} title="Profile" />
            </Scene>
          </Drawer>
        </Scene>
      </Router>
    )
  }
}

class DrawerComponent extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Drawer Content</Text>
        <TouchableOpacity onPress={Actions.home}>
          <Text>Home</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={Actions.profile}>
          <Text>Profile</Text>
        </TouchableOpacity>
      </View >
    );
  }
}

【讨论】：