1 00:00:02,410 --> 00:00:05,910 Die meisten unserer Dateien müssen nicht geändert werden. 2 00:00:06,040 --> 00:00:12,220 Was wir jedoch ändern müssen, ist, was in den Navigationsdateien und im Navigationsordner 3 00:00:13,000 --> 00:00:19,540 in App J passiert. S. Vielleicht erinnern Sie sich daran, den 4 00:00:19,570 --> 00:00:25,510 Navigationscontainer hier gerendert zu haben, und der Navigationscontainer ist hier nur eine benutzerdefinierte Komponente, in der wir letztendlich 5 00:00:25,580 --> 00:00:31,330 unsere Logik haben, um zu überprüfen, ob der Benutzer authentifiziert ist, und dann einen Shop-Navigator zu rendern, der 6 00:00:31,330 --> 00:00:36,550 unser hier erstellter Routennavigator mit Reaktionsnavigation ist und hier müssen sich die Dinge jetzt ändern. 7 00:00:36,550 --> 00:00:39,410 Beginnen wir nun mit dem Navigationscontainer. 8 00:00:39,430 --> 00:00:45,640 Wir brauchen diesen Code hier nicht mehr, wo wir manuell woanders navigieren, wenn der Benutzer authentifiziert ist, 9 00:00:46,150 --> 00:00:52,090 da Sie später sehen werden, dass dies bei dieser komponentenbasierten Konfiguration jetzt anders gehandhabt wird, sodass 10 00:00:52,780 --> 00:00:55,040 Sie die Tatsache hier löschen können. 11 00:00:55,150 --> 00:01:02,920 Keep ist hier ausgeschaltet, obwohl Sie den Verweis hier jedoch löschen und auch dort löschen können. Wenn es um die Importe 12 00:01:02,920 --> 00:01:09,620 hier geht, brauchen wir hier keine zwei Hooks mehr und wir alle brauchen diesen Import nicht mehr. 13 00:01:09,760 --> 00:01:17,020 Wir haben also nur noch den Shop-Navigator übrig und das brauchen wir hier auch nicht mehr wirklich. 14 00:01:17,110 --> 00:01:24,040 Wir fügen keinen Shop-Navigator als solche Komponente hinzu, in der wir uns dann auf 15 00:01:24,040 --> 00:01:30,760 die Gesamtkonfiguration aus der Shop-Navigator-Datei beziehen, da diese Gesamtkonfiguration natürlich alle mit der 16 00:01:30,760 --> 00:01:38,080 alten Logik eingerichtet ist, diese globale registrierungsähnliche Konfiguration einfach zu haben funktioniert nicht mehr mit 17 00:01:38,080 --> 00:01:39,140 reaktionsnavigation 5. 18 00:01:39,790 --> 00:01:46,990 Stattdessen müssen wir jetzt all das auf den neuen Ansatz für diesen komponentenbasierten Ansatz migrieren und 19 00:01:46,990 --> 00:01:47,950 dies tun. 20 00:01:48,130 --> 00:01:51,980 Ich möchte ganz einfach im Navigationscontainer anfangen. 21 00:01:52,090 --> 00:01:57,970 Ich werde einen neuen Stack-Navigator einrichten, der vorerst nur ein Dummy-Navigator ist. 22 00:01:57,970 --> 00:02:04,240 Haben Sie also gesehen, wie es im Allgemeinen funktioniert, bevor wir dies später tatsächlich gut 23 00:02:04,240 --> 00:02:07,270 auf unsere eigentliche Anwendung anwenden werden? 24 00:02:07,410 --> 00:02:10,000 Fügen wir hier den Import von at react hinzu. 25 00:02:10,020 --> 00:02:13,020 Navigation Schrägstrich native. 26 00:02:13,020 --> 00:02:19,070 Und von dort müssen wir die Navigation in den Navigationscontainer importieren. 27 00:02:19,080 --> 00:02:24,460 Das kann verwirrend sein, da unsere eigene Komponente hier der gesamte benannte Navigationscontainer ist. 28 00:02:24,600 --> 00:02:31,890 Um Verwirrung hier zu vermeiden, werde ich unsere eigene Komponente hier in App Navigator umbenennen oder wie auch immer Sie 29 00:02:31,890 --> 00:02:37,260 sie benennen möchten, also werde ich sie hier umbenennen und alles, um Verwirrung zu vermeiden, 30 00:02:37,920 --> 00:02:45,330 obwohl dies in der App-Komponente in App technisch nicht erforderlich ist. Ja, das werde ich Als App-Navigator importiert Ich benenne 31 00:02:45,420 --> 00:02:53,220 die Datei in App-Navigator um und importiere sie hier in der App-Komponente aus dem App-Navigator. Passen Sie daher den Importpfad an, 32 00:02:53,460 --> 00:02:55,680 um diesen neuen Dateinamen einzuschließen. 33 00:02:55,680 --> 00:02:59,030 Und dann hier rendere ich App Navigator. 34 00:02:59,070 --> 00:03:02,430 Jetzt habe ich nur diese Namensänderungen vorgenommen, um Verwirrung zu vermeiden. 35 00:03:02,490 --> 00:03:09,300 Der wichtigere Teil findet in diesem App Navigator statt, der zuvor unser Navigationscontainer war. 36 00:03:09,300 --> 00:03:12,120 Jetzt importieren wir den Navigationscontainer aus React Native. 37 00:03:12,120 --> 00:03:15,450 Aber Papa wird eine andere Komponente sein als das, was wir in der Vergangenheit gebaut haben. 38 00:03:15,480 --> 00:03:21,690 Es hat nur den gleichen Namen, weshalb ich es wichtiger umbenannt habe als diesen Navigationscontainer. 39 00:03:21,690 --> 00:03:26,910 Im Moment importieren wir stattdessen etwas aus dem Slash-Stack für die Anzeigenreaktionsnavigation. 40 00:03:27,120 --> 00:03:31,500 Und dies ist jetzt ein Paket, das es nicht gibt und das wir noch nicht installiert haben. 41 00:03:32,280 --> 00:03:34,440 Stoppen wir diesen Prozess also erneut. 42 00:03:34,500 --> 00:03:43,020 Und mit npm install dash dash safe installieren wir am React Navigation Slash Stack, damit NPM Ashutosh Safe 43 00:03:43,020 --> 00:03:46,010 am React Navigation Slash Stack installiert. 44 00:03:46,170 --> 00:03:51,840 Dadurch wird die Stack-Navigationslogik in den USA installiert, 45 00:03:51,840 --> 00:03:58,380 und wir können alle bereits eine Reihe von Paketen installieren, da 46 00:03:58,380 --> 00:04:06,760 wir sie später benötigen D zu Installationsbefehlen zu beenden und danach mit Motorstart können 47 00:04:06,930 --> 00:04:14,190 wir diesen Expo-Server wieder aufrufen, also haben wir jetzt Vietnamization Stack installiert. 48 00:04:14,190 --> 00:04:19,500 Wir können etwas daraus importieren und das ist etwas wie D create stack navigator. 49 00:04:19,650 --> 00:04:26,490 Jetzt erstellen Stack Navigator ist eine Funktion, die wir bereits im Shop Navigator kennen und die immer noch die 50 00:04:26,490 --> 00:04:33,210 alte Reaktionsnavigation verwendet, bei der wir auch importieren, um einen Stack Navigator aus der Reaktionsnavigation zu erstellen, oder wenn 51 00:04:33,210 --> 00:04:36,990 Sie für dieses Paket aus einem separaten Paket gearbeitet haben. 52 00:04:37,200 --> 00:04:43,770 Wir hatten dort aber auch den Stack-Navigator erstellt und den Draw-Navigator am Ende erstellt. 53 00:04:43,880 --> 00:04:53,870 Jetzt haben wir den Stack-Navigator erstellt, um unser Konfigurations-Setup für unsere Navigationsregistrierung für diesen Teil unserer Anwendung zu erstellen. Sie können dies für die Produktübersicht 54 00:04:53,990 --> 00:04:58,760 über die Produktdetails und den Kartenbildschirm sagen, die wir zu einem 55 00:04:58,760 --> 00:05:05,000 Stack zusammengestellt haben, und dann hatten wir mehrere solcher Stacks um sie zu komponieren, um 56 00:05:05,000 --> 00:05:12,070 sie in unserem Draw Navigator zu sammeln, den wir schließlich mit dem Off-Screen im Switch Navigator kombiniert haben. 57 00:05:12,090 --> 00:05:16,710 Zurück zu unserem App-Navigator: Was machen wir hier mit dem Erstellen des Stack-Navigators? 58 00:05:16,740 --> 00:05:18,560 Es funktioniert jetzt anders. 59 00:05:18,870 --> 00:05:25,260 Jetzt verwenden wir es, um eine neue Komponente damit zu erstellen, und ich werde es meinen Stapel nennen. 60 00:05:25,260 --> 00:05:31,440 Der Name liegt ganz bei Ihnen, aber Sie rufen einfach an und erstellen einen Stack-Navigator wie diesen, und Sie sind fertig. 61 00:05:31,440 --> 00:05:33,810 Und das ist jetzt eine große Veränderung. 62 00:05:33,960 --> 00:05:39,120 Sie übergeben jetzt kein Objekt, um einen Stapelnavigator zum Konfigurieren zu erstellen. 63 00:05:39,170 --> 00:05:42,900 Stattdessen ist es eine Funktion, die kein Objekt will. 64 00:05:42,900 --> 00:05:48,490 Es ist eine Funktion, die kein Objekt benötigt. Was macht sie dann? 65 00:05:48,490 --> 00:05:57,720 Was ist mein Stack? Mein Stack ist jetzt eine Reaktionskomponente und wir verwenden sie als solche hier im App-Navigator, um genau zu 66 00:05:57,720 --> 00:05:58,490 sein. 67 00:05:58,500 --> 00:06:04,890 Wir müssen die gesamte Navigationslogik mit der Navigationscontainerkomponente umschließen, die wir aus React 68 00:06:04,890 --> 00:06:06,800 Navigation Native importieren. 69 00:06:06,870 --> 00:06:14,730 Sie können sich diese Navigationscontainerkomponente im Grunde genommen als die Komponentenversion des App-Containers vorstellen, die wir im 70 00:06:15,270 --> 00:06:19,080 alten Setup mit create app container erstellt haben. 71 00:06:19,080 --> 00:06:24,830 Genau dort mussten wir unseren fertigen Navigator mit einem App-Container erstellen. 72 00:06:24,840 --> 00:06:31,680 Jetzt müssen wir unser komponentenbasiertes Navigations-Setup mit einem Navigationscontainer umschließen. 73 00:06:32,310 --> 00:06:39,800 Hier richten wir nun unsere Logik ein, wenn es darum geht, welche Seiten wir laden möchten. 74 00:06:39,870 --> 00:06:45,640 Und hier verwenden wir jetzt meinen Stack als Reaktionskomponente, aber nicht so. 75 00:06:45,690 --> 00:06:50,050 Stattdessen benötigen wir hier die DOT-Navigator-Komponente. 76 00:06:50,130 --> 00:06:58,620 Mein Stapel ist also eigentlich ein Objekt mit einer Navigator-Eigenschaft, und die in dieser Eigenschaft 77 00:06:58,620 --> 00:07:02,520 gespeicherten Werte sind jetzt eine Komponente. 78 00:07:02,530 --> 00:07:08,110 Jetzt können wir diese Komponente erstellen und zwischen der Eröffnungs- und Abschlusssteuer dieser 79 00:07:08,110 --> 00:07:13,550 Komponente die verschiedenen Bildschirme platzieren, die Teil dieses Stapels sein sollen. 80 00:07:13,570 --> 00:07:20,800 Was wir zuvor hier im Shop-Navigator in diesem Objekt hatten, haben wir übergeben, um den Stack-Navigator für diese 81 00:07:21,070 --> 00:07:24,790 Karte der Bildschirmkomponenten und ihrer Namen zu erstellen. 82 00:07:24,850 --> 00:07:30,140 Das ist es, was wir jetzt hier zwischen diesem öffnenden und schließenden Tag einrichten. 83 00:07:30,190 --> 00:07:36,900 Sie könnten daher denken, dass wir die Produktübersicht-Bildschirmkomponente rechts hinzufügen. 84 00:07:36,910 --> 00:07:41,680 Dies ist eine unserer Komponenten. Wir würden einen Import hinzufügen, den wir hier nicht durchgeführt haben, da dies 85 00:07:41,980 --> 00:07:45,440 falsch ist, aber Sie könnten denken, dass wir dies fast gut machen. 86 00:07:45,790 --> 00:07:51,430 Dies wäre sicherlich der Bildschirm, den wir als Teil dieses Navigators haben möchten, aber er hätte 87 00:07:51,430 --> 00:07:52,410 keinen Namen. 88 00:07:52,450 --> 00:07:58,210 Jetzt brauchen wir einen Namen, damit wir zum Beispiel dorthin navigieren können, damit wir irgendwo in unserer Anwendung eine 89 00:07:58,210 --> 00:07:59,350 Navigation auslösen können. 90 00:07:59,350 --> 00:08:03,570 Deshalb haben wir auch hier einen Namen für das alte Setup. 91 00:08:03,700 --> 00:08:05,530 Also machen wir stattdessen etwas anderes. 92 00:08:05,530 --> 00:08:13,090 Wir verwenden meinen Stapel dieses Objekt wieder dort oben und jetzt eine zweite Eigenschaft, die die Bildschirm-Eigenschaft hat, 93 00:08:13,570 --> 00:08:19,930 genau wie die Navigator-Eigenschaft. Die Bildschirm-Eigenschaft enthält auch eine Reaktionskomponente und daher können wir sie 94 00:08:19,930 --> 00:08:21,160 so rendern. 95 00:08:21,160 --> 00:08:27,820 Dies ist jetzt eine Komponente, mit der wir einen Bildschirm definieren können, der Teil dieses Stack-Navigators sein soll, 96 00:08:27,820 --> 00:08:35,620 und den wir jetzt mithilfe von Requisiten konfigurieren, da wir hier mit einer Komponente arbeiten, sodass die Konfiguration mit Requisiten genauso 97 00:08:35,620 --> 00:08:42,430 funktioniert wie immer Wenn wir mit Komponenten arbeiten, um diesem Bildschirm einen Namen zu geben, fügen wir eine Namensstütze 98 00:08:42,460 --> 00:08:50,350 hinzu. Jetzt können wir diesen Namen verwenden, den wir hier verwenden. Produktübersicht, damit wir diesen Namen hinzufügen und der Reaktionsnavigation mitteilen können, 99 00:08:50,860 --> 00:08:57,370 welche Komponente geladen werden soll, wenn wir auf diesen Namen abzielen Wenn wir dies beispielsweise mit einer 100 00:08:57,370 --> 00:09:04,690 Einwanderungsaktion tun, fügen wir eine zweite Requisite hinzu, die die Komponenten-Requisite enthält. Diese sollte einen Zeiger auf die Komponente enthalten, 101 00:09:05,050 --> 00:09:10,770 die wir laden möchten, wenn wir zu diesem Bildschirm mit diesem Namen wechseln möchten. 102 00:09:10,900 --> 00:09:22,080 Dazu importiere ich hier den Produktübersichtsbildschirm aus unserem Bildschirmordner in den Shop-Unterordner und dann in 103 00:09:22,080 --> 00:09:23,750 den Produktübersichtsbildschirm. 104 00:09:23,940 --> 00:09:27,910 Also jetzt brauchen wir es und ich habe bestanden ist hier. 105 00:09:28,020 --> 00:09:30,780 Wichtig ist, dass wir die Komponente hier nicht erstellen. 106 00:09:30,810 --> 00:09:36,960 Wir zeigen nur darauf, wir verwenden nur den Namen, der aus dieser Datei exportiert wird. 107 00:09:36,960 --> 00:09:42,750 Und damit haben wir jetzt unseren ersten kleinen Stapel hier aufgebaut. 108 00:09:42,780 --> 00:09:46,240 Lassen Sie uns nun diesen Import aus dem Shop-Navigator auskommentieren. 109 00:09:46,260 --> 00:09:48,360 Wir brauchen es im Moment nicht mehr. 110 00:09:48,360 --> 00:09:52,670 Lassen Sie uns alles speichern und seine auf Android starten, sagen wir. 111 00:09:52,830 --> 00:09:58,250 Und wenn Sie dies tun, wird das Javascript-Bundle erstellt und auf dem Android-Gerät geöffnet. 112 00:09:58,260 --> 00:10:01,470 Und was Sie sehen werden, ist unser Produktübersichtsbildschirm. 113 00:10:01,470 --> 00:10:02,790 Natürlich sieht es ein bisschen anders aus. 114 00:10:02,790 --> 00:10:04,770 Natürlich fehlen die Header-Buttons. 115 00:10:04,800 --> 00:10:07,330 Es fehlt die gesamte Header-Konfiguration. 116 00:10:07,350 --> 00:10:13,740 Der Titel ist alles falsch, aber das macht Sinn, weil wir jetzt nicht den alten Navigator verwenden, in 117 00:10:13,740 --> 00:10:21,500 dem wir all diese Konfiguration hatten, sondern den neuen, und dies ist nur ein Beweis dafür, dass es funktioniert und wie es funktioniert. 118 00:10:21,600 --> 00:10:30,240 Lassen Sie uns nun mit diesem Wissen dieses winzige Beispiel hier belassen und unsere gesamte hier eingerichtete Navigation 119 00:10:30,240 --> 00:10:32,910 auf diese neue Logik portieren.