StackNavigatorの中で反応ナビを使用する

Question

以下のデザインを複製しようとしていますが、DrawerNavigatorを特定の画面に実装してreduxで接続する方法に関する多くの情報が見つかりません。 DrawerNavigatorはルートとは独立しています。私が欲しいのは、プロフィール写真、ユーザーの名前、ログアウトボタン、アプリのバージョンです。

Answer 1

あなたのアプリは、認証とメインナビゲータ用の2つのメインナビゲータを持つと仮定します。 react-navigationを使用している場合は、StackNavigatorの中にDrawerNavigatorを入れてください（下図参照）。手始めに

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

、かなりまともなチュートリアル、hereを一緒に入れInfiniteRedからチュートリアルを見ているのは良いです。しかし、このチュートリアルは、少なくとも私の場合は最新の反応ネイティブバージョンとの互換性がないため、少し古くなっていると思います。

あなたがすでにレビュックスに精通しており、ナビゲータをアプリに統合したい場合は、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 > 
    ); 
    } 
}