React Native Router Flux: navigate from main scene to child

Question

Version

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

I have few scenes. one of scenes have few sub-scenes. how can i navigate to one of sub-scenes from one of main scenes?

Example :

<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>

I want to navigate from Details to Courses. but courses is a Tab under another. how can i do that?

I can navigate only to tabbar scene, not courses or register.

Answer 1

I've found that you can switch to inner tabs if you navigate to the tabbar first, e.g.:

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

The first scene transition resets the scene to your tab bar, and would by default show your initial scene, the second transition then replaces your current scene due to how react-native-router-flux handles tab scene transitions.