Lassen Sie uns am Bestellbildschirm arbeiten, bevor wir die Navigation hinzufügen. Wir müssen sie
nicht beenden, aber ich möchte sie anzeigen können.
Also importiere ich dort React von React, damit ich eine gültige React-Komponente erstellen, wie immer etwas von React Native importieren
kann und dass etwas auch das ist, woran wir ziemlich gewöhnt sind, oder?
Es ist nie so überraschend.
Wir
brauchen eine Ansicht, wir brauchen wahrscheinlich eine flache Liste, weil wir möglicherweise mehrere Bestellungen haben,
eine unendliche Menge, und ich möchte das rendern können, und damit können wir hier unseren Bestellbildschirm so erstellen.
Ich werde das natürlich auch exportieren und das Styling sollte hier eigentlich nicht erforderlich sein, eigentlich sollten wir hier nicht einmal die Ansicht
brauchen, weil ich nur meine Auftragsliste ausgeben möchte. Die Daten, die wir hier benötigen, stammen natürlich
von Redux. Daher sollten wir
den Use Selector von React Redux importieren, damit wir auf den Redux-Store zugreifen können.
Hier können wir also unsere Bestellungen mit Hilfe des Verwendungsselektors erhalten und den Verwendungsselektor jetzt auf den Status zeigen. Aufträge und das ist natürlich die Kennung, die ich
hier in kombinierten Reduzierungsaufträgen hier zugewiesen habe. Dies gibt uns Zugriff auf den Statusordner, der
vom Auftragsreduzierer verwaltet wird, und dort haben wir
eine andere Auftragseigenschaft, die das tatsächliche Array von Aufträgen enthält.
Also hier muss ich auf den Status zugreifen. Aufträge. Bestellungen am Ende,
das gibt mir meine Bestellungen, die in Redux gespeichert sind.
Hier müssen wir nur noch unsere flache Liste zurückgeben, und diese erhält Aufträge, die ein Array
sein sollten und die als Daten dienen. Jetzt ist in neueren Versionen von React Native kein Schlüsselextraktor erforderlich, da jede Bestellung,
wenn Sie sich das Modell ansehen, eine ID hat und neuere Versionen von React danach suchen
sollten, aber um sicher zu gehen, werde ich sie hier hinzufügen und rendern Der Artikel sollte jetzt natürlich eine Funktion enthalten, die die Artikeldaten empfängt und
am Ende alles zurückgibt, was wir pro Bestellung rendern möchten. Jetzt wird ein Bestellartikel in Zukunft komplexer. Im Moment
gebe
ich nur noch einen Text aus, damit wir schnell etwas auf dem Bildschirm sehen
können, bevor wir dies verfeinern.
Der Text hier für den angegebenen Artikel könnte sein und jetzt
schauen wir uns die Reihenfolge an. Dort haben wir die ID. Wir haben die Artikel, die
eine
weitere Liste darstellen. Die einfachste Ausgabe ist also einfach der Betrag. Hier gebe ich also nur den Gesamtbetrag
aus, den meine Bestellung hier hat.
Dies ist, was ich in
der flachen Liste ausgebe, jetzt haben wir einen
Grundbestellungsbildschirm, natürlich müssen wir jetzt in der Lage sein, das zu erreichen. Gehen wir also zum Shop-Navigator und importieren Sie
den Bestellbildschirm hier, den Bestellbildschirm aus dem Bildschirmordner, aus dem Shop-Bestellbildschirm. Jetzt ist es wichtig, dass ich ihn nicht
zu diesem Stapel-Navigator hinzufügen möchte, da er nicht Teil davon ist stapeln, stattdessen möchte
ich
es mit einem Menü erreichen, mit einem Seitenmenü.
Also müssen wir einen Schubladen-Navigator bauen.
Natürlich können Sie auch mit Registerkarten arbeiten, wenn Sie dies bevorzugen, aber ich möchte hier mit einer
Schublade arbeiten, daher benötigen wir diesen Schubladen-Navigator.
Jetzt sollte der Bestellbildschirm, obwohl er der einzige Artikel sein wird, in einem eigenen Stapel sein,
damit wir dort auch einen Header haben.
Daher werde ich hier einen neuen Auftragsnavigator erstellen, in dem ich einen weiteren Stapelnavigator erstelle. Dort muss ich nur Aufträge zuordnen, die auf den
Auftragsbildschirm zeigen. Das zweite Argument hier sollte noch einige Standardnavigationsoptionen einrichten und ich werde sie verwenden Die gleichen
Optionen wie hier, daher werde ich dieses Objekt
tatsächlich greifen, es hier ausschneiden und in einer separaten konstanten Standardnavigationsoption speichern. Dies ist
ein Muster, das ich
auch bereits im Navigationsmodul verwendet habe, weil Jetzt können wir diese
Konstante hier im Produktnavigator für die Standardnavigationsoptionen und auch hier im Auftragsnavigator verwenden.
Jetzt ist es natürlich das Ziel, einen Schubladen-Navigator zu erstellen, den ich insgesamt als Shop-Navigator bezeichnen
werde, da er verschiedene Shop-Funktionen
kombiniert, die Sie mithilfe des Schubladen-Navigators erstellen können. Dort möchte ich nun diese
beiden Stapel, den Produktnavigator und den Auftragsnavigator, zusammenführen.
Hier benötigen wir also die Produkte mit dem Produktnavigator und den Bestellungen, die auf
den Auftragsnavigator zeigen, also auf diese Stapelnavigatoren. Ich möchte dort auch meine Inhaltsoptionen in der Schublade
konfigurieren. Auf diese Weise kann ich beispielsweise die Farbtonfarbe der Elemente festlegen, wenn sie ausgewählt
sind, und dort möchte ich die aktive Farbtonfarbe auf Farben einstellen. Primär, so dass sie mit der Primärfarbe gefärbt werden, wenn sie ausgewählt sind.
Jetzt sollte der Shop-Navigator hier zurückgegeben werden. Dies allein reicht nicht aus, aber es ist ein
erster Schritt.
Bevor wir die Menüschaltfläche hinzufügen, gehen wir zum Bestellbildschirm und fügen dort einen Titel hinzu. Ich füge dort Navigationsoptionen hinzu und setze
dies auf ein Objekt. Im Moment brauchen wir hier
keine dynamischen Optionen, da
ich nur den Header-Titel für Ihre Bestellungen festlegen möchte und jetzt, da ich daran denke, sollten wir
dies
auch auf dem Warenkorb-Bildschirm hinzufügen,
wo ich dies noch nicht mache. Dort möchte ich
dies auch auf dem Warenkorbbildschirm einstellen, dies auf Ihren Warenkorb einstellen.
Dies ist nun in den Navigationsoptionen des
Warenkorbbildschirms, im Bestellbildschirm oder in der Einrichtung dieses Navigators. Nachdem dies alles eingerichtet ist, müssen wir
diese Menüschaltfläche hinzufügen, dieses Hamburger-Symbol zum Beispiel auf dem Produktübersichtsbildschirm, auf dem ich die Schublade öffnen
und zu meinen Bestellungen gehen möchte. Um es dort hinzuzufügen, gehen wir
zu den Navigationsoptionen des Produktübersichtsbildschirms, der bereits dynamisch ist, was
gut
ist. Fügen Sie dann neben dem Hinzufügen der Kopfzeile für dieses Warenkorbsymbol auch headerLeft
hinzu, und headerLeft sollte natürlich auch die Kopfzeilenschaltflächen enthalten, aber dort , es werden meine Menüpunkte sein, also werde
ich es so nennen und dort möchte ich je nach Plattform, auf der wir laufen, das md-Menü oder
das ios-Menü verwenden und
ich möchte natürlich nirgendwo navigieren, stattdessen mit der Navigation Stütze hier sozusagen, ich möchte Kippschublade nennen, die
die Seitenschublade öffnet. Das gleiche
Setup ist übrigens auch im Bestellbildschirm erforderlich, damit wir diesen Bildschirm verlassen können.
Hier benötigen wir also die dynamische Einrichtung der Navigationsoptionen, in der wir hier
eine Funktion haben, in der wir unser Konfigurationsobjekt zurückgeben, damit wir dort auch headerLeft mit den
Header-Schaltflächen hinzufügen können, wobei unser Menü die Schublade umschaltet Das hängt von den
Navigationsdaten hier ab und dafür müssen wir natürlich Header-Buttons, Header-Buttons und Artikel importieren. Auf dem Produktübersichtsbildschirm muss
ich diese Dinge am Ende
hier importieren. Diese beiden Zeilen müssen hinzugefügt werden auch zum Bestellbildschirm.
Lassen Sie es
mich also hinzufügen, indem Sie die Kopfzeilenschaltflächen und den Elementimport aus den React-Navigationskopfzeilenschaltflächen und
den Kopfzeilenschaltflächenimport aus unserer benutzerdefinierten Komponente hinzufügen. Wenn wir dies speichern, sollten wir hier eine Menüschaltfläche
haben, und wir öffnen die Schublade, wir können zu Bestellungen gehen und hier wird eine Fehlermeldung angezeigt, da ich auf dem
Bestellbildschirm natürlich die Plattform verwende API, also
sollten wir es dort importieren, lass uns das
machen, lass uns die Plattform hinzufügen und jetzt, wenn wir zurückgehen, können wir zu Bestellungen gehen und dort können wir auch zurückgehen und das gleiche gilt für Android.
Damit haben wir die Schublade hinzugefügt.
Es gibt eine Sache, die ich der Schublade hinzufügen möchte,
die ich jedoch noch nicht getan habe, bevor ich weiter an meiner Bestellliste arbeite. Wir geben noch nichts aus, weil
wir keine Bestellungen hinzufügen, wir haben dies nicht verbunden Klicken Sie auf die Schaltfläche "Jetzt bestellen". Wir sehen jedoch
nichts, was sich ändert, wenn wir etwas in den Warenkorb legen. Klicken Sie auf
"Jetzt bestellen". Wenn Sie mehrmals darauf klicken, wird sofort ein Fehler angezeigt. Dann wird
diese Reihenfolge hier angezeigt. Jetzt müssen wir den Einkaufswagen
räumen, das ist eine andere Sache, die wir tun müssen, aber bevor wir das tun, möchte ich in
der Schublade auch Symbole neben meinen Einträgen hier haben, und das Hinzufügen dieser Symbole ist eigentlich sehr einfach, Port '
Dies wurde im Navigationsmodul nicht getan, aber wir werden es jetzt tun. Um Symbole hinzuzufügen, müssen Sie nur zu den Bildschirmen
gehen, zu denen Sie in Ihrer
Schublade navigieren. In unserem Fall sind dies natürlich diese beiden Navigatoren. Dies sind also keine
Bildschirme, sondern diese beiden Navigatoren und auf diesen Navigatoren oder wenn es sich um Bildschirme handelt Auf
diesen Bildschirmen können Sie Navigationsoptionen festlegen. Damit meine ich nicht die Standardnavigationsoptionen, die Sie für alle Bildschirme dieses
Navigators festgelegt haben, sondern für diesen Navigator, wenn er wie hier in einem anderen Navigator verwendet wird.
Wir können hier also
Navigationsoptionen hinzufügen. Dies wird wiederum nicht auf die Bildschirme dieses Navigators
angewendet, sondern konfiguriert diesen Navigator, wenn es sich
um einen Bildschirm eines anderen Navigators handelt und hier der Bestellnavigator am Ende ein Bildschirm des Shop-Navigators
ist und dort können wir in diesen Navigationsoptionen einen Eintrag für das Schubladensymbol hinzufügen, der eine Funktion sein kann, die beispielsweise die Schubladenkonfiguration abruft. Diese Funktion
wird von React Navigation für Sie aufgerufen und gibt Ihnen diese Schubladenkonfiguration, die Sie
zum Beispiel am wichtigsten informiert Was ist Ihre Farbtonfarbe, denn hier können Sie jetzt eine Komponente zurückgeben,
wie eine Ionicons-Komponente, um ein Symbol zu rendern. Dazu müssen Sie nur sicherstellen, dass Sie Ionicons von
@ expo / vector-icons
importieren. Sie müssen diesen Import also in die Shop-Navigator-Datei einfügen.
Wenn wir hier unten sind, gebe ich meine zurück Ionicon, jetzt kann ich es so konfigurieren, wie ich es
immer
getan habe, und dafür können wir wieder die Plattform-API verwenden, die wir bereits hier importieren. Wenn
Sie dies nicht tun, stellen Sie sicher, dass Sie dies tun. Wir können das verwenden, um das Betriebssystem zu überprüfen. Wenn es
gleich Android ist, werde ich hier md create als Symbol
rendern, andernfalls iOS create und dies ist nur ein Symbol, das ich im Voraus ausgewählt habe.
Jetzt können wir natürlich auch die Größe hier konfigurieren und ich werde mich an meine gute alte 23 halten und zusätzlich eine
Farbe einstellen, wenn Sie möchten, und jetzt sollte dies natürlich keine primäre Farbe sein, da dann
dieses Symbol würde Haben Sie immer diese Farbe, stattdessen sollte diese Farbe von der Schublade zugewiesen werden. Dies
ist die Sache, die weiß, ob das Element ausgewählt ist oder nicht, und die die Farbe entsprechend ändert.
Hier sollten Sie also auf die Schubladenkonfiguration zugreifen. TintColor und dies sagt
Ihnen, welche Farbe dies im Moment haben sollte und diese Tönungsfarbe ändert sich abhängig davon, ob
dies aktuell ausgewählt ist oder nicht.
Nun, das ist bei meinen Bestellungen der Fall, entschuldigen
Sie, das
Symbol hier sollte die MD-Liste und die iOS-Liste sein, nicht erstellen. Das ist jetzt meine Bestellkonfiguration mit den Listensymbolen, und natürlich kann das
Gleiche hier getan werden, indem ich es in den Produktnavigator kopiere. Dort möchte ich md cart oder iOS cart verwenden,
also dieses Warenkorbsymbol wieder und jetzt ist es das fast gebrauchsfertig. Eine Sache, die Sie jedoch tun müssen, ist, dass
Sie React from React jetzt in diese Navigator-Datei importieren müssen, da
Sie jetzt Komponenten mit dieser jsx-Syntax verwenden. Wie Sie wissen, wird
jsx kompiliert oder in React konvertiert. createElement am Ende und daher müssen Sie React importieren, damit
diese Syntax hier funktioniert.
Wenn Sie jetzt zurückgehen, haben Sie diese schönen Symbole hier neben Ihren Artikeln und
sie sind auch
richtig gefärbt, natürlich auch hier auf Android.
Nun, da die Seitenschublade fertig ist, können wir auch zum Bestellbildschirm gehen und dort sogar eine
Bestellung sehen.
Im Moment wird der Warenkorb jedoch nicht gelöscht. Wenn Sie also mehrmals darauf klicken, erhalten Sie
tatsächlich eine Warnung, da Sie dann zu schnell darauf klicken und daher mehrere Bestellungen mit derselben pseudo-eindeutigen
ID erstellen, bei der wir uns befinden Verwenden Sie am Ende den aktuellen Zeitstempel. Wenn Sie mehrmals zu schnell darauf
klicken, handelt es sich um denselben
Zeitstempel. Aus diesem Grund wird diese Warnung angezeigt, und ich möchte den Warenkorb trotzdem nach einer Bestellung leeren.
Stellen wir also sicher, dass wir den Warenkorb nach der Bestellung leeren und dann natürlich sicherstellen, dass wir
die Bestellungen auf eine schönere Weise ausgeben als derzeit.