1 00:00:02,190 --> 00:00:05,630 Lassen Sie uns am Bestellbildschirm arbeiten, bevor wir die Navigation hinzufügen. Wir müssen sie 2 00:00:05,670 --> 00:00:07,920 nicht beenden, aber ich möchte sie anzeigen können. 3 00:00:08,700 --> 00:00:15,300 Also importiere ich dort React von React, damit ich eine gültige React-Komponente erstellen, wie immer etwas von React Native importieren 4 00:00:15,300 --> 00:00:20,060 kann und dass etwas auch das ist, woran wir ziemlich gewöhnt sind, oder? 5 00:00:20,060 --> 00:00:21,810 Es ist nie so überraschend. 6 00:00:21,840 --> 00:00:23,050 Wir 7 00:00:23,370 --> 00:00:32,880 brauchen eine Ansicht, wir brauchen wahrscheinlich eine flache Liste, weil wir möglicherweise mehrere Bestellungen haben, 8 00:00:32,880 --> 00:00:43,670 eine unendliche Menge, und ich möchte das rendern können, und damit können wir hier unseren Bestellbildschirm so erstellen. 9 00:00:43,790 --> 00:00:53,710 Ich werde das natürlich auch exportieren und das Styling sollte hier eigentlich nicht erforderlich sein, eigentlich sollten wir hier nicht einmal die Ansicht 10 00:00:53,770 --> 00:01:01,570 brauchen, weil ich nur meine Auftragsliste ausgeben möchte. Die Daten, die wir hier benötigen, stammen natürlich 11 00:01:01,720 --> 00:01:04,350 von Redux. Daher sollten wir 12 00:01:04,360 --> 00:01:10,600 den Use Selector von React Redux importieren, damit wir auf den Redux-Store zugreifen können. 13 00:01:11,350 --> 00:01:19,330 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 14 00:01:19,390 --> 00:01:25,740 hier in kombinierten Reduzierungsaufträgen hier zugewiesen habe. Dies gibt uns Zugriff auf den Statusordner, der 15 00:01:25,810 --> 00:01:29,680 vom Auftragsreduzierer verwaltet wird, und dort haben wir 16 00:01:29,680 --> 00:01:34,040 eine andere Auftragseigenschaft, die das tatsächliche Array von Aufträgen enthält. 17 00:01:34,060 --> 00:01:37,860 Also hier muss ich auf den Status zugreifen. Aufträge. Bestellungen am Ende, 18 00:01:37,870 --> 00:01:41,070 das gibt mir meine Bestellungen, die in Redux gespeichert sind. 19 00:01:41,110 --> 00:01:48,640 Hier müssen wir nur noch unsere flache Liste zurückgeben, und diese erhält Aufträge, die ein Array 20 00:01:48,640 --> 00:01:56,640 sein sollten und die als Daten dienen. Jetzt ist in neueren Versionen von React Native kein Schlüsselextraktor erforderlich, da jede Bestellung, 21 00:01:56,640 --> 00:02:01,520 wenn Sie sich das Modell ansehen, eine ID hat und neuere Versionen von React danach suchen 22 00:02:02,010 --> 00:02:09,780 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 23 00:02:09,780 --> 00:02:16,440 am Ende alles zurückgibt, was wir pro Bestellung rendern möchten. Jetzt wird ein Bestellartikel in Zukunft komplexer. Im Moment 24 00:02:16,440 --> 00:02:17,010 gebe 25 00:02:17,010 --> 00:02:21,990 ich nur noch einen Text aus, damit wir schnell etwas auf dem Bildschirm sehen 26 00:02:21,990 --> 00:02:23,670 können, bevor wir dies verfeinern. 27 00:02:24,000 --> 00:02:27,650 Der Text hier für den angegebenen Artikel könnte sein und jetzt 28 00:02:27,660 --> 00:02:32,590 schauen wir uns die Reihenfolge an. Dort haben wir die ID. Wir haben die Artikel, die 29 00:02:32,580 --> 00:02:32,990 eine 30 00:02:33,000 --> 00:02:40,150 weitere Liste darstellen. Die einfachste Ausgabe ist also einfach der Betrag. Hier gebe ich also nur den Gesamtbetrag 31 00:02:41,050 --> 00:02:44,380 aus, den meine Bestellung hier hat. 32 00:02:44,430 --> 00:02:46,050 Dies ist, was ich in 33 00:02:46,050 --> 00:02:48,360 der flachen Liste ausgebe, jetzt haben wir einen 34 00:02:48,360 --> 00:02:55,550 Grundbestellungsbildschirm, natürlich müssen wir jetzt in der Lage sein, das zu erreichen. Gehen wir also zum Shop-Navigator und importieren Sie 35 00:02:55,610 --> 00:03:04,740 den Bestellbildschirm hier, den Bestellbildschirm aus dem Bildschirmordner, aus dem Shop-Bestellbildschirm. Jetzt ist es wichtig, dass ich ihn nicht 36 00:03:05,180 --> 00:03:11,630 zu diesem Stapel-Navigator hinzufügen möchte, da er nicht Teil davon ist stapeln, stattdessen möchte 37 00:03:11,630 --> 00:03:12,590 ich 38 00:03:12,590 --> 00:03:16,490 es mit einem Menü erreichen, mit einem Seitenmenü. 39 00:03:16,730 --> 00:03:19,840 Also müssen wir einen Schubladen-Navigator bauen. 40 00:03:19,910 --> 00:03:24,430 Natürlich können Sie auch mit Registerkarten arbeiten, wenn Sie dies bevorzugen, aber ich möchte hier mit einer 41 00:03:24,500 --> 00:03:26,720 Schublade arbeiten, daher benötigen wir diesen Schubladen-Navigator. 42 00:03:26,750 --> 00:03:31,760 Jetzt sollte der Bestellbildschirm, obwohl er der einzige Artikel sein wird, in einem eigenen Stapel sein, 43 00:03:31,850 --> 00:03:34,490 damit wir dort auch einen Header haben. 44 00:03:34,490 --> 00:03:45,550 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 45 00:03:45,550 --> 00:03:53,740 Auftragsbildschirm zeigen. Das zweite Argument hier sollte noch einige Standardnavigationsoptionen einrichten und ich werde sie verwenden Die gleichen 46 00:03:53,740 --> 00:03:57,640 Optionen wie hier, daher werde ich dieses Objekt 47 00:03:57,970 --> 00:04:04,660 tatsächlich greifen, es hier ausschneiden und in einer separaten konstanten Standardnavigationsoption speichern. Dies ist 48 00:04:04,700 --> 00:04:07,170 ein Muster, das ich 49 00:04:08,550 --> 00:04:13,590 auch bereits im Navigationsmodul verwendet habe, weil Jetzt können wir diese 50 00:04:13,590 --> 00:04:19,830 Konstante hier im Produktnavigator für die Standardnavigationsoptionen und auch hier im Auftragsnavigator verwenden. 51 00:04:19,830 --> 00:04:26,760 Jetzt ist es natürlich das Ziel, einen Schubladen-Navigator zu erstellen, den ich insgesamt als Shop-Navigator bezeichnen 52 00:04:26,760 --> 00:04:29,160 werde, da er verschiedene Shop-Funktionen 53 00:04:29,160 --> 00:04:36,260 kombiniert, die Sie mithilfe des Schubladen-Navigators erstellen können. Dort möchte ich nun diese 54 00:04:36,270 --> 00:04:40,410 beiden Stapel, den Produktnavigator und den Auftragsnavigator, zusammenführen. 55 00:04:40,410 --> 00:04:48,300 Hier benötigen wir also die Produkte mit dem Produktnavigator und den Bestellungen, die auf 56 00:04:48,330 --> 00:04:56,160 den Auftragsnavigator zeigen, also auf diese Stapelnavigatoren. Ich möchte dort auch meine Inhaltsoptionen in der Schublade 57 00:04:56,160 --> 00:05:02,280 konfigurieren. Auf diese Weise kann ich beispielsweise die Farbtonfarbe der Elemente festlegen, wenn sie ausgewählt 58 00:05:02,280 --> 00:05:11,680 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. 59 00:05:11,710 --> 00:05:17,710 Jetzt sollte der Shop-Navigator hier zurückgegeben werden. Dies allein reicht nicht aus, aber es ist ein 60 00:05:17,710 --> 00:05:18,680 erster Schritt. 61 00:05:18,730 --> 00:05:25,870 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 62 00:05:25,900 --> 00:05:28,630 dies auf ein Objekt. Im Moment brauchen wir hier 63 00:05:28,630 --> 00:05:29,940 keine dynamischen Optionen, da 64 00:05:29,950 --> 00:05:35,680 ich nur den Header-Titel für Ihre Bestellungen festlegen möchte und jetzt, da ich daran denke, sollten wir 65 00:05:35,680 --> 00:05:36,290 dies 66 00:05:37,060 --> 00:05:38,620 auch auf dem Warenkorb-Bildschirm hinzufügen, 67 00:05:38,710 --> 00:05:42,670 wo ich dies noch nicht mache. Dort möchte ich 68 00:05:42,670 --> 00:05:48,520 dies auch auf dem Warenkorbbildschirm einstellen, dies auf Ihren Warenkorb einstellen. 69 00:05:48,520 --> 00:05:51,200 Dies ist nun in den Navigationsoptionen des 70 00:05:51,220 --> 00:05:57,270 Warenkorbbildschirms, im Bestellbildschirm oder in der Einrichtung dieses Navigators. Nachdem dies alles eingerichtet ist, müssen wir 71 00:05:57,280 --> 00:06:04,000 diese Menüschaltfläche hinzufügen, dieses Hamburger-Symbol zum Beispiel auf dem Produktübersichtsbildschirm, auf dem ich die Schublade öffnen 72 00:06:04,000 --> 00:06:09,220 und zu meinen Bestellungen gehen möchte. Um es dort hinzuzufügen, gehen wir 73 00:06:09,220 --> 00:06:13,780 zu den Navigationsoptionen des Produktübersichtsbildschirms, der bereits dynamisch ist, was 74 00:06:13,780 --> 00:06:14,550 gut 75 00:06:14,860 --> 00:06:21,070 ist. Fügen Sie dann neben dem Hinzufügen der Kopfzeile für dieses Warenkorbsymbol auch headerLeft 76 00:06:21,070 --> 00:06:29,100 hinzu, und headerLeft sollte natürlich auch die Kopfzeilenschaltflächen enthalten, aber dort , es werden meine Menüpunkte sein, also werde 77 00:06:29,220 --> 00:06:37,170 ich es so nennen und dort möchte ich je nach Plattform, auf der wir laufen, das md-Menü oder 78 00:06:37,170 --> 00:06:38,910 das ios-Menü verwenden und 79 00:06:38,920 --> 00:06:46,150 ich möchte natürlich nirgendwo navigieren, stattdessen mit der Navigation Stütze hier sozusagen, ich möchte Kippschublade nennen, die 80 00:06:46,160 --> 00:06:48,950 die Seitenschublade öffnet. Das gleiche 81 00:06:48,950 --> 00:06:54,920 Setup ist übrigens auch im Bestellbildschirm erforderlich, damit wir diesen Bildschirm verlassen können. 82 00:06:55,700 --> 00:07:01,820 Hier benötigen wir also die dynamische Einrichtung der Navigationsoptionen, in der wir hier 83 00:07:01,820 --> 00:07:09,020 eine Funktion haben, in der wir unser Konfigurationsobjekt zurückgeben, damit wir dort auch headerLeft mit den 84 00:07:09,020 --> 00:07:15,170 Header-Schaltflächen hinzufügen können, wobei unser Menü die Schublade umschaltet Das hängt von den 85 00:07:15,170 --> 00:07:22,910 Navigationsdaten hier ab und dafür müssen wir natürlich Header-Buttons, Header-Buttons und Artikel importieren. Auf dem Produktübersichtsbildschirm muss 86 00:07:22,910 --> 00:07:25,700 ich diese Dinge am Ende 87 00:07:25,700 --> 00:07:30,860 hier importieren. Diese beiden Zeilen müssen hinzugefügt werden auch zum Bestellbildschirm. 88 00:07:30,860 --> 00:07:32,700 Lassen Sie es 89 00:07:32,840 --> 00:07:39,020 mich also hinzufügen, indem Sie die Kopfzeilenschaltflächen und den Elementimport aus den React-Navigationskopfzeilenschaltflächen und 90 00:07:39,020 --> 00:07:45,300 den Kopfzeilenschaltflächenimport aus unserer benutzerdefinierten Komponente hinzufügen. Wenn wir dies speichern, sollten wir hier eine Menüschaltfläche 91 00:07:45,300 --> 00:07:52,410 haben, und wir öffnen die Schublade, wir können zu Bestellungen gehen und hier wird eine Fehlermeldung angezeigt, da ich auf dem 92 00:07:52,890 --> 00:07:55,560 Bestellbildschirm natürlich die Plattform verwende API, also 93 00:07:55,560 --> 00:07:58,400 sollten wir es dort importieren, lass uns das 94 00:07:58,400 --> 00:08:08,170 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. 95 00:08:10,060 --> 00:08:12,160 Damit haben wir die Schublade hinzugefügt. 96 00:08:12,160 --> 00:08:15,400 Es gibt eine Sache, die ich der Schublade hinzufügen möchte, 97 00:08:15,400 --> 00:08:21,940 die ich jedoch noch nicht getan habe, bevor ich weiter an meiner Bestellliste arbeite. Wir geben noch nichts aus, weil 98 00:08:22,240 --> 00:08:28,570 wir keine Bestellungen hinzufügen, wir haben dies nicht verbunden Klicken Sie auf die Schaltfläche "Jetzt bestellen". Wir sehen jedoch 99 00:08:28,570 --> 00:08:33,180 nichts, was sich ändert, wenn wir etwas in den Warenkorb legen. Klicken Sie auf 100 00:08:33,280 --> 00:08:37,810 "Jetzt bestellen". Wenn Sie mehrmals darauf klicken, wird sofort ein Fehler angezeigt. Dann wird 101 00:08:37,860 --> 00:08:41,140 diese Reihenfolge hier angezeigt. Jetzt müssen wir den Einkaufswagen 102 00:08:41,140 --> 00:08:45,940 räumen, das ist eine andere Sache, die wir tun müssen, aber bevor wir das tun, möchte ich in 103 00:08:46,030 --> 00:08:51,340 der Schublade auch Symbole neben meinen Einträgen hier haben, und das Hinzufügen dieser Symbole ist eigentlich sehr einfach, Port ' 104 00:08:51,340 --> 00:08:57,640 Dies wurde im Navigationsmodul nicht getan, aber wir werden es jetzt tun. Um Symbole hinzuzufügen, müssen Sie nur zu den Bildschirmen 105 00:08:57,640 --> 00:08:59,920 gehen, zu denen Sie in Ihrer 106 00:08:59,920 --> 00:09:04,990 Schublade navigieren. In unserem Fall sind dies natürlich diese beiden Navigatoren. Dies sind also keine 107 00:09:05,440 --> 00:09:11,200 Bildschirme, sondern diese beiden Navigatoren und auf diesen Navigatoren oder wenn es sich um Bildschirme handelt Auf 108 00:09:11,200 --> 00:09:17,230 diesen Bildschirmen können Sie Navigationsoptionen festlegen. Damit meine ich nicht die Standardnavigationsoptionen, die Sie für alle Bildschirme dieses 109 00:09:17,230 --> 00:09:23,080 Navigators festgelegt haben, sondern für diesen Navigator, wenn er wie hier in einem anderen Navigator verwendet wird. 110 00:09:23,080 --> 00:09:25,020 Wir können hier also 111 00:09:25,030 --> 00:09:29,320 Navigationsoptionen hinzufügen. Dies wird wiederum nicht auf die Bildschirme dieses Navigators 112 00:09:29,320 --> 00:09:32,550 angewendet, sondern konfiguriert diesen Navigator, wenn es sich 113 00:09:32,740 --> 00:09:39,700 um einen Bildschirm eines anderen Navigators handelt und hier der Bestellnavigator am Ende ein Bildschirm des Shop-Navigators 114 00:09:39,700 --> 00:09:50,140 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 115 00:09:51,150 --> 00:09:56,890 wird von React Navigation für Sie aufgerufen und gibt Ihnen diese Schubladenkonfiguration, die Sie 116 00:09:56,890 --> 00:10:03,870 zum Beispiel am wichtigsten informiert Was ist Ihre Farbtonfarbe, denn hier können Sie jetzt eine Komponente zurückgeben, 117 00:10:03,880 --> 00:10:10,630 wie eine Ionicons-Komponente, um ein Symbol zu rendern. Dazu müssen Sie nur sicherstellen, dass Sie Ionicons von 118 00:10:11,200 --> 00:10:12,780 @ expo / vector-icons 119 00:10:12,790 --> 00:10:16,650 importieren. Sie müssen diesen Import also in die Shop-Navigator-Datei einfügen. 120 00:10:16,780 --> 00:10:23,770 Wenn wir hier unten sind, gebe ich meine zurück Ionicon, jetzt kann ich es so konfigurieren, wie ich es 121 00:10:23,770 --> 00:10:24,640 immer 122 00:10:24,850 --> 00:10:30,720 getan habe, und dafür können wir wieder die Plattform-API verwenden, die wir bereits hier importieren. Wenn 123 00:10:30,730 --> 00:10:39,340 Sie dies nicht tun, stellen Sie sicher, dass Sie dies tun. Wir können das verwenden, um das Betriebssystem zu überprüfen. Wenn es 124 00:10:39,790 --> 00:10:43,820 gleich Android ist, werde ich hier md create als Symbol 125 00:10:43,820 --> 00:10:49,820 rendern, andernfalls iOS create und dies ist nur ein Symbol, das ich im Voraus ausgewählt habe. 126 00:10:49,850 --> 00:10:56,640 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 127 00:10:56,760 --> 00:11:02,130 Farbe einstellen, wenn Sie möchten, und jetzt sollte dies natürlich keine primäre Farbe sein, da dann 128 00:11:02,190 --> 00:11:07,620 dieses Symbol würde Haben Sie immer diese Farbe, stattdessen sollte diese Farbe von der Schublade zugewiesen werden. Dies 129 00:11:07,710 --> 00:11:13,310 ist die Sache, die weiß, ob das Element ausgewählt ist oder nicht, und die die Farbe entsprechend ändert. 130 00:11:13,380 --> 00:11:16,570 Hier sollten Sie also auf die Schubladenkonfiguration zugreifen. TintColor und dies sagt 131 00:11:16,680 --> 00:11:22,110 Ihnen, welche Farbe dies im Moment haben sollte und diese Tönungsfarbe ändert sich abhängig davon, ob 132 00:11:22,110 --> 00:11:24,330 dies aktuell ausgewählt ist oder nicht. 133 00:11:25,370 --> 00:11:29,350 Nun, das ist bei meinen Bestellungen der Fall, entschuldigen 134 00:11:29,540 --> 00:11:30,470 Sie, das 135 00:11:30,580 --> 00:11:39,080 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 136 00:11:39,440 --> 00:11:46,130 Gleiche hier getan werden, indem ich es in den Produktnavigator kopiere. Dort möchte ich md cart oder iOS cart verwenden, 137 00:11:46,130 --> 00:11:54,490 also dieses Warenkorbsymbol wieder und jetzt ist es das fast gebrauchsfertig. Eine Sache, die Sie jedoch tun müssen, ist, dass 138 00:11:54,490 --> 00:11:59,500 Sie React from React jetzt in diese Navigator-Datei importieren müssen, da 139 00:11:59,500 --> 00:12:06,610 Sie jetzt Komponenten mit dieser jsx-Syntax verwenden. Wie Sie wissen, wird 140 00:12:06,610 --> 00:12:14,260 jsx kompiliert oder in React konvertiert. createElement am Ende und daher müssen Sie React importieren, damit 141 00:12:14,260 --> 00:12:16,190 diese Syntax hier funktioniert. 142 00:12:16,510 --> 00:12:21,850 Wenn Sie jetzt zurückgehen, haben Sie diese schönen Symbole hier neben Ihren Artikeln und 143 00:12:21,850 --> 00:12:23,230 sie sind auch 144 00:12:23,230 --> 00:12:26,020 richtig gefärbt, natürlich auch hier auf Android. 145 00:12:26,020 --> 00:12:32,110 Nun, da die Seitenschublade fertig ist, können wir auch zum Bestellbildschirm gehen und dort sogar eine 146 00:12:32,110 --> 00:12:32,920 Bestellung sehen. 147 00:12:32,920 --> 00:12:37,450 Im Moment wird der Warenkorb jedoch nicht gelöscht. Wenn Sie also mehrmals darauf klicken, erhalten Sie 148 00:12:37,450 --> 00:12:42,520 tatsächlich eine Warnung, da Sie dann zu schnell darauf klicken und daher mehrere Bestellungen mit derselben pseudo-eindeutigen 149 00:12:42,790 --> 00:12:48,700 ID erstellen, bei der wir uns befinden Verwenden Sie am Ende den aktuellen Zeitstempel. Wenn Sie mehrmals zu schnell darauf 150 00:12:48,700 --> 00:12:50,770 klicken, handelt es sich um denselben 151 00:12:50,860 --> 00:12:56,110 Zeitstempel. Aus diesem Grund wird diese Warnung angezeigt, und ich möchte den Warenkorb trotzdem nach einer Bestellung leeren. 152 00:12:56,860 --> 00:13:02,050 Stellen wir also sicher, dass wir den Warenkorb nach der Bestellung leeren und dann natürlich sicherstellen, dass wir 153 00:13:02,110 --> 00:13:04,930 die Bestellungen auf eine schönere Weise ausgeben als derzeit.