1 00:00:02,580 --> 00:00:09,690 Wir haben also einige Zeit damit verbracht, dies zu migrieren, um jetzt auf Navigation fünf zu reagieren, und vielleicht sieht es im Moment 2 00:00:09,780 --> 00:00:10,920 etwas überwältigend aus. 3 00:00:10,920 --> 00:00:18,510 Lassen Sie mich also die wichtigsten Änderungen zusammenfassen, die wir hier vorgenommen haben, und die wichtigsten Änderungen. Die 4 00:00:18,510 --> 00:00:25,920 wichtigsten Unterschiede reagieren auf die Navigation. Die größte Änderung besteht darin, wie wir unsere Bildschirmkonfiguration einrichten, anstatt diesen 5 00:00:25,920 --> 00:00:33,210 registrierungsähnlichen Ansatz zu verwenden. Wir verwenden jetzt Komponenten, um unsere Konfiguration einzurichten Das Muster hier ist eigentlich 6 00:00:33,210 --> 00:00:34,550 ganz einfach. 7 00:00:34,650 --> 00:00:40,740 Sie erstellen immer einen Navigator, der ein Stack-Navigator, ein Draw-Navigator oder auch ein Tap-Navigator 8 00:00:41,340 --> 00:00:49,710 sein kann, und verwenden dann diesen Navigator, um Navigator hier als Routenkomponente für diese Gruppe von Bildschirmen zu verwenden, 9 00:00:49,710 --> 00:00:52,080 die zu diesem Navigator gehören. 10 00:00:52,080 --> 00:00:57,660 Die Bildschirme sind die verschachtelten Komponenten, und dort geben Sie einen Namen und eine Komponente an, die für diesen 11 00:00:57,660 --> 00:00:58,950 Bildschirm geladen werden sollen. 12 00:01:00,180 --> 00:01:06,780 Wenn Sie jetzt navigieren, navigieren Sie immer noch mit der Navigationsstütze und dann mit der Navigationsfunktion, indem Sie 13 00:01:06,960 --> 00:01:09,280 den Bildschirm anhand des Namens identifizieren. 14 00:01:09,300 --> 00:01:11,180 Das ändert sich also überhaupt nicht. 15 00:01:11,190 --> 00:01:13,720 Sie übergeben auch noch Eltern wie zuvor. 16 00:01:13,770 --> 00:01:18,960 Das einzig Wichtige hier oder das einzige, was Sie beachten sollten, ist, dass der Name, den Sie hier verwenden, natürlich 17 00:01:19,140 --> 00:01:21,810 der Name sein sollte, den Sie auch hier verwenden. 18 00:01:21,810 --> 00:01:23,490 Wenn Sie Ihre Bildschirme einrichten. 19 00:01:23,670 --> 00:01:29,400 Das ist also die größte Änderung, die Sie beim Konfigurieren Ihrer Komponenten als Komponenten vorgenommen haben. 20 00:01:29,400 --> 00:01:35,220 Letztendlich können Sie dann immer noch Ihre verschiedenen Navigatoren ineinander verschachteln, während wir 21 00:01:35,520 --> 00:01:41,640 dies hier tun, wo wir einen Navigator zeichnen müssen, der auch Stapel-Navigatoren als Bildschirme hat. 22 00:01:41,640 --> 00:01:45,080 Das ändert auch nichts, es sieht jetzt einfach anders aus. 23 00:01:45,150 --> 00:01:52,590 Und was sich geändert hat, ist, wo Sie bildschirmweite Konfigurationsoptionen konfigurieren, sodass Optionen, die alle Bildschirme 24 00:01:52,650 --> 00:01:58,740 eines Navigators betreffen, direkt im Navigator eingerichtet werden. Eine Komponente mit der 25 00:01:58,740 --> 00:02:06,180 Option für Bildschirmoptionen und eine bildschirmspezifische Konfiguration werden mit der Option für die Bildschirmkomponente eingerichtet . 26 00:02:06,180 --> 00:02:12,330 Jetzt, wo Sie diese Konfiguration verwalten, wenn Sie alles in einer großen Datei erledigen, oder wie wir es hier tun, wenn Sie 27 00:02:12,330 --> 00:02:15,500 es auf dem Bildschirm tun und es dann einfach exportieren. 28 00:02:15,550 --> 00:02:19,740 Also ja, Sie können es verwenden, wenn es an Ihnen liegt, ihre Komponenten einzurichten. 29 00:02:20,130 --> 00:02:22,630 Das ist alles, was Sie dort beachten müssen. 30 00:02:22,650 --> 00:02:29,790 Eine Sache, die sich dadurch geändert hat, ist die Art und Weise, wie Sie mit der Authentifizierung oder verwandten Fällen umgehen. 31 00:02:29,790 --> 00:02:32,210 Sie müssen den Navigator nicht mehr wechseln. 32 00:02:32,220 --> 00:02:39,150 Stattdessen steuern Sie, welche Navigatoren durch Reagieren gerendert werden sollen und was nicht gerendert werden kann, kann nicht effektiv sein 33 00:02:39,270 --> 00:02:40,710 und nichts tun. 34 00:02:40,710 --> 00:02:46,440 Wenn wir also nicht zum Shop-Navigator rendern, weil wir nicht authentifiziert sind, kann kein 35 00:02:46,440 --> 00:02:48,010 Shop-Bildschirm geladen werden. 36 00:02:48,060 --> 00:02:54,900 So steuern wir nun, welche Bildschirme hier am Beispiel der Authentifizierung zugänglich sind. 37 00:02:55,020 --> 00:02:57,870 Beachten Sie auch das Bestellprotokoll. 38 00:02:57,870 --> 00:03:01,900 Hier muss man also zu einem neuen mentalen Modell wechseln. 39 00:03:01,920 --> 00:03:06,850 Dies ist jedoch viel reaktiver als das, was wir zuvor verwenden mussten. 40 00:03:07,260 --> 00:03:13,770 Und dann haben wir noch eine große oder wichtige Änderung, und so extrahieren wir Eltern. Wenn 41 00:03:13,770 --> 00:03:21,650 wir Eltern brauchen, extrahieren wir Eltern auf dieser neuen Routen-Requisite mit dem Elternschlüssel. Der Elternschlüssel kann undefiniert sein, wenn keine 42 00:03:21,690 --> 00:03:28,290 Eltern empfangen wurden und diese Komponente und Eltern sollten jetzt wirklich nur verwendet werden, um Daten von 43 00:03:28,290 --> 00:03:30,720 Komponente A, Zweikomponente B, abzurufen. 44 00:03:30,810 --> 00:03:38,100 Von Bildschirm zu Bildschirm B-Hack arbeiten Sie also nicht mehr, da wir sie zuvor im hinzugefügten Produktbildschirm verwenden 45 00:03:38,100 --> 00:03:45,150 mussten, wenn Sie Eltern verwenden müssen, um Daten von Insight zu Komponente in Ihre Bildschirmoptionen zu 46 00:03:45,150 --> 00:03:48,770 erhalten, die Sie nicht benötigen das nicht mehr. 47 00:03:48,840 --> 00:03:56,760 Stattdessen haben Sie jetzt die neue Set-Options-Funktion verwendet, die Sie hier direkt auf Ihrer 48 00:03:56,760 --> 00:03:58,080 Navigations-Requisite aufrufen 49 00:04:00,760 --> 00:04:01,870 können. 50 00:04:01,900 --> 00:04:07,960 Wir rufen also Set-Optionen für diese Navigations-Requisite auf und können dann die Navigationsoptionen 51 00:04:08,170 --> 00:04:10,610 innerhalb der Komponente dynamisch anpassen. 52 00:04:10,630 --> 00:04:16,780 Dies sind die wichtigsten Änderungen, die wir hier vornehmen mussten, und die wichtigsten Dinge, die sich geändert haben. 53 00:04:16,780 --> 00:04:19,840 Jetzt wie immer sind die offiziellen Dokumente dein Freund. 54 00:04:19,840 --> 00:04:25,090 Wenn Sie noch einmal darüber lesen möchten, wenn Sie in einige andere Fälle eintauchen möchten, die wir hier nicht 55 00:04:25,090 --> 00:04:25,670 behandelt haben. 56 00:04:25,750 --> 00:04:30,370 Wenn Sie beispielsweise lernen möchten, wie man mit Wasserhähnen arbeitet, tun wir dies hier nicht, aber der Ansatz 57 00:04:30,370 --> 00:04:31,290 ist sehr ähnlich. 58 00:04:31,330 --> 00:04:36,700 Sie tun dies mit einer komponentenbasierten Konfiguration mit einem Navigator und Bildschirmen, und dann sind die offiziellen 59 00:04:36,700 --> 00:04:39,180 Dokumente ein wirklich großartiger Ort zum Eintauchen. 60 00:04:39,190 --> 00:04:46,200 Lesen Sie auch den Ankündigungsbeitrag für React Navigation 5 und den Upgrade-Leitfaden, der ebenfalls dort 61 00:04:46,240 --> 00:04:51,210 verlinkt ist. Alle diese Ressourcen sind auch dieser Vorlesung beigefügt. 62 00:04:51,310 --> 00:04:56,710 Und damit liegt es an Ihnen, ob Sie die Reaktionsnavigation 3 oder 4 verwenden oder auf 63 00:04:56,710 --> 00:04:58,450 5 oder höher wechseln möchten. 64 00:04:58,450 --> 00:05:01,290 Sobald wir neue Wörter haben, liegt es an Ihnen. 65 00:05:01,450 --> 00:05:07,870 Die meisten Projekte in freier Wildbahn werden Virgin sicherlich noch kostenlos verwenden, und das, weil es 66 00:05:07,900 --> 00:05:10,830 diese Versionen schon so lange gibt. 67 00:05:10,990 --> 00:05:15,850 Neue Projekte wechseln möglicherweise zu Where's in Five, verwenden jedoch möglicherweise weiterhin die ältere Version. 68 00:05:16,030 --> 00:05:21,850 Daher würde ich argumentieren, dass es wichtig ist, beide Arten der Navigation zu kennen, wenn Sie selbst an Ihrem 69 00:05:21,850 --> 00:05:23,010 eigenen Projekt arbeiten. 70 00:05:23,050 --> 00:05:28,060 Ich würde empfehlen, dass Sie von Anfang an auf die Navigation fünf umschalten, aber wenn Sie 4 71 00:05:28,060 --> 00:05:31,760 oder einen freien Teig möchten, ist das auch vollkommen in Ordnung. 72 00:05:31,930 --> 00:05:38,470 Die Reaktivierung 3 und 4 ist vollständig stabil und wird vom Reaction Navigation Team in Zukunft auf dem 73 00:05:38,470 --> 00:05:39,750 neuesten Stand gehalten. 74 00:05:39,850 --> 00:05:41,260 Es geht also nirgendwo hin. 75 00:05:41,260 --> 00:05:43,760 Es ist nicht unsicher, es zu benutzen und es liegt an Ihnen. 76 00:05:43,780 --> 00:05:45,310 Welche Version möchten Sie verwenden?