react-native – 响应本地路由器 – 磁通多个子场景

发布时间：2020-12-15 20:15:52 所属栏目：百科来源：网络整理

导读：我试图了解如何使用router-flux并且具有类似于具有多个故事板的多个场景/子场景,以便我可以为用户注册过程创建场景,然后一次用户注册的场景并登录. 目前我这样做但是没有给我预期的结果 class NavigationRouter extends Component { render () { return ( Ro

我试图了解如何使用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>
    )
  }
}

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

解决方法

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

这是导航树的修改版本.例如,您可以从Login场景开始,并通过调用Actions.tabbar()直接路由到tab1.在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,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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!