Lassen Sie uns also daran arbeiten, unsere gesamte Logik hier im App-Navigator zu portieren.
Wir haben hier mit diesem Dummy-Stack angefangen und das ist schön, aber letztendlich nicht das, was wir brauchen.
Jetzt liegt es an Ihnen, wo Sie diese Konfiguration vornehmen, aber da wir dies zuvor in der
Shop-Navigator-Datei getan haben.
Ich werde es dort auch weiter machen.
Auch mit dieser neuen Logik.
Was ich also tun werde, ist ein App-Navigator.
Ich werde meinen Stack hier tatsächlich loswerden und ich werde diesen Import loswerden und ich werde diesen hier loswerden.
Ich werde den Navigationscontainer von obwohl verlassen und ich werde diesen Import zurücksetzen, obwohl sich dies letztendlich ändern
wird ein bisschen.
Aber jetzt gehen wir weiter zum Shop-Navigator. Zunächst können wir diesen Import aus der Reaktion löschen. Die Navigation wird
ihn nicht benötigen.
Lassen wir den Rest fürs Erste, aber anstelle dieses gelöschten Imports können wir aus dem React Navigation Stack
importieren und alles ist bereits aus dem Draw und aus dem Ad Stack importieren wir den Create Stack Navigator aus dem Slash
Draw, den wir importieren, erstellen den Draw Navigator.
Jetzt können wir nach unten scrollen und die Standardnavigationsoptionen hier tatsächlich belassen.
Zum Glück klingelt der Name und wie Sie die Dinge im Allgemeinen konfigurieren und was Sie konfigurieren
können, hat sich nicht wirklich geändert, nur wie Sie die geänderte Konfiguration anwenden. Was also definitiv
geändert werden muss, ist dieser Teil hier unser erster Stack-Navigator, den ich vorerst duplizieren und später löschen oder löschen werde Auskommentiert, um einen Vergleich nebeneinander
zu haben Ich werde eine neue Konstante erstellen, die ich als Produktstapel-Navigator bezeichne, damit es nicht zu einem
Namenskonflikt kommt und es wirklich offensichtlich ist, dass dies einen Stapel
von Seiten enthält, von denen ein Stapel vorhanden ist Bildschirme und wir machen das mit Create Stack Navigator mit
dieser Funktion, was ich Ihnen gezeigt habe, bevor diese Funktion keine Parameter mehr akzeptiert. Stattdessen werde ich hier eine neue Konstante erstellen. Products
Navigator.
Jetzt haben wir also einen Namenskonflikt, der aber trotzdem entfernt wird.
Und dies ist jetzt eine Reaktionskomponente der Funktionskomponente, und wir könnten für alle in einer
separaten Datei gespeicherten Komponenten nur für diesen Nebeneinander-Vergleich und weil wir alles in dieser Datei hatten,
bevor ich jetzt alle diese Navigatorkomponenten mit unserer Navigation einrichten werde Die Konfiguration hier in dieser einzelnen
Dateiaufteilung ist definitiv etwas, das Sie in Betracht ziehen könnten.
Hier ist also unser Produktnavigator, und dort werde ich jetzt den Produktstapel-Navigator dot Navigator zurückgeben,
wie Sie gelernt haben, und in ihrem Produktstapel-Navigator-Punktbildschirm hatten wir zuvor drei Bildschirme, sodass ich diesen
zweimal replizieren werde.
Wir hatten dort drei Bildschirme.
Jetzt können wir sie konfigurieren. Lassen Sie uns dem ersten Bildschirm einen Namen zuweisen. Dies ist die Produktübersicht.
Jetzt ist die Komponente, die dort geladen werden soll, unsere Produktübersicht-Bildschirmkomponente.
Im Grunde genommen ist der Name, den wir jetzt auch für den zweiten Bildschirm abgebildet haben, Produktdetail.
Also, was wir hier hatten und stellen Sie sicher, dass Sie diese Namen behalten,
damit die gesamte Navigationslogik, die Sie in Ihrer App haben, nicht geändert werden muss, damit dies weiterhin funktioniert, und
hier die Komponente, die geladen werden soll, wenn wir sie erreichen möchten Dieser Bildschirm ist die
produktdetailierte Bildschirmkomponente, genau wie wir dort unten eine hatten. Lassen Sie uns das reformieren und für den letzten Bildschirm ist der Name Warenkorb.
Was wir hier hatten und wir wollen einfach so zum Herzbildschirm gehen.
Jetzt richten wir diesen Navigationsstapel mit dieser neuen komponentenbasierten Logik ein.
Jetzt können wir in den App-Navigator importieren und für Dad
müssen wir nur noch ein Export-Schlüsselwort davor hinzufügen, damit diese Konstante dieser Komponente hier
in dieser Datei exportiert wird. Im App-Navigator importieren wir jetzt keinen Shop-Navigator, sondern importieren Den neu exportierten Produktnavigator importieren
wir hier und in unserem Navigationscontainer können wir nun den Produktnavigator wie folgt hinzufügen
und den Import des Produktübersichtsbildschirms loswerden.
Nun zurück zum Shop-Navigator.
Werfen wir einen Blick auf diese Optionen.
Als nächstes die Navigationsoptionen, die wir hier auf diesem Stapel hatten.
Was machen wir damit?
Nun, wir haben tatsächlich zwei Optionen hier in unserem Produktnavigator auf dem alten Navigator mit der alten Logik.
Eine ist das Tat-Symbol.
Dieser Stapel sollte sich in der Schublade befinden, die wir später hinzufügen werden. Die zweite Option sind unsere Standardnavigationsoptionen,
die auf alle Bildschirme angewendet werden sollten, die Teil dieses Navigators sind.
Und tatsächlich gibt es dann auch einen dritten Ort, an dem wir Dinge in der Vergangenheit konfigurieren.
Und das war auf einigen Bildschirmen.
Werfen wir einen Blick auf unseren Produktübersichtsbildschirm, der sich dort im Shop-Ordner befindet, wenn wir nach unten scrollen.
Wir hatten diese Eigenschaft für Navigationsoptionen, die wir dem Funktionsobjekt des Produktübersichtsbildschirms hinzugefügt haben, und das war eine Funktion, bei
der wir Dinge wie den Headertitel konfigurieren, aber auch, was jetzt mit dieser neuen
Logik auf der linken und rechten Seite des Headers steht.
So machst du das nicht mehr.
Stattdessen können wir das gesamte Setup hier kopieren.
All das können wir also kopieren.
Wir können es hier in der Bildschirmkomponente auskommentieren und zur App-Navigator-Komponente gehen.
Entschuldigen Sie, dass ich die Navigator-Komponente einkaufe, in der wir unsere Stapelnavigation eingerichtet haben, und jetzt auf
dem Bildschirm, auf dem wir diese Optionen haben möchten, können wir eine dritte Requisite hinzufügen, und das ist die Eigenschaft de options und zwei Optionen.
Sie können genau analysieren, was Sie zuvor in der Komponente hatten, so dass Ihre Funktionsübergabe eine richtige Funktion
ist.
Was den NAF-Datenparameter
empfängt, der dann ein Konfigurationsobjekt zurückgibt, wird der konkrete Wert für diesen Parameter
durch die Reaktionsnavigation eingegeben und die Konfigurationsnamen, die wir hier festlegen können, haben sich nicht
geändert.
So können wir immer noch einen Header-Titel vor oder nach links einrichten.
Das alles ist also genau das gleiche, wie Sie gelernt haben.
Es funktioniert genauso.
Zum Glück konnten wir das jetzt hier machen und den Navigator einkaufen.
Aber dies würde natürlich schnell sehr, sehr groß werden, wenn wir all die verschiedenen
bildschirmspezifischen Konfigurationen hier hätten.
Also ist es eigentlich nicht das, was ich hier machen werde.
Stattdessen sehe ich zwei Möglichkeiten.
Zum einen richten wir unser Setup außerhalb des Produktstapel-Navigatorbildschirms in der Bildschirmkomponente ein.
Das zweite ist, dass wir nur unsere Optionen dort behalten und das ist der Ansatz, dem ich folgen werde.
Zurück in der Produktübersicht werde ich dies wieder kommentieren, aber jetzt hier, wo wir nicht mehr festlegen, fungiert
es als Wert für die Navigationsoptionen, sondern wir exportieren es einfach als Konstante, eine Konstante, die wir benennen
müssen, und ich ' Ich benenne diese Bildschirmoptionen. Keine Bildschirmoptionen enthalten diese Funktion und wir exportieren sie nach
ihrem Namen.
Es kollidiert nicht mit dem Komponentenexport, da wir dies hier mit der Standardeinstellung tun.
Jetzt exportieren wir also die Konfigurationsfunktion und dann den Shop-Navigator, den wir importieren können. Neben dem
Importieren des Produktübersichtsbildschirms aus dieser Datei können wir dies jetzt auch mit einem
benannten Import kombinieren, bei dem wir in die Bildschirmoptionsfunktion importieren und dann hier zwei Optionen aktivieren dieser Bildschirm.
Ich übergebe nur einen Zeiger auf diese Funktion, führe sie nicht aus, sondern zeige nur darauf.
Lassen Sie uns die für Sie ausgeführte Navigation so reagieren, dass
sie einmal in den konkreten Wert für diese NAF-Datenparameterfunktion passt und dieser Bildschirm konfiguriert wird.
Wenn wir diese Anzeigenkonflikte speichern, weil dieser Name dort unten kollidiert.
Um dies zu beheben, stellen wir sicher, dass wir alle die anderen Optionen unterstützen.
Jetzt werde ich mir die zeichnungsspezifische Option später ansehen, sobald wir eine Zeichnung für die
Standardnavigationsoptionen hinzugefügt haben.
Die gute Nachricht ist, dass wir immer noch diejenigen anwenden können, bei denen wir nicht alles auf Bildschirmebene einrichten müssen.
Wenn wir eine gemeinsame Konfiguration haben, die alle Bildschirme eines Navigators betrifft.
Und wie würden wir denken, können wir hier solche allgemeinen Optionen für all diese kostenlosen Bildschirme einrichten?
Nun, wir haben sie dort direkt im Navigator eingerichtet.
Wir haben auch eine kleine Eigenschaft für Bildschirmoptionen, also keine benannten Optionen, sondern Bildschirmoptionen.
Dies sind jedoch die Optionen, die hier auf jeden Bildschirm angewendet werden, und bildschirmspezifische
Optionen werden wie früher im Kurs mit diesen allgemeinen Optionen zusammengeführt.
Jetzt übergeben wir hier unser Standardobjekt für Navigationsoptionen.
Also dieses Objekt dort oben füttere ich es einfach als Wert für Bildschirmoptionen und das wars.
Jetzt können wir hier als Produktnavigator auskommentieren und alles speichern.
Sobald wir das tun, können wir das Ergebnis immer noch nicht sehen, da wir in dieser Shop-Navigator-Datei immer noch
viel Code haben, der den alten Navigator oder diese alte Navigator-Logik verwendet und der hier ein Problem verursacht.
Um immer noch ein Ergebnis zu sehen, werde ich dies alles nur vorübergehend auskommentieren und erneut
speichern.
Damit dies wieder aufgebaut wird und Sie sehen, erhalten wir jetzt einen Fehler.
Nun, es gibt eine Sache, die wir tatsächlich anpassen müssen, und die Produktübersichtskomponente in unserer
Bildschirmoption lenkt den Header nach links.
Dies muss nun hier eine Funktion sein, die unser JSA X-Markierungs-Markup und dasselbe für das Header-Recht zurückgibt.
Wir müssen also beide in Funktionen konvertieren, und Sie können dies einfach tun, indem Sie eine leere Parameterliste und dann
den Pfeil hier hinzufügen.
Nebenbei bemerkt, Sie könnten den Parameter hier akzeptieren, wenn Sie möchten, und das wären Requisiten, da
dies nun tatsächlich ein Reaktionskomponentenvogel ist, der hier einen konkreten Wert für Requisiten findet,
und durch Reaktionsnavigation und die Werte, die Sie von dort erhalten können gefunden in den offiziellen
Dokumenten mit dieser Einstellung vorgenommen, wenn wir jetzt Sicherheit ist, startet es jetzt hier neu und wir sehen jetzt diesen Bildschirm wieder.
Nehmen Sie jetzt definitiv unsere Konfiguration auf.
Denken Sie daran, dass das Zeichnen nicht funktioniert, da wir noch kein Zeichnen und Navigieren hinzugefügt haben.
Bei all dem haben wir gelernt, wie wir unsere Komponenten, unsere Bildschirme und den gesamten Stapelnavigator mit
dieser neuen Logik konfigurieren können.
Es ist Zeit, weiter zu portieren. Sie können die nächsten Schritte auf jeden Fall selbst ausführen und einen
Port einrichten, um bestimmte Optionen für das Produktdetail und den Kartenbildschirm zu überprüfen. Danach fahren wir mit dem nächsten Stapel
fort.
Und dann natürlich auch bei der Auslosung klagen.