Also arbeiten wir mit dem Stack-Navigator.
Was ist nun mit der Auslosung?
Die Logik ist genau die gleiche.
Wir erstellen unser Shop Draw Navigator-Jahr, indem wir create draw navigator aufrufen und genau wie den Stack Navigator.
Diese Funktion möchte kein Argument.
Stattdessen richten wir unsere Zeichnungsnavigation in einem komponentenbasierten Ansatz ein, oder Dad erstellt hier einen Shop-Navigator,
und dies ist eine Reaktionskomponente.
Wieder könnten Sie das in einer separaten Datei haben.
Ich werde alles in einer Datei aufbewahren, um es neben dem alten Code zu haben, und in ihrem
Shop-Draw-Navigator-Punktnavigator kehren wir zurück.
Gleiche Logik wie zuvor Es spielt keine Rolle, dass es ein Unentschieden ist.
Und dort haben wir jetzt zwei verschiedene Bildschirme, die geladen werden können, wenn der Navigator und
die Reaktionsnavigation automatisch sicherstellen, dass ein Navigator erstellt wird, den wir mit genau demselben Code öffnen können, den wir
zuvor verwendet haben, ohne dass dies angepasst werden muss.
Hier haben wir also unseren Shop Draw Navigator-Punktbildschirm und Gerechtigkeit, bevor wir diesem Bildschirm einen Namen geben.
Hier haben wir zum Beispiel zwei Produkte.
Dieser Name wird dann automatisch im Zeichnungsnavigator verwendet.
Sie können dies aber auch überschreiben, wenn Sie möchten, und wir benötigen eine Komponente, die geladen wird, wenn wir
im Navigator auf diesen Link klicken.
Und hier ist das immer noch der Navigator des Produkts.
Nach wie vor können wir unsere Stapelnavigatoren verwenden, obwohl sie jetzt diesen komponentenbasierten Ansatz als Komponenten
verwenden, die in diesem Fall als Teil eines anderen Navigators als Teil des Zeichnungsnavigators erstellt
werden sollten.
Wir können hier immer noch auf unsere Stack-Navigatoren als Komponenten verweisen, da sie dieses Jahr Komponenten sind.
Dies ist eine Komponente und das Gleiche gilt für alle unsere Navigatoren.
Wir erstellen hier, dass sie alle Reaktionskomponenten sind, die ihre spezifischen Navigationslogik-Abfragekomponenten enthalten, und die
Gesamtkomponenten wie der Produktnavigator hier können in einem Zeichnungsnavigator verwendet werden. Daher werde ich dies zweimal
replizieren, damit wir hier auch unsere Bestellungen hinzufügen können Der Auftragsnavigator und der Administrator hier mit dem Admin-Navigator und stellen Sie sicher,
dass Ihre Namen keine Fehler enthalten, da wir sie in der gesamten App verwenden und
diese Logik nicht angepasst werden muss.
Wenn Sie also die Namen hier durcheinander bringen, funktionieren andere Teile der App nicht in Ordnung.
Jetzt haben wir diesen Zeichnungsnavigator eingerichtet und was ist nun mit der Konfiguration?
Nun gibt es zwei Dinge, die wir berücksichtigen müssen.
Zum einen müssen wir hier den Zeichnungsinhalt konfigurieren.
Und zweitens möchten wir unsere verschiedenen Bildschirme wie den Produktnavigator oder den Navigator der Bestellung so konfigurieren, dass
Ihre eigenen Symbole in der Schublade angezeigt werden.
Beginnen wir mit den Symbolen.
Zuvor haben wir eingerichtet, dass ich direkt in der Konfiguration des Stack-Navigators, den wir
jetzt in einer Zeichnung verwenden wollten, mit dem komponentenbasierten Ansatz arbeiten kann.
Das machen wir nicht mehr.
Stattdessen können wir diesen Teil hier einfach greifen. Wir sind tatsächlich das gesamte Objekt, das wir zuvor im Stapelnavigator
eingerichtet haben, und gehen zu unserer Auslosung über.
Und jetzt hier auf diesem Bildschirm, zu dem es gehört.
In diesem Fall gehört es also zum Admin Navigator.
Hier auf dem Admin-Bildschirm übergeben wir unsere Optionen erneut, genau wie wir es eine Sekunde lang getan haben. Ich gehe auf den Stack-Navigator.
Hier übergeben wir nun die Optionen für diesen Bildschirm und dies könnte eine normale Komponente sein oder wie es in
diesem Fall eine Komponente mit unserer Stapelnavigationslogik und zwei Optionen ist, übergeben wir ein Objekt und dort können
wir das zuvor verwendete Objekt wiederverwenden.
Ein Objekt mit einem Unentschieden kann ich also eingeben, wo wir es im Auge haben, und so weiter.
Dies alles wird also vor einer kleinen Anpassung gerecht, aber wir erhalten jetzt auch Requisiten, die durch die Reaktionsnavigation eingespeist
werden, und diese Requisiten haben einen Farbschlüssel, anstatt die aktive Farbtönungsfarbe zu zeichnen, und die Farbe hat immer die richtige Farbe,
da die Reaktionsnavigation hinter dem Szenen steuern, wo dies auf dem aktuell
aktiven Bildschirm geschieht oder nicht, und passen die in dieser Farbrequisite gespeicherten Werte an.
Ich habe bereits bereits bekannte hervorgehobene Farbe hervorgehoben.
Das ist also eine winzige Anpassung, die wir hier gut vornehmen müssen, und damit können
wir die Logik von den anderen Navigatoren kopieren, ebenso wie vom Navigator der Bestellung.
Lassen Sie uns dieses Objekt hier greifen, das wir hatten, und seine Navigationsoptionen gehen bis zur Auslosung der Bestellungen Bildschirm Hinzufügen der
Optionen Schlüssel übergeben und ist Objekt und Kommentar, es ist wieder in und wichtig, wir bekommen jetzt Requisiten, die diesen Farbschlüssel genau so
haben und nicht zuletzt machen wir das natürlich auch für den Produktbildschirm für den Produktnavigator.
Hier haben wir dieses Objekt. Nehmen wir es und gehen wir zu
unserem Zeichner, unserem Navigator. Hier ist unser Produktbildschirm, in dem der Optionsschlüssel hier eingerichtet ist.
Hat es übergeben und angepasst, wie ich es gerade gezeigt habe.
Jetzt haben wir hier unsere bildschirmspezifische Konfiguration.
Sie könnten jetzt sagen, was ist mit der Auslosung insgesamt, weil zuvor in der App mit
der alten Reaktionsnavigation, in der wir tatsächlich unsere Auslosung hatten und wir die aktive Farbtonfarbe und auch den Inhalt der
Auslosung konfigurieren.
Mit diesem neuen Ansatz können Sie das immer noch tun.
Wir gehen zu unserem Zeichnungsnavigator, wo wir den Gesamtnavigator einrichten und ihn wie zuvor über Requisiten
konfigurieren.
Es dreht sich alles um Komponenten und Requisiten. Hier haben wir jetzt jedoch eine andere Benennung.
Stattdessen haben wir keine Inhaltsoptionen und Inhaltskomponenten mehr.
Und das finden Sie in den offiziellen Dokumenten.
Wir haben jetzt Optionen zum Zeichnen und Zeichnen von Inhalten.
Die Werte sind jedoch am Ende genau gleich.
So können wir unser Inhaltsoptionsobjekt hier und
in der Vergangenheit erfassen, um hier Inhaltsoptionen zu zeichnen, und dies kommentieren und weiterleiten, um einen Inhalt zu zeichnen.
Es ist auch fast das gleiche.
Wir wickeln diese Komponente hier
bis hierher ein.
Kopieren Sie
dies und übergeben Sie es hier an den Zeichnungsinhalt und kommentieren Sie dies in.
Allerdings sind jetzt zwei wichtige Dinge, die diesen Patch verwenden, hier nicht erlaubt.
Sie sollten dies außerhalb von hier tun.
So hier zum Beispiel im Shop-Navigator nickte verschachtelte Komponente.
Außerdem werden keine Elemente mehr gezeichnet, sondern es wird eine Elementliste gezeichnet, die wir auch oben aus der
Reaktivierungs-Schrägstrichzeichnung importieren müssen.
Also importieren wir hier die Draw Item Liste
damit.
Wenn ich jedoch nach unten scrolle, sollte dies jetzt wieder funktionieren und dies sollte nun unsere Arbeitsauslosung sein, damit
wir den Shop-Navigator haben. Wir haben alle diese Stack-Navigatoren. Was jetzt noch übrig ist, ist der
Switch-Navigator, der im Grunde entweder unseren Startbildschirm oder Sie ausschaltet Bildschirm oder der Shop-Bildschirm oder machen Sie Ihre jeweiligen
Navigationsstapel sollte ich sagen.
Daran werden wir als nächstes arbeiten.