使用反应导航的 StackNavigator 内的 DrawerNavigator

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 只是一个非常简单的 class.

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

使用反应导航的 StackNavigator 内的 DrawerNavigator

DrawerNavigator inside StackNavigator using react-navigation

react-native

react-redux

react-navigation