React-native-router-flux: Comment utiliser la modalité

Essayez de mettre votre scène root dans modal.
Comme ça:

<Router>
    <Scene key="modal" modal>
       <Scene key="root" hideNavBar hideTabBar>
            <Scene key="tabBar" tabs>
              <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
              <Scene key="favorites" component={Favorites} title="Favorites" />
              <Scene key="messages" component={Messages} title="Messages" />
              <Scene key="profile" component={Profile} title="Profile" />
            </Scene>
        </Scene>
        <Scene key="map" component={Map} title="Map" hideNavBar />

Vous devriez créer une scène racine comme modal comme suggéré par @luco . Veuillez vérifier Exemple de projet, la connexion est implémentée en tant que modal

Cela ne fonctionne toujours pas.

<Router>
    <Scene key="modal" modal>
      <Scene key="root" hideNavBar hideTabBar>
        <Scene key="tabBar" tabs>
          <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
          <Scene key="favorites" component={Favorites} title="Favorites" />
          <Scene key="messages" component={Messages} title="Messages" />
          <Scene key="profile" component={Profile} title="Profile" />
        </Scene>
        <Scene key="map" component={Map} title="Map" hideNavBar />
        <Scene key="listingDetail" component={ListingDetail} title="Listing Detail" clone />
      </Scene>
    </Scene>
  </Router>

Cela n'a aucun sens pour moi qu'envelopper tout dans la scène modale rende une scène spécifique modale alors que je ne veux pas que le reste (comme ListingDetail) soit modal. Y a-t-il un paramètre spécifique dans Actions.map que je dois utiliser ?

Malheureusement, c'est un problème de navigation réactive - il ne prend pas en charge différentes animations pour les enfants de la pile. Je ne peux pas reproduire votre problème (le code semble correct), c'est pourquoi je demande à tout le monde de bifurquer et de modifier cet exemple de dépôt s'ils veulent que leurs problèmes soient résolus. La connexion modale de l'exemple fonctionne bien comme vous pouvez le voir

Alors, dites-vous qu'il n'y a aucun moyen de prendre en charge une transition iOS modale ? C'est-à-dire celui qui glisse par le bas ?

Que veux-tu dire? Je vous ai dit deux fois que l'exemple a un écran de connexion modal (qui glisse du bas)

Ok mais vous avez aussi dit que mon code avait l'air bien....

J'ai fait de mon mieux pour suivre l'exemple, mais comme il n'y a pas de documentation, je ne peux pas dire quelle est la raison pour laquelle tout est là. Je ne peux pas simplement copier et coller ce code car, évidemment, mes itinéraires sont différents.

La même chose que je pourrais vous dire à propos de votre code - je ne vois pas tout le projet et tous les détails. Par exemple, vous pouvez utiliser Actions.map et il pourrait même ne pas être généré (et être nul) lors de la compilation.

Je suis heureux de fournir plus d'exemples de code si vous me faites savoir ce dont vous avez besoin. Actions.map fonctionne, il passe juste du côté à l'intérieur de ce que je m'attends à être du bas.

Êtes-vous en train de dire que vous ne pouvez pas avoir à la fois des transitions push et modal dans la même application ?

OH MON DIEU. Pas dans l'application, mais dans un conteneur. Après un examen plus approfondi, votre code contient une erreur - 'map' toujours enfant du conteneur 'normal' (key=root), non modal (key='modal'). On dirait que vous ne comprenez pas ce que vous faites. Peut-être que ce composant est trop complexe pour vous...

Essaye ça:

<Router>
    <Scene key="modal" modal>
      <Scene key="root" hideNavBar hideTabBar>
        <Scene key="tabBar" tabs>
          <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
          <Scene key="favorites" component={Favorites} title="Favorites" />
          <Scene key="messages" component={Messages} title="Messages" />
          <Scene key="profile" component={Profile} title="Profile" />
        </Scene>
      </Scene>
        <Scene key="map" component={Map} title="Map" hideNavBar />
        <Scene key="listingDetail" component={ListingDetail} title="Listing Detail" clone />
    </Scene>
  </Router>

Merci, cela résout le problème. Comment voulez-vous que je comprenne quelque chose alors qu'il n'y a pas une ligne de documentation à ce sujet ? De nombreuses personnes ont ouvert des problèmes à propos de cette fonctionnalité modale, ce qui indique peut-être le besoin de documentation ...

Quelques articles récents ici portent sur la syntaxe JSX et la compréhension des conteneurs de navigation, pas sur la documentation.
J'ai ajouté plus d'informations sur le modal.

Salut,

travaillé pour moi

<Router navigationBarStyle={{backgroundColor: '#FF5722'}} titleStyle={{color: '#fff'}}>
        <Modal>
            <Stack key="root">
                <Scene key='login_screen' component={LoginScreen} title='login' hideNavBar={true} />
            </Stack>
            <Scene key='cadastro_screen' component={CadastroScreen} title='Cadastro' hideNavBar={false} />
        </Modal>
</Router>

Lorsque j'ajoute le wrapper modal, j'obtiens alors 2 barres de navigation en haut de ma vue, lorsque j'ajoute hideNavBar, les deux disparaissent. Comment puis-je résoudre ce problème, je veux une seule barre d'onglets, pas deux évidemment... ?

Utilisez <Modal hideNavBar> car <Modal> va ajouter sa propre barre de navigation pour que vous finissiez par en avoir deux avec celle de votre scène racine.