React Native Router Flux:从主场景导航到子场景
React Native Router Flux: navigate from main scene to child
版本
- react-native-router-flux v3.35.0
- react-native v0.31
我的戏份很少。其中一个场景有几个子场景。如何从主场景之一导航到子场景之一?
示例:
<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>
我想从详细信息导航到课程。但是课程是另一个选项卡下的一个选项卡。我该怎么做?
我只能导航到标签栏场景,不能导航到课程或注册。
我实际上回答了一个非常相似的问题。问题是,从 login
的上下文中,您可以访问 Actions.tabbar
,然后它会将您路由到 initial
属性设置为 true 的嵌套场景,或者第一个堆栈中的嵌套场景。要查看我正在谈论的示例,请参阅我包含在此答案第一行中的 link。
希望对您有所帮助! :)
我发现如果您先导航到 tabbar
,则可以切换到内部标签页,例如:
<Button onPress={() => {
Actions.tabbar({type:ActionConst.RESET});
Actions.courses();
}} title="See Courses" />
第一个场景转换将场景重置为您的标签栏,默认情况下会显示您的 initial
场景,第二个转换将替换您当前的场景,这是由于 react-native-router-flux 处理标签的方式场景转换。
版本
- react-native-router-flux v3.35.0
- react-native v0.31
我的戏份很少。其中一个场景有几个子场景。如何从主场景之一导航到子场景之一?
示例:
<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>
我想从详细信息导航到课程。但是课程是另一个选项卡下的一个选项卡。我该怎么做?
我只能导航到标签栏场景,不能导航到课程或注册。
我实际上回答了一个非常相似的问题login
的上下文中,您可以访问 Actions.tabbar
,然后它会将您路由到 initial
属性设置为 true 的嵌套场景,或者第一个堆栈中的嵌套场景。要查看我正在谈论的示例,请参阅我包含在此答案第一行中的 link。
希望对您有所帮助! :)
我发现如果您先导航到 tabbar
,则可以切换到内部标签页,例如:
<Button onPress={() => {
Actions.tabbar({type:ActionConst.RESET});
Actions.courses();
}} title="See Courses" />
第一个场景转换将场景重置为您的标签栏,默认情况下会显示您的 initial
场景,第二个转换将替换您当前的场景,这是由于 react-native-router-flux 处理标签的方式场景转换。