1 00:00:02,170 --> 00:00:04,210 Also arbeiten wir mit dem Stack-Navigator. 2 00:00:04,210 --> 00:00:06,080 Was ist nun mit der Auslosung? 3 00:00:06,100 --> 00:00:08,950 Die Logik ist genau die gleiche. 4 00:00:08,950 --> 00:00:18,780 Wir erstellen unser Shop Draw Navigator-Jahr, indem wir create draw navigator aufrufen und genau wie den Stack Navigator. 5 00:00:18,780 --> 00:00:21,470 Diese Funktion möchte kein Argument. 6 00:00:21,480 --> 00:00:28,980 Stattdessen richten wir unsere Zeichnungsnavigation in einem komponentenbasierten Ansatz ein, oder Dad erstellt hier einen Shop-Navigator, 7 00:00:28,980 --> 00:00:31,500 und dies ist eine Reaktionskomponente. 8 00:00:31,500 --> 00:00:33,850 Wieder könnten Sie das in einer separaten Datei haben. 9 00:00:33,870 --> 00:00:42,210 Ich werde alles in einer Datei aufbewahren, um es neben dem alten Code zu haben, und in ihrem 10 00:00:42,210 --> 00:00:44,160 Shop-Draw-Navigator-Punktnavigator kehren wir zurück. 11 00:00:44,160 --> 00:00:48,170 Gleiche Logik wie zuvor Es spielt keine Rolle, dass es ein Unentschieden ist. 12 00:00:48,210 --> 00:00:53,460 Und dort haben wir jetzt zwei verschiedene Bildschirme, die geladen werden können, wenn der Navigator und 13 00:00:53,460 --> 00:00:59,880 die Reaktionsnavigation automatisch sicherstellen, dass ein Navigator erstellt wird, den wir mit genau demselben Code öffnen können, den wir 14 00:00:59,880 --> 00:01:03,360 zuvor verwendet haben, ohne dass dies angepasst werden muss. 15 00:01:03,360 --> 00:01:10,920 Hier haben wir also unseren Shop Draw Navigator-Punktbildschirm und Gerechtigkeit, bevor wir diesem Bildschirm einen Namen geben. 16 00:01:10,920 --> 00:01:13,190 Hier haben wir zum Beispiel zwei Produkte. 17 00:01:13,440 --> 00:01:17,580 Dieser Name wird dann automatisch im Zeichnungsnavigator verwendet. 18 00:01:17,580 --> 00:01:24,110 Sie können dies aber auch überschreiben, wenn Sie möchten, und wir benötigen eine Komponente, die geladen wird, wenn wir 19 00:01:24,110 --> 00:01:26,450 im Navigator auf diesen Link klicken. 20 00:01:26,450 --> 00:01:29,270 Und hier ist das immer noch der Navigator des Produkts. 21 00:01:29,330 --> 00:01:36,660 Nach wie vor können wir unsere Stapelnavigatoren verwenden, obwohl sie jetzt diesen komponentenbasierten Ansatz als Komponenten 22 00:01:36,660 --> 00:01:43,770 verwenden, die in diesem Fall als Teil eines anderen Navigators als Teil des Zeichnungsnavigators erstellt 23 00:01:43,770 --> 00:01:44,920 werden sollten. 24 00:01:44,940 --> 00:01:51,380 Wir können hier immer noch auf unsere Stack-Navigatoren als Komponenten verweisen, da sie dieses Jahr Komponenten sind. 25 00:01:51,390 --> 00:01:55,710 Dies ist eine Komponente und das Gleiche gilt für alle unsere Navigatoren. 26 00:01:55,710 --> 00:02:02,130 Wir erstellen hier, dass sie alle Reaktionskomponenten sind, die ihre spezifischen Navigationslogik-Abfragekomponenten enthalten, und die 27 00:02:03,130 --> 00:02:09,670 Gesamtkomponenten wie der Produktnavigator hier können in einem Zeichnungsnavigator verwendet werden. Daher werde ich dies zweimal 28 00:02:09,670 --> 00:02:18,940 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, 29 00:02:19,450 --> 00:02:25,870 dass Ihre Namen keine Fehler enthalten, da wir sie in der gesamten App verwenden und 30 00:02:25,870 --> 00:02:28,820 diese Logik nicht angepasst werden muss. 31 00:02:28,840 --> 00:02:34,080 Wenn Sie also die Namen hier durcheinander bringen, funktionieren andere Teile der App nicht in Ordnung. 32 00:02:34,120 --> 00:02:39,710 Jetzt haben wir diesen Zeichnungsnavigator eingerichtet und was ist nun mit der Konfiguration? 33 00:02:39,730 --> 00:02:42,030 Nun gibt es zwei Dinge, die wir berücksichtigen müssen. 34 00:02:42,100 --> 00:02:46,560 Zum einen müssen wir hier den Zeichnungsinhalt konfigurieren. 35 00:02:46,570 --> 00:02:52,660 Und zweitens möchten wir unsere verschiedenen Bildschirme wie den Produktnavigator oder den Navigator der Bestellung so konfigurieren, dass 36 00:02:52,750 --> 00:02:55,510 Ihre eigenen Symbole in der Schublade angezeigt werden. 37 00:02:55,510 --> 00:02:57,100 Beginnen wir mit den Symbolen. 38 00:02:57,160 --> 00:03:02,230 Zuvor haben wir eingerichtet, dass ich direkt in der Konfiguration des Stack-Navigators, den wir 39 00:03:02,230 --> 00:03:06,930 jetzt in einer Zeichnung verwenden wollten, mit dem komponentenbasierten Ansatz arbeiten kann. 40 00:03:06,930 --> 00:03:08,420 Das machen wir nicht mehr. 41 00:03:08,430 --> 00:03:17,450 Stattdessen können wir diesen Teil hier einfach greifen. Wir sind tatsächlich das gesamte Objekt, das wir zuvor im Stapelnavigator 42 00:03:17,450 --> 00:03:21,440 eingerichtet haben, und gehen zu unserer Auslosung über. 43 00:03:21,510 --> 00:03:23,870 Und jetzt hier auf diesem Bildschirm, zu dem es gehört. 44 00:03:23,870 --> 00:03:26,180 In diesem Fall gehört es also zum Admin Navigator. 45 00:03:26,180 --> 00:03:34,630 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. 46 00:03:34,790 --> 00:03:42,230 Hier übergeben wir nun die Optionen für diesen Bildschirm und dies könnte eine normale Komponente sein oder wie es in 47 00:03:42,230 --> 00:03:48,760 diesem Fall eine Komponente mit unserer Stapelnavigationslogik und zwei Optionen ist, übergeben wir ein Objekt und dort können 48 00:03:48,770 --> 00:03:51,170 wir das zuvor verwendete Objekt wiederverwenden. 49 00:03:51,200 --> 00:03:56,060 Ein Objekt mit einem Unentschieden kann ich also eingeben, wo wir es im Auge haben, und so weiter. 50 00:03:56,060 --> 00:04:04,140 Dies alles wird also vor einer kleinen Anpassung gerecht, aber wir erhalten jetzt auch Requisiten, die durch die Reaktionsnavigation eingespeist 51 00:04:04,140 --> 00:04:12,660 werden, und diese Requisiten haben einen Farbschlüssel, anstatt die aktive Farbtönungsfarbe zu zeichnen, und die Farbe hat immer die richtige Farbe, 52 00:04:12,800 --> 00:04:18,470 da die Reaktionsnavigation hinter dem Szenen steuern, wo dies auf dem aktuell 53 00:04:18,480 --> 00:04:24,200 aktiven Bildschirm geschieht oder nicht, und passen die in dieser Farbrequisite gespeicherten Werte an. 54 00:04:24,240 --> 00:04:26,920 Ich habe bereits bereits bekannte hervorgehobene Farbe hervorgehoben. 55 00:04:27,000 --> 00:04:33,250 Das ist also eine winzige Anpassung, die wir hier gut vornehmen müssen, und damit können 56 00:04:33,250 --> 00:04:39,250 wir die Logik von den anderen Navigatoren kopieren, ebenso wie vom Navigator der Bestellung. 57 00:04:39,250 --> 00:04:48,100 Lassen Sie uns dieses Objekt hier greifen, das wir hatten, und seine Navigationsoptionen gehen bis zur Auslosung der Bestellungen Bildschirm Hinzufügen der 58 00:04:48,100 --> 00:04:57,170 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 59 00:04:57,380 --> 00:05:03,470 haben und nicht zuletzt machen wir das natürlich auch für den Produktbildschirm für den Produktnavigator. 60 00:05:03,470 --> 00:05:09,200 Hier haben wir dieses Objekt. Nehmen wir es und gehen wir zu 61 00:05:12,050 --> 00:05:18,440 unserem Zeichner, unserem Navigator. Hier ist unser Produktbildschirm, in dem der Optionsschlüssel hier eingerichtet ist. 62 00:05:18,570 --> 00:05:23,520 Hat es übergeben und angepasst, wie ich es gerade gezeigt habe. 63 00:05:23,520 --> 00:05:27,840 Jetzt haben wir hier unsere bildschirmspezifische Konfiguration. 64 00:05:27,840 --> 00:05:35,700 Sie könnten jetzt sagen, was ist mit der Auslosung insgesamt, weil zuvor in der App mit 65 00:05:35,740 --> 00:05:45,450 der alten Reaktionsnavigation, in der wir tatsächlich unsere Auslosung hatten und wir die aktive Farbtonfarbe und auch den Inhalt der 66 00:05:45,450 --> 00:05:46,640 Auslosung konfigurieren. 67 00:05:46,680 --> 00:05:50,160 Mit diesem neuen Ansatz können Sie das immer noch tun. 68 00:05:50,340 --> 00:05:58,640 Wir gehen zu unserem Zeichnungsnavigator, wo wir den Gesamtnavigator einrichten und ihn wie zuvor über Requisiten 69 00:05:58,640 --> 00:05:59,310 konfigurieren. 70 00:05:59,340 --> 00:06:06,030 Es dreht sich alles um Komponenten und Requisiten. Hier haben wir jetzt jedoch eine andere Benennung. 71 00:06:06,030 --> 00:06:09,960 Stattdessen haben wir keine Inhaltsoptionen und Inhaltskomponenten mehr. 72 00:06:10,020 --> 00:06:11,910 Und das finden Sie in den offiziellen Dokumenten. 73 00:06:11,970 --> 00:06:17,190 Wir haben jetzt Optionen zum Zeichnen und Zeichnen von Inhalten. 74 00:06:17,190 --> 00:06:20,540 Die Werte sind jedoch am Ende genau gleich. 75 00:06:20,700 --> 00:06:24,750 So können wir unser Inhaltsoptionsobjekt hier und 76 00:06:28,600 --> 00:06:37,820 in der Vergangenheit erfassen, um hier Inhaltsoptionen zu zeichnen, und dies kommentieren und weiterleiten, um einen Inhalt zu zeichnen. 77 00:06:37,900 --> 00:06:40,180 Es ist auch fast das gleiche. 78 00:06:40,180 --> 00:06:42,760 Wir wickeln diese Komponente hier 79 00:06:51,270 --> 00:06:52,880 bis hierher ein. 80 00:06:53,010 --> 00:06:53,970 Kopieren Sie 81 00:06:57,260 --> 00:07:03,070 dies und übergeben Sie es hier an den Zeichnungsinhalt und kommentieren Sie dies in. 82 00:07:03,080 --> 00:07:07,400 Allerdings sind jetzt zwei wichtige Dinge, die diesen Patch verwenden, hier nicht erlaubt. 83 00:07:07,400 --> 00:07:09,490 Sie sollten dies außerhalb von hier tun. 84 00:07:09,500 --> 00:07:15,980 So hier zum Beispiel im Shop-Navigator nickte verschachtelte Komponente. 85 00:07:15,980 --> 00:07:27,910 Außerdem werden keine Elemente mehr gezeichnet, sondern es wird eine Elementliste gezeichnet, die wir auch oben aus der 86 00:07:32,940 --> 00:07:35,730 Reaktivierungs-Schrägstrichzeichnung importieren müssen. 87 00:07:35,730 --> 00:07:37,890 Also importieren wir hier die Draw Item Liste 88 00:07:40,580 --> 00:07:41,030 damit. 89 00:07:41,030 --> 00:07:49,630 Wenn ich jedoch nach unten scrolle, sollte dies jetzt wieder funktionieren und dies sollte nun unsere Arbeitsauslosung sein, damit 90 00:07:49,630 --> 00:07:56,830 wir den Shop-Navigator haben. Wir haben alle diese Stack-Navigatoren. Was jetzt noch übrig ist, ist der 91 00:07:56,830 --> 00:08:05,440 Switch-Navigator, der im Grunde entweder unseren Startbildschirm oder Sie ausschaltet Bildschirm oder der Shop-Bildschirm oder machen Sie Ihre jeweiligen 92 00:08:05,440 --> 00:08:07,450 Navigationsstapel sollte ich sagen. 93 00:08:07,750 --> 00:08:09,940 Daran werden wir als nächstes arbeiten.