react native router-flux 多个子场景

Question

我正在尝试了解如何使用 router-flux 并拥有多个 scenes/sub 类似于拥有多个故事板的场景，这样我就可以为用户注册过程创建一个场景，然后再创建一个场景一旦用户注册并登录。

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

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

login/signup 旅程的第一部分不应显示导航栏并允许用户返回到上一步。

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

Answer 1

尽管将场景与另一个场景分组看起来更具可读性和正确性，但这会使 Action 无法按预期工作，因为 Actions.SCENE() 只能在其 siblings[=31= 中导航].换句话说，两个场景应该有相同的父级。

这是您的导航树的修改版本。比如可以从Login场景开始，调用Actions.tabbar()直接路由到tab1。在您的标签栏场景中，将有两个子组件。用户可以在选项卡之间手动导航，或者您可以再次调用 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，combine two actions:

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

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

更好的组织方式： Split your scenes to smaller parts if needed.

react native router-flux 多个子场景

react native router-flux multiple sub scenes

react-native

navigator

react-router-redux