React-native-router-flux: Wie benutzt man Modal

Versuchen Sie, Ihre root -Szene in modal einzufügen.
So was:

<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 />

Sie sollten die Root-Szene als modal erstellen, wie @luco vorgeschlagen hat. Bitte Beispielprojekt prüfen, Login ist modal implementiert

Das geht immer noch nicht.

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

Es macht für mich keinen Sinn, dass das Einwickeln von allem in die modale Szene eine bestimmte Szene modal machen würde, wenn ich nicht möchte, dass der Rest (wie ListingDetail) modal ist. Gibt es einen bestimmten Parameter in Actions.map , den ich verwenden muss?

Leider ist es ein Problem der React-Navigation - es unterstützt keine verschiedenen Animationen für Stapelkinder. Ich kann Ihr Problem nicht reproduzieren (der Code sieht gut aus), deshalb bitte ich alle, dieses Repo-Beispiel zu forken und zu ändern, wenn sie möchten, dass ihre Probleme gelöst werden. Das Anmeldemodal aus Beispiel funktioniert gut, wie Sie sehen können

Wollen Sie damit sagen, dass es keine Möglichkeit gibt, einen modalen iOS-Übergang zu unterstützen? Dh einer, der von unten gleitet?

Wie meinst du das? Ich habe Ihnen zweimal gesagt, dass das Beispiel einen modalen Anmeldebildschirm hat (der von unten gleitet).

Ok, aber Sie sagten auch, mein Code sieht gut aus ....

Ich habe mein Bestes versucht, dem Beispiel zu folgen, aber da es keine Dokumentation gibt, kann ich nicht sagen, was der Grund dafür ist, dass alles dort ist. Ich kann diesen Code nicht einfach kopieren und einfügen, da meine Routen offensichtlich unterschiedlich sind.

Dasselbe könnte ich Ihnen über Ihren Code sagen - ich sehe nicht das gesamte Projekt und alle Details. Zum Beispiel können Sie Actions.map verwenden und es könnte während der Kompilierung sogar nicht generiert werden (und null sein).

Gerne stelle ich weitere Codebeispiele zur Verfügung, wenn Sie mir mitteilen, was Sie benötigen. Actions.map funktioniert, es geht nur von der Seite in das über, was ich von unten erwarte.

Wollen Sie damit sagen, dass Sie nicht sowohl push als auch modal Übergänge in derselben App haben können?

OMG. Nicht in der App, sondern in einem Container. Nach genauerer Betrachtung hat Ihr Code einen Fehler - 'map' ist immer noch ein untergeordnetes Element des 'normalen' Containers (key=root), nicht modal (key='modal'). Sieht so aus, als verstündest du nicht, was du tust. Vielleicht ist Ihnen diese Komponente zu komplex...

Versuche dies:

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

Danke, das behebt das Problem. Wie soll ich etwas verstehen, wenn es keine Dokumentation darüber gibt? Es gab viele Leute, die Probleme mit dieser modalen Funktion haben, vielleicht ist das ein Hinweis auf die Notwendigkeit von Dokumenten ...

Einige aktuelle Posts hier beschäftigen sich mit der JSX-Syntax und dem Verständnis von Navigationscontainern, nicht mit der Dokumentation.
Ich habe weitere Informationen zu Modal hinzugefügt.

Hallo,

hat bei mir funktioniert

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

Wenn ich den modalen Wrapper hinzufüge, bekomme ich oben in meiner Ansicht 2 Navigationsleisten, wenn ich hideNavBar hinzufüge, verschwinden beide. Wie kann ich dieses Problem lösen? Ich möchte nur eine Tab-Leiste, nicht zwei offensichtlich ...?

Verwenden Sie <Modal hideNavBar> , weil <Modal> seine eigene Navigationsleiste hinzufügt, sodass Sie am Ende zwei mit der einen aus Ihrer Root-Szene haben.