web-dev-qa-db-ja.com

Reactネイティブルーターフラックス：メインシーンから子にナビゲート

バージョン

  • react-native-router-flux v3.35.0
  • react-native v0.31

シーンが少ないです。シーンの1つにサブシーンがほとんどありません。メインシーンの1つからサブシーンの1つに移動するにはどうすればよいですか？

例：

<Router createReducer={reducerCreate} getSceneStyle={getSceneStyle}>
        <Scene key="root">
          <Scene key="login" direction="vertical" component={Login} title="Login" hideTabBar hideNavBar />
          <Scene key="tabbar" initial={show}>
            <Scene key="main" tabs tabBarStyle={styles.tabBarStyle} tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle} tabBarIconContainerStyle={styles.tabBarIconContainerStyle} >
              <Scene key="courses" component={Courses} title="Courses" icon={IconCourses} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} initial />
              <Scene key="register"  component={Register} title="Register" icon={IconRegister} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} />
              <Scene key="schedule" component={Schedule} title="Schedule" icon={IconSchedule} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} />
              <Scene key="evaluation" component={Schedule} title="Evaluation" icon={IconEvaluation} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} />
              <Scene key="profile"
              component={Profile}
              title="Profile"
              icon={IconProfile}
              navigationBarStyle={styles.navigationBarStyle}
              titleStyle={styles.titleStyle}
              onLeft={() => { Actions.login(); }}
              leftTitle="Add Account"
              onRight={() => { Actions.login({type: 'reset'}); }}
              rightTitle="Logout"
              rightButtonTextStyle={styles.ButtonTextStyle}
              leftButtonTextStyle={styles.ButtonTextStyle}
              leftButtonStyle={styles.leftButtonStyle} />
            </Scene>
          </Scene>
          <Scene key="terms" component={Terms} />
          <Scene key="details" component={Details} title="Details" navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} backButtonTextStyle={styles.backButtonTextStyle} hideTabBar />
        </Scene>
      </Router>

詳細からコースに移動したい。しかし、コースは別の下のタブです。どうやってやるの？

タブバーシーンにのみナビゲートでき、コースや登録はできません。

javascriptreact-nativereact-routerreact-native-router-flux
8
Ata Mohammadi

最初にtabbarに移動すると、内側のタブに切り替えることができることがわかりました。例：

<Button onPress={() => {
    Actions.tabbar({type:ActionConst.RESET});
    Actions.courses();
}} title="See Courses" />

最初のシーン遷移はシーンをタブバーにリセットし、デフォルトではinitialシーンを表示します。次に、react-native-router-fluxがタブシーン遷移を処理する方法により、2番目の遷移が現在のシーンを置き換えます。

16
Henry Bevan

私は実際に非常によく似た質問に答えました ここ 。問題は、loginのコンテキストからActions.tabbarにアクセスでき、initialプロップがtrueに設定されたネストされたシーンにルーティングされるか、またはスタック内の最初のネストされたシーン。私が話していることの例を見るには、この回答の最初の行に含めたリンクを参照してください。

お役に立てれば！ :)

1
Brian Polonia