响应本机路由器通量多个子场景

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() 只能在其同级中导航。换句话说，两个场景应该具有相同的父级。

下面是导航器树的修改版本。例如，您可以从登录场景开始，然后通过调用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，请组合两个操作：

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

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

更好的组织方式：如果需要，将场景拆分为较小的部分。