react-native - react 原生路由器通量多个子场景

Question

我试图了解如何使用 router-flux 并拥有多个场景/子场景，类似于拥有多个 Storyboard，以便我可以为用户注册过程创建一个场景，然后为用户注册一个场景并登录。

目前我正在这样做，但没有给我想要的结果

class NavigationRouter extends Component {
  render () {
    return (
      <Router>
        <Scene key='drawer' component={NavigationDrawer} open={false}>
          <Scene key='root' tabs={true}>
            <Scene key='account' hideNavBar={true} >
              <Scene initial key='Login' component={Login} title='Login' />
              <Scene key='SignUp' component={SignUp} title='SignUp' />
              <Scene key='Account' component={Account} title='Account' />
              <Scene key='Venue' component={Venue} title='Venue' />
            </Scene>
            <Scene key='auth' renderLeftButton={NavItems.hamburgerButton} navigationBarStyle={Styles.navBar} titleStyle={Styles.title} leftButtonIconStyle={Styles.leftButton} rightButtonTextStyle={Styles.rightButton} >
              <Scene key='MenuItems' component={MenuItems} title='Your Menu' />
              <Scene key='Orders' component={Orders} title='Orders' />
            </Scene>
          </Scene>
        </Scene>
      </Router>
    )
  }
}

登录/注册过程的第一部分不应显示导航栏，并允许用户返回上一步。

第二部分应该允许登录用户访问其中定义的项目的导航栏和侧面绘图

Answer 1

尽管将场景与另一个场景分组看起来更易读和正确，但它使 Action 无法按预期工作，因为 Actions.SCENE() 只能在其 内导航。 sibling .换句话说，两个场景应该有相同的父级。

这是您的导航树的修改版本。比如可以从Login场景开始，调用Actions.tabbar()直接路由到tab1 .在您的标签栏场景中，将有两个子组件。用户可以在选项卡之间手动导航，或者您可以再次调用 Actions.tab2()，因为它们也是兄弟。

我更喜欢将每个场景 sibling 放在另一个场景中，因为它需要两个链式 Action 。它看起来有点乱，但使用空格和注释会有所帮助。

class NavigationRouter extends Component {
  render () {
    return (
      <Router>
        <Scene key='drawer' component={NavigationDrawer} open={false}>
          <Scene key='root'>

            {/* Authentications */}
            <Scene initial key='Login' component={Login} title='Login' />
            <Scene key='SignUp' component={SignUp} title='SignUp' />
            <Scene key='Account' component={Account} title='Account' />

            {/* Main */}
            <Scene key='Venue' component={Venue} title='Venue' />

            {/* Tabs... */}
            <Scene key='tabbar' tabs={true} renderLeftButton={NavItems.hamburgerButton} navigationBarStyle={Styles.navBar} titleStyle={Styles.title} leftButtonIconStyle={Styles.leftButton} rightButtonTextStyle={Styles.rightButton} >
              <Scene icon={Icon1} key='tab1' component={MenuItems} title='Your Menu' />
              <Scene icon={Icon2} key='tab2' component={Orders} title='Orders' />
            </Scene>

          </Scene>
        </Scene>
      </Router>
    )
  }
}

如果你想直接跳转到兄弟的子场景，说tabbar1， combine two actions :

Actions.callback({key:'tabbar',type:'push'});
Actions.callback({key:'tab1',type:'jump'});

上面树中最丑陋的部分是同时为多个场景设置样式。例如从 5 个 sibling 中删除导航栏。在那里你可以定义一个 Prop 对象并将它们添加到相应的子场景中 {...customProps}
更好的组织方式: Split your scenes to smaller parts if needed.