React Native Router Flux：从主场景导航到子场景答案

【问题标题】：React Native Router Flux: navigate from main scene to childReact Native Router Flux：从主场景导航到子场景
【发布时间】：2017-01-05 12:23:16
【问题描述】：

版本

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>

我想从详细信息导航到课程。但是课程是另一个标签下的标签。我该怎么做？

我只能导航到标签栏场景，不能导航到课程或注册。

【问题讨论】：

您是否尝试过 Actions.create 在渲染之前创建场景并将其传递给路由器场景道具？另外，请尝试禁用任何“初始”道具，因为这会给我带来问题。 Switch 遇到了什么问题？我遇到了很多麻烦，但解决了...当 Switch 更改时帮助我强制重新渲染的一个技巧是将路由器密钥设置为包括 Switch 状态的一部分...即经过身份验证与访客...确保当 Switch 改变时改变密钥。不要忘记 Actions.refresh。对我来说似乎很老套，但似乎经常被用作“逃生舱”。

标签： javascript react-native react-router react-native-router-flux

【解决方案1】：

我发现如果你先导航到tabbar，你可以切换到内部标签，例如：

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

第一个场景转换将场景重置到您的标签栏，并且默认情况下会显示您的 initial 场景，然后第二个转换会替换您当前的场景，因为 react-native-router-flux 如何处理标签场景转换。

【讨论】：

你知道如何从嵌套的子场景弹回到主场景吗？
你是怎么找到你嵌套的孩子的？ Actions.pop() 将当前场景从路由器堆栈中移除...如果您的选项卡不是您的主要导航场景，那么您可以尝试 ActionConst.REPLACE 不清除当前路由器堆栈...（我没有尝试过虽然...）
@HenryBevan 因此，如果有人在导航后弹回，使用您的答案，这会将该人带回您的示例中的按钮被按下的场景吗？
@DanielBarde 我不这么认为——在我的情况下，“标签栏”场景是根场景，所以在这个导航操作之后没有任何东西可以弹回。无论哪种方式 - 'ActionConst.RESET' 重置视图堆栈，因此 'tabbar' 成为根。

【解决方案2】：

我实际上回答了一个非常相似的问题here。问题是，从login 的上下文中，您可以访问Actions.tabbar，然后它会将您路由到initial 属性设置为true 的嵌套场景，或者堆栈中的第一个嵌套场景。要查看我正在谈论的示例，请参阅我在此答案第一行中包含的链接。

希望这会有所帮助！ :)

【讨论】：

感谢您的回答。我知道。我可以从详细信息访问标签栏。当我访问标签栏时，会呈现第一个屏幕课程。没关系。问题是有时我需要导航到标签栏中的其他场景而不是课程。解决方案是使用 router-flux 提供的开关功能，但我无法让它工作。 @brian-polonia