反应原生路由器 - 磁通多个子场景

Question

我试图了解如何使用router-flux并且具有类似于具有多个故事板的多个场景/子场景,以便我可以为用户注册过程创建场景,然后一次用户注册的场景并登录.

目前我这样做但是没有给我预期的结果

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()只能在其兄弟之间导航.换句话说,两个场景应该具有相同的父级.

这是导航树的修改版本.例如,您可以从Login场景开始,并通过调用直接路由到tab1 Actions.tabbar().在tabbar场景中,将有两个子组件.用户可以在选项卡之间手动导航,也可以再次调用Actions.tab2(),因为他们也是兄弟姐妹.

我更喜欢将每个场景兄弟放到另一个场景,因为它需要两个链式动作.它看起来有点乱,但使用空格和注释有帮助.

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,请结合两个动作:

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

上面树中最丑陋的部分是同时设置多个场景.比如从5个兄弟姐妹中删除导航栏.在那里你可以定义一个道具对象并将它们添加到相应的子场景中{...customProps}

更好的组织方式: 如果需要,将场景分割成较小的部分.