1 00:00:02,380 --> 00:00:07,300 Lassen Sie uns also daran arbeiten, unsere gesamte Logik hier im App-Navigator zu portieren. 2 00:00:07,300 --> 00:00:13,870 Wir haben hier mit diesem Dummy-Stack angefangen und das ist schön, aber letztendlich nicht das, was wir brauchen. 3 00:00:13,900 --> 00:00:19,390 Jetzt liegt es an Ihnen, wo Sie diese Konfiguration vornehmen, aber da wir dies zuvor in der 4 00:00:19,390 --> 00:00:20,560 Shop-Navigator-Datei getan haben. 5 00:00:20,560 --> 00:00:22,330 Ich werde es dort auch weiter machen. 6 00:00:22,360 --> 00:00:24,370 Auch mit dieser neuen Logik. 7 00:00:24,370 --> 00:00:26,560 Was ich also tun werde, ist ein App-Navigator. 8 00:00:26,560 --> 00:00:34,190 Ich werde meinen Stack hier tatsächlich loswerden und ich werde diesen Import loswerden und ich werde diesen hier loswerden. 9 00:00:34,190 --> 00:00:41,290 Ich werde den Navigationscontainer von obwohl verlassen und ich werde diesen Import zurücksetzen, obwohl sich dies letztendlich ändern 10 00:00:41,290 --> 00:00:42,760 wird ein bisschen. 11 00:00:42,760 --> 00:00:49,420 Aber jetzt gehen wir weiter zum Shop-Navigator. Zunächst können wir diesen Import aus der Reaktion löschen. Die Navigation wird 12 00:00:49,540 --> 00:00:50,990 ihn nicht benötigen. 13 00:00:51,100 --> 00:00:59,140 Lassen wir den Rest fürs Erste, aber anstelle dieses gelöschten Imports können wir aus dem React Navigation Stack 14 00:00:59,350 --> 00:01:08,870 importieren und alles ist bereits aus dem Draw und aus dem Ad Stack importieren wir den Create Stack Navigator aus dem Slash 15 00:01:08,870 --> 00:01:12,600 Draw, den wir importieren, erstellen den Draw Navigator. 16 00:01:12,760 --> 00:01:17,050 Jetzt können wir nach unten scrollen und die Standardnavigationsoptionen hier tatsächlich belassen. 17 00:01:17,080 --> 00:01:24,070 Zum Glück klingelt der Name und wie Sie die Dinge im Allgemeinen konfigurieren und was Sie konfigurieren 18 00:01:24,070 --> 00:01:30,490 können, hat sich nicht wirklich geändert, nur wie Sie die geänderte Konfiguration anwenden. Was also definitiv 19 00:01:30,880 --> 00:01:40,770 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 20 00:01:40,770 --> 00:01:47,940 zu haben Ich werde eine neue Konstante erstellen, die ich als Produktstapel-Navigator bezeichne, damit es nicht zu einem 21 00:01:48,420 --> 00:01:53,130 Namenskonflikt kommt und es wirklich offensichtlich ist, dass dies einen Stapel 22 00:01:53,130 --> 00:02:00,780 von Seiten enthält, von denen ein Stapel vorhanden ist Bildschirme und wir machen das mit Create Stack Navigator mit 23 00:02:00,780 --> 00:02:09,770 dieser Funktion, was ich Ihnen gezeigt habe, bevor diese Funktion keine Parameter mehr akzeptiert. Stattdessen werde ich hier eine neue Konstante erstellen. Products 24 00:02:09,890 --> 00:02:10,670 Navigator. 25 00:02:10,670 --> 00:02:14,750 Jetzt haben wir also einen Namenskonflikt, der aber trotzdem entfernt wird. 26 00:02:14,870 --> 00:02:20,420 Und dies ist jetzt eine Reaktionskomponente der Funktionskomponente, und wir könnten für alle in einer 27 00:02:20,420 --> 00:02:26,210 separaten Datei gespeicherten Komponenten nur für diesen Nebeneinander-Vergleich und weil wir alles in dieser Datei hatten, 28 00:02:26,420 --> 00:02:32,390 bevor ich jetzt alle diese Navigatorkomponenten mit unserer Navigation einrichten werde Die Konfiguration hier in dieser einzelnen 29 00:02:32,390 --> 00:02:36,480 Dateiaufteilung ist definitiv etwas, das Sie in Betracht ziehen könnten. 30 00:02:36,590 --> 00:02:44,450 Hier ist also unser Produktnavigator, und dort werde ich jetzt den Produktstapel-Navigator dot Navigator zurückgeben, 31 00:02:44,450 --> 00:02:52,910 wie Sie gelernt haben, und in ihrem Produktstapel-Navigator-Punktbildschirm hatten wir zuvor drei Bildschirme, sodass ich diesen 32 00:02:52,910 --> 00:02:54,860 zweimal replizieren werde. 33 00:02:54,860 --> 00:02:57,580 Wir hatten dort drei Bildschirme. 34 00:02:57,710 --> 00:03:03,730 Jetzt können wir sie konfigurieren. Lassen Sie uns dem ersten Bildschirm einen Namen zuweisen. Dies ist die Produktübersicht. 35 00:03:03,980 --> 00:03:09,180 Jetzt ist die Komponente, die dort geladen werden soll, unsere Produktübersicht-Bildschirmkomponente. 36 00:03:09,200 --> 00:03:19,130 Im Grunde genommen ist der Name, den wir jetzt auch für den zweiten Bildschirm abgebildet haben, Produktdetail. 37 00:03:19,130 --> 00:03:24,530 Also, was wir hier hatten und stellen Sie sicher, dass Sie diese Namen behalten, 38 00:03:24,530 --> 00:03:31,400 damit die gesamte Navigationslogik, die Sie in Ihrer App haben, nicht geändert werden muss, damit dies weiterhin funktioniert, und 39 00:03:31,670 --> 00:03:37,660 hier die Komponente, die geladen werden soll, wenn wir sie erreichen möchten Dieser Bildschirm ist die 40 00:03:37,660 --> 00:03:45,770 produktdetailierte Bildschirmkomponente, genau wie wir dort unten eine hatten. Lassen Sie uns das reformieren und für den letzten Bildschirm ist der Name Warenkorb. 41 00:03:45,860 --> 00:03:52,630 Was wir hier hatten und wir wollen einfach so zum Herzbildschirm gehen. 42 00:03:52,670 --> 00:03:57,920 Jetzt richten wir diesen Navigationsstapel mit dieser neuen komponentenbasierten Logik ein. 43 00:03:58,010 --> 00:04:03,620 Jetzt können wir in den App-Navigator importieren und für Dad 44 00:04:03,620 --> 00:04:11,510 müssen wir nur noch ein Export-Schlüsselwort davor hinzufügen, damit diese Konstante dieser Komponente hier 45 00:04:11,510 --> 00:04:21,980 in dieser Datei exportiert wird. Im App-Navigator importieren wir jetzt keinen Shop-Navigator, sondern importieren Den neu exportierten Produktnavigator importieren 46 00:04:22,310 --> 00:04:29,910 wir hier und in unserem Navigationscontainer können wir nun den Produktnavigator wie folgt hinzufügen 47 00:04:29,910 --> 00:04:33,720 und den Import des Produktübersichtsbildschirms loswerden. 48 00:04:33,840 --> 00:04:35,790 Nun zurück zum Shop-Navigator. 49 00:04:36,030 --> 00:04:38,840 Werfen wir einen Blick auf diese Optionen. 50 00:04:38,840 --> 00:04:42,360 Als nächstes die Navigationsoptionen, die wir hier auf diesem Stapel hatten. 51 00:04:42,360 --> 00:04:45,160 Was machen wir damit? 52 00:04:45,160 --> 00:04:52,600 Nun, wir haben tatsächlich zwei Optionen hier in unserem Produktnavigator auf dem alten Navigator mit der alten Logik. 53 00:04:53,230 --> 00:04:55,370 Eine ist das Tat-Symbol. 54 00:04:55,480 --> 00:05:02,800 Dieser Stapel sollte sich in der Schublade befinden, die wir später hinzufügen werden. Die zweite Option sind unsere Standardnavigationsoptionen, 55 00:05:03,010 --> 00:05:07,660 die auf alle Bildschirme angewendet werden sollten, die Teil dieses Navigators sind. 56 00:05:07,660 --> 00:05:12,250 Und tatsächlich gibt es dann auch einen dritten Ort, an dem wir Dinge in der Vergangenheit konfigurieren. 57 00:05:12,280 --> 00:05:14,150 Und das war auf einigen Bildschirmen. 58 00:05:14,320 --> 00:05:21,680 Werfen wir einen Blick auf unseren Produktübersichtsbildschirm, der sich dort im Shop-Ordner befindet, wenn wir nach unten scrollen. 59 00:05:21,760 --> 00:05:28,870 Wir hatten diese Eigenschaft für Navigationsoptionen, die wir dem Funktionsobjekt des Produktübersichtsbildschirms hinzugefügt haben, und das war eine Funktion, bei 60 00:05:28,870 --> 00:05:33,850 der wir Dinge wie den Headertitel konfigurieren, aber auch, was jetzt mit dieser neuen 61 00:05:33,850 --> 00:05:37,630 Logik auf der linken und rechten Seite des Headers steht. 62 00:05:37,670 --> 00:05:40,650 So machst du das nicht mehr. 63 00:05:40,650 --> 00:05:46,940 Stattdessen können wir das gesamte Setup hier kopieren. 64 00:05:47,170 --> 00:05:48,740 All das können wir also kopieren. 65 00:05:48,820 --> 00:05:54,680 Wir können es hier in der Bildschirmkomponente auskommentieren und zur App-Navigator-Komponente gehen. 66 00:05:54,820 --> 00:06:00,640 Entschuldigen Sie, dass ich die Navigator-Komponente einkaufe, in der wir unsere Stapelnavigation eingerichtet haben, und jetzt auf 67 00:06:00,640 --> 00:06:08,830 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. 68 00:06:08,830 --> 00:06:16,360 Sie können genau analysieren, was Sie zuvor in der Komponente hatten, so dass Ihre Funktionsübergabe eine richtige Funktion 69 00:06:16,440 --> 00:06:16,990 ist. 70 00:06:17,050 --> 00:06:18,640 Was den NAF-Datenparameter 71 00:06:21,330 --> 00:06:27,900 empfängt, der dann ein Konfigurationsobjekt zurückgibt, wird der konkrete Wert für diesen Parameter 72 00:06:27,900 --> 00:06:34,950 durch die Reaktionsnavigation eingegeben und die Konfigurationsnamen, die wir hier festlegen können, haben sich nicht 73 00:06:34,950 --> 00:06:35,540 geändert. 74 00:06:35,670 --> 00:06:38,550 So können wir immer noch einen Header-Titel vor oder nach links einrichten. 75 00:06:38,550 --> 00:06:41,330 Das alles ist also genau das gleiche, wie Sie gelernt haben. 76 00:06:41,340 --> 00:06:43,290 Es funktioniert genauso. 77 00:06:43,350 --> 00:06:47,760 Zum Glück konnten wir das jetzt hier machen und den Navigator einkaufen. 78 00:06:47,760 --> 00:06:55,200 Aber dies würde natürlich schnell sehr, sehr groß werden, wenn wir all die verschiedenen 79 00:06:55,440 --> 00:06:57,630 bildschirmspezifischen Konfigurationen hier hätten. 80 00:06:57,630 --> 00:07:00,390 Also ist es eigentlich nicht das, was ich hier machen werde. 81 00:07:00,450 --> 00:07:03,150 Stattdessen sehe ich zwei Möglichkeiten. 82 00:07:03,150 --> 00:07:10,170 Zum einen richten wir unser Setup außerhalb des Produktstapel-Navigatorbildschirms in der Bildschirmkomponente ein. 83 00:07:10,170 --> 00:07:14,250 Das zweite ist, dass wir nur unsere Optionen dort behalten und das ist der Ansatz, dem ich folgen werde. 84 00:07:14,730 --> 00:07:23,850 Zurück in der Produktübersicht werde ich dies wieder kommentieren, aber jetzt hier, wo wir nicht mehr festlegen, fungiert 85 00:07:23,900 --> 00:07:33,110 es als Wert für die Navigationsoptionen, sondern wir exportieren es einfach als Konstante, eine Konstante, die wir benennen 86 00:07:33,110 --> 00:07:42,360 müssen, und ich ' Ich benenne diese Bildschirmoptionen. Keine Bildschirmoptionen enthalten diese Funktion und wir exportieren sie nach 87 00:07:42,360 --> 00:07:43,670 ihrem Namen. 88 00:07:43,850 --> 00:07:49,360 Es kollidiert nicht mit dem Komponentenexport, da wir dies hier mit der Standardeinstellung tun. 89 00:07:49,390 --> 00:07:57,340 Jetzt exportieren wir also die Konfigurationsfunktion und dann den Shop-Navigator, den wir importieren können. Neben dem 90 00:07:57,340 --> 00:08:03,940 Importieren des Produktübersichtsbildschirms aus dieser Datei können wir dies jetzt auch mit einem 91 00:08:03,970 --> 00:08:12,940 benannten Import kombinieren, bei dem wir in die Bildschirmoptionsfunktion importieren und dann hier zwei Optionen aktivieren dieser Bildschirm. 92 00:08:13,020 --> 00:08:17,840 Ich übergebe nur einen Zeiger auf diese Funktion, führe sie nicht aus, sondern zeige nur darauf. 93 00:08:17,910 --> 00:08:24,580 Lassen Sie uns die für Sie ausgeführte Navigation so reagieren, dass 94 00:08:24,610 --> 00:08:32,780 sie einmal in den konkreten Wert für diese NAF-Datenparameterfunktion passt und dieser Bildschirm konfiguriert wird. 95 00:08:32,890 --> 00:08:36,490 Wenn wir diese Anzeigenkonflikte speichern, weil dieser Name dort unten kollidiert. 96 00:08:36,910 --> 00:08:41,470 Um dies zu beheben, stellen wir sicher, dass wir alle die anderen Optionen unterstützen. 97 00:08:41,470 --> 00:08:47,560 Jetzt werde ich mir die zeichnungsspezifische Option später ansehen, sobald wir eine Zeichnung für die 98 00:08:47,560 --> 00:08:48,850 Standardnavigationsoptionen hinzugefügt haben. 99 00:08:48,850 --> 00:08:54,220 Die gute Nachricht ist, dass wir immer noch diejenigen anwenden können, bei denen wir nicht alles auf Bildschirmebene einrichten müssen. 100 00:08:54,220 --> 00:08:58,980 Wenn wir eine gemeinsame Konfiguration haben, die alle Bildschirme eines Navigators betrifft. 101 00:08:59,080 --> 00:09:05,320 Und wie würden wir denken, können wir hier solche allgemeinen Optionen für all diese kostenlosen Bildschirme einrichten? 102 00:09:05,320 --> 00:09:09,200 Nun, wir haben sie dort direkt im Navigator eingerichtet. 103 00:09:09,310 --> 00:09:15,520 Wir haben auch eine kleine Eigenschaft für Bildschirmoptionen, also keine benannten Optionen, sondern Bildschirmoptionen. 104 00:09:15,610 --> 00:09:21,280 Dies sind jedoch die Optionen, die hier auf jeden Bildschirm angewendet werden, und bildschirmspezifische 105 00:09:21,310 --> 00:09:25,820 Optionen werden wie früher im Kurs mit diesen allgemeinen Optionen zusammengeführt. 106 00:09:25,830 --> 00:09:29,740 Jetzt übergeben wir hier unser Standardobjekt für Navigationsoptionen. 107 00:09:29,850 --> 00:09:36,360 Also dieses Objekt dort oben füttere ich es einfach als Wert für Bildschirmoptionen und das wars. 108 00:09:36,360 --> 00:09:41,280 Jetzt können wir hier als Produktnavigator auskommentieren und alles speichern. 109 00:09:41,360 --> 00:09:48,440 Sobald wir das tun, können wir das Ergebnis immer noch nicht sehen, da wir in dieser Shop-Navigator-Datei immer noch 110 00:09:48,440 --> 00:09:55,370 viel Code haben, der den alten Navigator oder diese alte Navigator-Logik verwendet und der hier ein Problem verursacht. 111 00:09:55,400 --> 00:10:03,090 Um immer noch ein Ergebnis zu sehen, werde ich dies alles nur vorübergehend auskommentieren und erneut 112 00:10:03,090 --> 00:10:03,710 speichern. 113 00:10:03,750 --> 00:10:08,660 Damit dies wieder aufgebaut wird und Sie sehen, erhalten wir jetzt einen Fehler. 114 00:10:08,720 --> 00:10:14,300 Nun, es gibt eine Sache, die wir tatsächlich anpassen müssen, und die Produktübersichtskomponente in unserer 115 00:10:14,300 --> 00:10:16,800 Bildschirmoption lenkt den Header nach links. 116 00:10:16,880 --> 00:10:25,060 Dies muss nun hier eine Funktion sein, die unser JSA X-Markierungs-Markup und dasselbe für das Header-Recht zurückgibt. 117 00:10:25,070 --> 00:10:30,260 Wir müssen also beide in Funktionen konvertieren, und Sie können dies einfach tun, indem Sie eine leere Parameterliste und dann 118 00:10:30,410 --> 00:10:31,580 den Pfeil hier hinzufügen. 119 00:10:31,670 --> 00:10:38,090 Nebenbei bemerkt, Sie könnten den Parameter hier akzeptieren, wenn Sie möchten, und das wären Requisiten, da 120 00:10:38,090 --> 00:10:43,910 dies nun tatsächlich ein Reaktionskomponentenvogel ist, der hier einen konkreten Wert für Requisiten findet, 121 00:10:43,910 --> 00:10:50,240 und durch Reaktionsnavigation und die Werte, die Sie von dort erhalten können gefunden in den offiziellen 122 00:10:50,240 --> 00:10:58,660 Dokumenten mit dieser Einstellung vorgenommen, wenn wir jetzt Sicherheit ist, startet es jetzt hier neu und wir sehen jetzt diesen Bildschirm wieder. 123 00:10:58,660 --> 00:11:01,830 Nehmen Sie jetzt definitiv unsere Konfiguration auf. 124 00:11:01,840 --> 00:11:09,360 Denken Sie daran, dass das Zeichnen nicht funktioniert, da wir noch kein Zeichnen und Navigieren hinzugefügt haben. 125 00:11:09,360 --> 00:11:17,140 Bei all dem haben wir gelernt, wie wir unsere Komponenten, unsere Bildschirme und den gesamten Stapelnavigator mit 126 00:11:17,140 --> 00:11:19,930 dieser neuen Logik konfigurieren können. 127 00:11:19,930 --> 00:11:26,020 Es ist Zeit, weiter zu portieren. Sie können die nächsten Schritte auf jeden Fall selbst ausführen und einen 128 00:11:26,020 --> 00:11:32,620 Port einrichten, um bestimmte Optionen für das Produktdetail und den Kartenbildschirm zu überprüfen. Danach fahren wir mit dem nächsten Stapel 129 00:11:32,620 --> 00:11:33,090 fort. 130 00:11:33,190 --> 00:11:35,230 Und dann natürlich auch bei der Auslosung klagen.