Ändern Sie die Ansicht im Navigator in Native React

Das ist der minimale Arbeitsnavigator - er kann viel mehr (siehe am Ende):

1. Sie benötigen Ihre Hauptansicht "navigator", um die Navigator-Komponente
zu rendern
2. Im Navigator müssen Sie angeben, wie Szenen für verschiedene Routen gerendert werden sollen (renderScene-Eigenschaft)
3. In dieser "renderScene" -Methode sollten Sie die Ansicht (Szene) basierend darauf rendern, welche Route gerendert wird. Route ist ein einfaches JavaScript-Objekt und nach Konvention können Szenen anhand des ID-Parameters der Route identifiziert werden. Für Klarheit und Trennung von Bedenken definiere ich normalerweise jede Szene als separate benannte Komponente und verwende den Namen dieser Komponenten als "id", obwohl es nur eine Konvention ist. Es könnte was auch immer sein (wie Szenennummer zum Beispiel). Stellen Sie sicher, dass Sie den Navigator als Eigenschaft an alle diese Ansichten in renderScene übergeben, damit Sie weiter navigieren können (siehe Beispiel unten)
4. Wenn Sie zu einer anderen Ansicht wechseln möchten, schieben oder ersetzen Sie die Route tatsächlich zu dieser Ansicht und der Navigator kümmert sich darum, diese Route als Szene darzustellen und die Szene richtig zu animieren (obwohl die Animation sehr begrenzt ist) - Sie können allgemein steuern Animationsschema, aber auch jede Szene anders animieren (siehe die offiziellen Dokumente für einige Beispiele). Der Navigator behält den Stack (oder vielmehr das Array) der Routen bei, so dass Sie sich frei zwischen denen bewegen können, die sich bereits auf dem Stack befinden (durch Drücken von Neu, Poppen, Ersetzen usw.)

"Navigator" Ansicht:

Eine Komponente:

Weitere Details finden Sie hier Ссылка und Sie können viele Beispiele im Samples-Projekt finden Teil von reactive-native: Ссылка

Ich finde, dass Facebook-Beispiele entweder zu einfach oder zu komplex sind, wenn man demonstriert, wie der Navigator funktioniert. Basierend auf @ Jarek-Potiuk Beispiel, habe ich eine einfache App erstellt, die Bildschirme hin und her wechseln wird.

In diesem Beispiel verwende ich: react-native: 0.36.1

index.android.js

App / Apple.js

app / Orange.js

Ich hatte die gleichen Probleme, konnte kein gutes Beispiel für die Navigation finden. Ich wollte die Möglichkeit, Ansichten zu steuern, um auf einen neuen Bildschirm zu wechseln, aber auch die Möglichkeit, zum vorherigen Bildschirm zurückzukehren.

Ich habe die obige Antwort von Andrew Wei verwendet und eine neue App erstellt und dann seinen Code kopiert. Das funktioniert gut, aber der .push erstellt weiterhin neue Ebenen übereinander ( Apple & gt; Orange & gt; Apple & gt; Orange & gt; Apple & gt; Orange etc.). Also habe ich .pop in der Orange.js Datei unter goApple() anstelle von .push verwendet.

Dies funktioniert jetzt wie ein " zurück " - Button, nach dem ich gesucht habe, während ich lehre, wie man zu anderen Seiten navigiert.