Die meisten unserer Dateien müssen nicht geändert werden.
Was wir jedoch ändern müssen, ist, was in den Navigationsdateien und im Navigationsordner
in App J passiert. S. Vielleicht erinnern Sie sich daran, den
Navigationscontainer hier gerendert zu haben, und der Navigationscontainer ist hier nur eine benutzerdefinierte Komponente, in der wir letztendlich
unsere Logik haben, um zu überprüfen, ob der Benutzer authentifiziert ist, und dann einen Shop-Navigator zu rendern, der
unser hier erstellter Routennavigator mit Reaktionsnavigation ist und hier müssen sich die Dinge jetzt ändern.
Beginnen wir nun mit dem Navigationscontainer.
Wir brauchen diesen Code hier nicht mehr, wo wir manuell woanders navigieren, wenn der Benutzer authentifiziert ist,
da Sie später sehen werden, dass dies bei dieser komponentenbasierten Konfiguration jetzt anders gehandhabt wird, sodass
Sie die Tatsache hier löschen können.
Keep ist hier ausgeschaltet, obwohl Sie den Verweis hier jedoch löschen und auch dort löschen können. Wenn es um die Importe
hier geht, brauchen wir hier keine zwei Hooks mehr und wir alle brauchen diesen Import nicht mehr.
Wir haben also nur noch den Shop-Navigator übrig und das brauchen wir hier auch nicht mehr wirklich.
Wir fügen keinen Shop-Navigator als solche Komponente hinzu, in der wir uns dann auf
die Gesamtkonfiguration aus der Shop-Navigator-Datei beziehen, da diese Gesamtkonfiguration natürlich alle mit der
alten Logik eingerichtet ist, diese globale registrierungsähnliche Konfiguration einfach zu haben funktioniert nicht mehr mit
reaktionsnavigation 5.
Stattdessen müssen wir jetzt all das auf den neuen Ansatz für diesen komponentenbasierten Ansatz migrieren und
dies tun.
Ich möchte ganz einfach im Navigationscontainer anfangen.
Ich werde einen neuen Stack-Navigator einrichten, der vorerst nur ein Dummy-Navigator ist.
Haben Sie also gesehen, wie es im Allgemeinen funktioniert, bevor wir dies später tatsächlich gut
auf unsere eigentliche Anwendung anwenden werden?
Fügen wir hier den Import von at react hinzu.
Navigation Schrägstrich native.
Und von dort müssen wir die Navigation in den Navigationscontainer importieren.
Das kann verwirrend sein, da unsere eigene Komponente hier der gesamte benannte Navigationscontainer ist.
Um Verwirrung hier zu vermeiden, werde ich unsere eigene Komponente hier in App Navigator umbenennen oder wie auch immer Sie
sie benennen möchten, also werde ich sie hier umbenennen und alles, um Verwirrung zu vermeiden,
obwohl dies in der App-Komponente in App technisch nicht erforderlich ist. Ja, das werde ich Als App-Navigator importiert Ich benenne
die Datei in App-Navigator um und importiere sie hier in der App-Komponente aus dem App-Navigator. Passen Sie daher den Importpfad an,
um diesen neuen Dateinamen einzuschließen.
Und dann hier rendere ich App Navigator.
Jetzt habe ich nur diese Namensänderungen vorgenommen, um Verwirrung zu vermeiden.
Der wichtigere Teil findet in diesem App Navigator statt, der zuvor unser Navigationscontainer war.
Jetzt importieren wir den Navigationscontainer aus React Native.
Aber Papa wird eine andere Komponente sein als das, was wir in der Vergangenheit gebaut haben.
Es hat nur den gleichen Namen, weshalb ich es wichtiger umbenannt habe als diesen Navigationscontainer.
Im Moment importieren wir stattdessen etwas aus dem Slash-Stack für die Anzeigenreaktionsnavigation.
Und dies ist jetzt ein Paket, das es nicht gibt und das wir noch nicht installiert haben.
Stoppen wir diesen Prozess also erneut.
Und mit npm install dash dash safe installieren wir am React Navigation Slash Stack, damit NPM Ashutosh Safe
am React Navigation Slash Stack installiert.
Dadurch wird die Stack-Navigationslogik in den USA installiert,
und wir können alle bereits eine Reihe von Paketen installieren, da
wir sie später benötigen D zu Installationsbefehlen zu beenden und danach mit Motorstart können
wir diesen Expo-Server wieder aufrufen, also haben wir jetzt Vietnamization Stack installiert.
Wir können etwas daraus importieren und das ist etwas wie D create stack navigator.
Jetzt erstellen Stack Navigator ist eine Funktion, die wir bereits im Shop Navigator kennen und die immer noch die
alte Reaktionsnavigation verwendet, bei der wir auch importieren, um einen Stack Navigator aus der Reaktionsnavigation zu erstellen, oder wenn
Sie für dieses Paket aus einem separaten Paket gearbeitet haben.
Wir hatten dort aber auch den Stack-Navigator erstellt und den Draw-Navigator am Ende erstellt.
Jetzt haben wir den Stack-Navigator erstellt, um unser Konfigurations-Setup für unsere Navigationsregistrierung für diesen Teil unserer Anwendung zu erstellen. Sie können dies für die Produktübersicht
über die Produktdetails und den Kartenbildschirm sagen, die wir zu einem
Stack zusammengestellt haben, und dann hatten wir mehrere solcher Stacks um sie zu komponieren, um
sie in unserem Draw Navigator zu sammeln, den wir schließlich mit dem Off-Screen im Switch Navigator kombiniert haben.
Zurück zu unserem App-Navigator: Was machen wir hier mit dem Erstellen des Stack-Navigators?
Es funktioniert jetzt anders.
Jetzt verwenden wir es, um eine neue Komponente damit zu erstellen, und ich werde es meinen Stapel nennen.
Der Name liegt ganz bei Ihnen, aber Sie rufen einfach an und erstellen einen Stack-Navigator wie diesen, und Sie sind fertig.
Und das ist jetzt eine große Veränderung.
Sie übergeben jetzt kein Objekt, um einen Stapelnavigator zum Konfigurieren zu erstellen.
Stattdessen ist es eine Funktion, die kein Objekt will.
Es ist eine Funktion, die kein Objekt benötigt. Was macht sie dann?
Was ist mein Stack? Mein Stack ist jetzt eine Reaktionskomponente und wir verwenden sie als solche hier im App-Navigator, um genau zu
sein.
Wir müssen die gesamte Navigationslogik mit der Navigationscontainerkomponente umschließen, die wir aus React
Navigation Native importieren.
Sie können sich diese Navigationscontainerkomponente im Grunde genommen als die Komponentenversion des App-Containers vorstellen, die wir im
alten Setup mit create app container erstellt haben.
Genau dort mussten wir unseren fertigen Navigator mit einem App-Container erstellen.
Jetzt müssen wir unser komponentenbasiertes Navigations-Setup mit einem Navigationscontainer umschließen.
Hier richten wir nun unsere Logik ein, wenn es darum geht, welche Seiten wir laden möchten.
Und hier verwenden wir jetzt meinen Stack als Reaktionskomponente, aber nicht so.
Stattdessen benötigen wir hier die DOT-Navigator-Komponente.
Mein Stapel ist also eigentlich ein Objekt mit einer Navigator-Eigenschaft, und die in dieser Eigenschaft
gespeicherten Werte sind jetzt eine Komponente.
Jetzt können wir diese Komponente erstellen und zwischen der Eröffnungs- und Abschlusssteuer dieser
Komponente die verschiedenen Bildschirme platzieren, die Teil dieses Stapels sein sollen.
Was wir zuvor hier im Shop-Navigator in diesem Objekt hatten, haben wir übergeben, um den Stack-Navigator für diese
Karte der Bildschirmkomponenten und ihrer Namen zu erstellen.
Das ist es, was wir jetzt hier zwischen diesem öffnenden und schließenden Tag einrichten.
Sie könnten daher denken, dass wir die Produktübersicht-Bildschirmkomponente rechts hinzufügen.
Dies ist eine unserer Komponenten. Wir würden einen Import hinzufügen, den wir hier nicht durchgeführt haben, da dies
falsch ist, aber Sie könnten denken, dass wir dies fast gut machen.
Dies wäre sicherlich der Bildschirm, den wir als Teil dieses Navigators haben möchten, aber er hätte
keinen Namen.
Jetzt brauchen wir einen Namen, damit wir zum Beispiel dorthin navigieren können, damit wir irgendwo in unserer Anwendung eine
Navigation auslösen können.
Deshalb haben wir auch hier einen Namen für das alte Setup.
Also machen wir stattdessen etwas anderes.
Wir verwenden meinen Stapel dieses Objekt wieder dort oben und jetzt eine zweite Eigenschaft, die die Bildschirm-Eigenschaft hat,
genau wie die Navigator-Eigenschaft. Die Bildschirm-Eigenschaft enthält auch eine Reaktionskomponente und daher können wir sie
so rendern.
Dies ist jetzt eine Komponente, mit der wir einen Bildschirm definieren können, der Teil dieses Stack-Navigators sein soll,
und den wir jetzt mithilfe von Requisiten konfigurieren, da wir hier mit einer Komponente arbeiten, sodass die Konfiguration mit Requisiten genauso
funktioniert wie immer Wenn wir mit Komponenten arbeiten, um diesem Bildschirm einen Namen zu geben, fügen wir eine Namensstütze
hinzu. Jetzt können wir diesen Namen verwenden, den wir hier verwenden. Produktübersicht, damit wir diesen Namen hinzufügen und der Reaktionsnavigation mitteilen können,
welche Komponente geladen werden soll, wenn wir auf diesen Namen abzielen Wenn wir dies beispielsweise mit einer
Einwanderungsaktion tun, fügen wir eine zweite Requisite hinzu, die die Komponenten-Requisite enthält. Diese sollte einen Zeiger auf die Komponente enthalten,
die wir laden möchten, wenn wir zu diesem Bildschirm mit diesem Namen wechseln möchten.
Dazu importiere ich hier den Produktübersichtsbildschirm aus unserem Bildschirmordner in den Shop-Unterordner und dann in
den Produktübersichtsbildschirm.
Also jetzt brauchen wir es und ich habe bestanden ist hier.
Wichtig ist, dass wir die Komponente hier nicht erstellen.
Wir zeigen nur darauf, wir verwenden nur den Namen, der aus dieser Datei exportiert wird.
Und damit haben wir jetzt unseren ersten kleinen Stapel hier aufgebaut.
Lassen Sie uns nun diesen Import aus dem Shop-Navigator auskommentieren.
Wir brauchen es im Moment nicht mehr.
Lassen Sie uns alles speichern und seine auf Android starten, sagen wir.
Und wenn Sie dies tun, wird das Javascript-Bundle erstellt und auf dem Android-Gerät geöffnet.
Und was Sie sehen werden, ist unser Produktübersichtsbildschirm.
Natürlich sieht es ein bisschen anders aus.
Natürlich fehlen die Header-Buttons.
Es fehlt die gesamte Header-Konfiguration.
Der Titel ist alles falsch, aber das macht Sinn, weil wir jetzt nicht den alten Navigator verwenden, in
dem wir all diese Konfiguration hatten, sondern den neuen, und dies ist nur ein Beweis dafür, dass es funktioniert und wie es funktioniert.
Lassen Sie uns nun mit diesem Wissen dieses winzige Beispiel hier belassen und unsere gesamte hier eingerichtete Navigation
auf diese neue Logik portieren.