StackNavigator中的DrawerNavigator使用react-navigation

Question

我正在尝试复制以下设计，但我找不到有关如何为特定屏幕实现DrawerNavigator并使用redux将其连接起来的更多信息。 DrawerNavigator独立于路线。我想要的只是个人资料图片，用户名称，退出按钮和应用版本

Answer 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只是一个非常简单的类。< / p>

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 >
    );
  }
}