Réagir sur plusieurs sous-scènes de routage natif

Question

J'essaie de comprendre comment utiliser le routeur-flux et d'avoir plusieurs scènes/sous-scènes similaires à plusieurs story-boards, de sorte que je puisse avoir une scène pour le processus d'inscription de l'utilisateur, puis une scène pour une fois que l'utilisateur est signe et connecté.

à l'heure actuelle, je suis en train de faire cela, mais il est ne m'a pas donné le résultat souhaité

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

la première partie de la connexion/inscription Le trajet ne doit pas afficher la barre de navigation et permettre à l'utilisateur de revenir à l'étape précédente.

La deuxième partie devrait permettre à l'utilisateur connecté pour accéder à la barre de navigation et tirage de côté pour les éléments qui sont définis dans ce

Answer 1

Même si les scènes de regroupement avec une autre scène semble plus lisible et correct, il fait action ne pour fonctionner comme prévu, puisque Actions.SCENE() peut seulement naviguer dans ses frères et soeurs. En d'autres termes, deux scènes doivent avoir le même parent.

Voici une version modifiée de votre navigateur. Par exemple, vous pouvez commencer avec la scène de connexion, et acheminer directement à la tab1 en appelant Actions.tabbar(). Dans votre scène de tabbar, il y aura deux sous-composants. L'utilisateur peut naviguer manuellement entre les onglets, ou vous pouvez appeler à nouveau Actions.tab2(), car ils sont également frères et soeurs.

Je préfère mettre chaque scène à une autre car elle prend deux actions chaînées. Il semble un peu brouillon, mais l'aide d'espaces et de commentaires aide.

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

Si vous souhaitez accéder directement à la sous-scène d'un frère, disent tabbar1, combine two actions:

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

La plus laide partie de l'arbre ci-dessus est Styliser plusieurs scènes à la fois. Tels que la suppression de la barre de navigation de 5 frères et soeurs. Et là, vous pouvez définir un objet d'accessoires et de les ajouter dans les sous-scènes correspondantes {...customProps}

Une meilleure façon d'organiser:Split your scenes to smaller parts if needed.