Respond to a native router stream with a few subexpressions

I am trying to understand how to use router-flux and have several scenes / sub-elements similar to having multiple message boards, so I can have a scene for the user registration process, and then the scene for the user is registered and registered.

I am currently doing this, but I have not been given the desired result

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

The first part of the login / registration path should not display the navigation bar and allow the user to return to the previous step.

The second part should allow the registered user to access the navigation bar and side drawing for the elements that are defined in it.

+4
1

, , , Actions.SCENE() . , .

​​ . , tab1, Actions.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'});

- . , navbar 5 . - {...customProps}

: .

+8

Source: https://habr.com/ru/post/1673284/


All Articles