1 00:00:02,430 --> 00:00:04,130 Wir machen also gute Fortschritte. 2 00:00:04,140 --> 00:00:08,190 Wir haben alle unsere Navigatoren oder fast alle migriert. 3 00:00:08,190 --> 00:00:12,930 Was ist nun mit dem Schalter Navigator leer von Navigator HIER. 4 00:00:12,930 --> 00:00:15,210 Nun, wir haben Sie mit Sicherheit aus dem Navigator entfernt. 5 00:00:15,240 --> 00:00:21,300 Es ist ein Stack Navigator, der für den Off-Screen und uns verantwortlich ist. 6 00:00:21,540 --> 00:00:23,610 Was ist mit dem Switch Navigator? 7 00:00:23,610 --> 00:00:26,490 Nun, wir müssen den Navigator nicht mehr wechseln. 8 00:00:26,520 --> 00:00:31,600 Es gibt kein Slash-Switch-Paket für die Navigation oder ähnliches. 9 00:00:31,800 --> 00:00:33,810 Aber ich werde darauf zurückkommen, wenn wir es brauchen. 10 00:00:33,960 --> 00:00:42,960 Lassen Sie uns jetzt unseren Off-Navigator oder unseren Off-Stack-Navigator hier erstellen, indem Sie den Navigator aufrufen. 11 00:00:42,970 --> 00:00:52,410 Durch Aufrufen von create stack navigator und Exportieren unseres konstanten Off-Navigator-Jahres, das wiederum eine 12 00:00:52,410 --> 00:00:59,480 Reaktionskomponente darstellt, wie zuvor, wenn wir den Stack-Navigator-Punktnavigator zurückgeben. 13 00:00:59,550 --> 00:01:05,850 Und dort haben wir unseren Office Deck Navigator Punktbildschirm und der Name des Bildschirms ist aus. 14 00:01:05,850 --> 00:01:12,470 Da wir es hier haben und eine Komponente haben, die wir brauchen, ist sie außerhalb des Bildschirms. 15 00:01:12,490 --> 00:01:14,680 Jetzt haben wir hier die Teufels-NAF-Optionen. 16 00:01:14,680 --> 00:01:22,170 Daher sollten die Bildschirmoptionen im Navigator die Standardoptionen für das Nickerchen und 40 bildschirmspezifische Optionen sein. 17 00:01:22,180 --> 00:01:30,160 Werfen wir einen Blick auf den Off-Screen und wenn wir nach unten scrollen, haben wir auch hier einige Optionen. 18 00:01:30,190 --> 00:01:36,240 Exportieren wir also unsere Bildschirmoptionen hier genauso wie zuvor. 19 00:01:36,280 --> 00:01:42,980 Lassen Sie es uns exportieren und dann hier und auf diesem Bildschirm zum Shop-Navigator gehen. 20 00:01:42,980 --> 00:01:50,960 Lassen Sie uns zwei Off-Screen-Optionen festlegen, die wir jetzt 21 00:01:51,440 --> 00:02:01,210 auch ganz oben als Off-Screen-Import hinzufügen müssen. Wir importieren Bildschirmoptionen als Off-Screen-Optionen. 22 00:02:01,220 --> 00:02:07,400 Jetzt haben wir auch diesen Startbildschirm, aber wenn wir uns die Vergangenheit genauer ansehen, haben wir 23 00:02:07,460 --> 00:02:13,470 nur direkt in unserem Switch Navigator darauf hingewiesen, was uns nur eine Frage lässt. 24 00:02:13,730 --> 00:02:16,950 Was ist mit diesem Switch-Navigator? 25 00:02:17,300 --> 00:02:23,040 In der Vergangenheit war dies der erste Bildschirm, den Sie nach dem Laden des Apfels sehen, da 26 00:02:23,280 --> 00:02:26,420 dies der oberste erste Bildschirm in dieser Konfiguration ist. 27 00:02:26,420 --> 00:02:33,590 Und dann hatten wir Logik in dem alten Navigationscontainer, den wir zuvor erstellt haben, in dem wir überprüft haben, ob wir 28 00:02:33,590 --> 00:02:39,800 authentifiziert sind. Wenn dies nicht der Fall wäre, würden wir den Benutzer zu diesem Off-Screen umleiten, wenn 29 00:02:39,800 --> 00:02:41,420 wir nicht authentifiziert wären. 30 00:02:41,420 --> 00:02:44,470 Wann würden wir nun den Bildschirm des Shops erreichen? 31 00:02:44,480 --> 00:02:46,880 Schauen wir uns dazu den Startbildschirm an. 32 00:02:47,060 --> 00:02:54,350 Dort sehen wir, dass wir versucht haben, uns zu authentifizieren, und hier würden wir schließlich zum Bildschirm des Shops gehen, wenn die 33 00:02:54,350 --> 00:02:55,900 automatische Anmeldung erfolgreich war. 34 00:02:55,910 --> 00:02:58,410 Das war die Logik, die wir dort geschrieben haben. 35 00:02:58,430 --> 00:03:03,400 Das ist immer noch eine Logik, die sehr viel Sinn macht. 36 00:03:03,450 --> 00:03:11,100 Wir müssen es nur für das neue Navigationspaket anpassen. Am Ende sehen wir hier, dass wir am Anfang 37 00:03:11,100 --> 00:03:19,390 des Bildschirms versuchen, den Benutzer zu sperren, und wenn wir keine auf dem Gerät gespeicherten Benutzerdaten finden können, gehen wir 38 00:03:19,420 --> 00:03:20,830 auf die Off-Seite. 39 00:03:20,830 --> 00:03:26,260 Wenn wir feststellen, dass Daten über das Token abgelaufen sind oder nicht, gehen wir zur Off-Seite. 40 00:03:26,260 --> 00:03:34,750 Wenn es uns jedoch mit allem gelingt und wir ein gültiges Token haben, gehen wir stattdessen zur Shop-Seite und 41 00:03:35,110 --> 00:03:41,110 senden eine Aktion aus, bei der wir den Benutzer authentifizieren, der den Status 42 00:03:41,110 --> 00:03:49,750 ändert, und unseren Redux-Speicher, der die Token auf das Token in unserem Shop setzt jetzt jetzt können wir das nutzen. 43 00:03:49,760 --> 00:03:58,250 Was ist, wenn wir all diese Navigationsaufrufe hier loswerden, damit wir sie löschen oder einfach auskommentieren können, während ich es 44 00:03:58,340 --> 00:03:59,430 hier mache? 45 00:03:59,480 --> 00:04:03,920 Also werden wir stattdessen alle diese Navigationsaktionen los. 46 00:04:04,460 --> 00:04:06,890 Was passiert, wenn wir hierher zurückkehren? 47 00:04:06,890 --> 00:04:11,840 Wenn wir hierher zurückkehren, stoppt die Ausführung von Funktionsstörungen Indiana richtig. 48 00:04:11,840 --> 00:04:12,730 Es hört auf. 49 00:04:12,830 --> 00:04:17,270 Und was wir definitiv nicht tun, ist, dass wir definitiv keine Maßnahmen ergreifen. 50 00:04:17,270 --> 00:04:20,240 Wir setzen den Token also definitiv nicht auf irgendetwas. 51 00:04:20,240 --> 00:04:22,270 Es ist immer noch nein. 52 00:04:22,640 --> 00:04:27,800 Das passiert hier immer, es sei denn, wir schaffen es nach unten. In diesem Fall haben wir einen Token. 53 00:04:27,890 --> 00:04:30,810 Wir haben uns versandt und der Token ist nicht null. 54 00:04:30,830 --> 00:04:32,750 Sie sind oft in unserem Laden. 55 00:04:32,840 --> 00:04:38,770 Das Token, das wir mit Redux verwalten, ist also schon jetzt oder es enthält einen Wert. 56 00:04:38,840 --> 00:04:41,990 Jetzt möchte ich den Redux-Speicher etwas anpassen. 57 00:04:42,140 --> 00:04:48,500 Der Aus-Teil davon und Sie alle für den Benutzer und ich werde diesem Status 58 00:04:48,530 --> 00:04:54,070 ein neues Datenelement hinzufügen, und das ist der Versuch aller, sich anzumelden. 59 00:04:54,090 --> 00:04:58,300 Sie können es benennen, wie Sie möchten, und ich werde es hier zunächst auf false setzen. 60 00:04:58,300 --> 00:05:02,290 Ich möchte speichern, ob wir versucht haben, den Benutzer anzumelden oder nicht. 61 00:05:02,290 --> 00:05:04,150 Nun, wenn wir uns authentifizieren. 62 00:05:04,150 --> 00:05:11,850 Wenn wir also eine Aktion mit dieser Kennung auslösen, habe ich versucht, mich automatisch auf true anzumelden. 63 00:05:11,890 --> 00:05:19,240 Ich werde hier auch eine neue Aktion in "Aktionen aus" hinzufügen und dafür werde ich hier 64 00:05:19,240 --> 00:05:31,820 oben eine neue Kennung hinzufügen, die ich benennen werde. Set hat versucht oder ein L für die automatische Anmeldung hat versucht, ein L zu erstellen und einen Aktionsersteller 65 00:05:31,910 --> 00:05:38,070 dafür zu erstellen set hat ein L ausprobiert, das keine Argumente akzeptiert. 66 00:05:38,070 --> 00:05:44,040 Und wo ich mein Aktionsobjekt nicht zurückgegeben habe, wird nur festgelegt, wo es eingegeben werden soll. 67 00:05:44,060 --> 00:05:45,200 Habe ein l versucht .. 68 00:05:45,230 --> 00:05:49,020 Sie können es auch am Ende der Datei einfügen, spielt keine Rolle. 69 00:05:49,020 --> 00:05:50,330 Warum mache ich das jetzt? 70 00:05:50,390 --> 00:05:51,460 Das wirst du in der Sekunde sehen. 71 00:05:51,530 --> 00:05:55,820 Kehren wir zum Reduzierstück zurück, wenn Sie das Reduzierstück ausschalten und diesen neuen Fall behandeln. 72 00:05:55,820 --> 00:05:58,960 Das Fallset hat ein l versucht. 73 00:05:59,000 --> 00:06:06,620 Stellen Sie sicher, dass Sie auch aus Aktionen von jetzt importieren. Jedes Jahr geben wir einen neuen Status zurück, in dem ich den alten Status kopiere 74 00:06:06,620 --> 00:06:13,250 und in dem ich sagte, dass ich versucht habe, mich automatisch bei true anzumelden, damit das Token immer noch Wissen ist. Setzen Sie 75 00:06:13,250 --> 00:06:14,750 dies einfach auf true. 76 00:06:14,750 --> 00:06:19,490 Jetzt ist meine Idee, dass ich diese Aktion hier im Startbildschirm versende. 77 00:06:19,610 --> 00:06:25,790 In allen Szenarien, in denen wir zuvor zum Off-Screen gegangen sind, haben wir versucht, uns anzumelden, aber es 78 00:06:25,790 --> 00:06:27,280 ist uns nicht gelungen. 79 00:06:27,380 --> 00:06:38,650 Also ja, ich werde Set versenden, habe es mit A versucht. L. L. Stellen Sie also sicher, dass Sie bei Ihren Aus-Aktionen genau so darauf 80 00:06:39,040 --> 00:06:44,270 zugreifen, und tun Sie dies in diesen beiden Fällen, in denen wir zuvor zum Off-Bildschirm navigiert haben. 81 00:06:44,320 --> 00:06:48,160 Jetzt haben wir dieses neue Feld und Redux und warum mache ich das? 82 00:06:48,160 --> 00:06:49,840 Warum ist das hilfreich? 83 00:06:49,840 --> 00:06:55,480 Nun, mit React Navigation 5 gibt es keinen Switch-Navigator mehr, weil wir ihn nicht mehr 84 00:06:55,810 --> 00:06:58,900 benötigen, da wir jetzt unser gesamtes Routen-Setup verwalten. 85 00:06:59,010 --> 00:07:06,920 Warum sind Komponenten? Wir können Komponenten nur dynamisch rendern, damit sie einen Effekt haben, oder sie nicht 86 00:07:06,920 --> 00:07:14,240 so rendern, dass sie im App-Navigator angezeigt werden, in dem ich meinen Produktnavigator rendere. 87 00:07:14,260 --> 00:07:20,820 Es ist jetzt an der Zeit, alle diese zu konfigurierenden Navigatoren hinzuzufügen und dann im Shop-Navigator 88 00:07:20,830 --> 00:07:24,230 zu entscheiden, welcher Navigator wann gerendert werden soll. 89 00:07:24,330 --> 00:07:27,300 Ich möchte jetzt tatsächlich diesen Shop-Navigator 90 00:07:31,660 --> 00:07:40,180 hier importieren, den ich wieder als Konstante exportieren werde, und dann hier einen App-Navigator, den ich im 91 00:07:40,270 --> 00:07:41,320 Shop-Navigator importiere. 92 00:07:41,320 --> 00:07:42,850 Das ist unsere Auslosung eines Navigators. 93 00:07:42,850 --> 00:07:45,990 Denken Sie daran und das möchte ich hier rendern. 94 00:07:46,090 --> 00:07:48,090 Shop Navigator. 95 00:07:48,240 --> 00:07:55,020 Das ist also im Grunde das, was ich rendern möchte, wenn wir in unserem Shop eingeschlossen 96 00:07:55,020 --> 00:07:59,070 sind. Das haben wir diesem Shop-Schlüssel im Switch-Navigator zugeordnet. 97 00:07:59,070 --> 00:08:02,350 Jetzt brauchen wir alle den Aus-Navigator auf dem Startbildschirm. 98 00:08:02,400 --> 00:08:04,190 Also hier ein App Navigator. 99 00:08:04,290 --> 00:08:09,290 Ich werde den Off-Navigator importieren und dies sind die einzigen zwei Navigatoren, die ich hier importieren muss. 100 00:08:09,330 --> 00:08:15,060 Daher können Sie die Exportanweisung für alle anderen Navigatoren hier in unserer Shop-Navigator-Datei entfernen. Was jedoch 101 00:08:16,080 --> 00:08:20,300 auch in den App-Navigator importiert werden muss, ist jetzt der Startbildschirm. 102 00:08:20,520 --> 00:08:30,520 Importieren wir also den Startbildschirm vom Startbildschirm des Bildschirms und jetzt haben wir hier den Shop-Navigator. 103 00:08:30,520 --> 00:08:40,010 Wir haben den Off Navigator als Alternative und wir haben auch einen tiefen Startbildschirm, jetzt wird nur einer 104 00:08:40,010 --> 00:08:42,430 der freien und gerendert. 105 00:08:42,540 --> 00:08:45,410 Und hier können wir jetzt Redux wiederverwenden. 106 00:08:45,480 --> 00:08:51,000 Ich kopiere den Verwendungsselektor, da die Informationen der Site über das Token, an 107 00:08:51,000 --> 00:08:57,770 dem ich auch interessiert bin, das gesamte Anmeldefeld ausprobiert haben, das ich hier zum Status "Aus" hinzugefügt habe. 108 00:08:57,780 --> 00:09:05,770 Dieses neue Feld wurde hinzugefügt. Ich kann jetzt hier in meiner App-Navigator-Datei darauf zugreifen und es speichern. Ich habe 109 00:09:05,810 --> 00:09:08,280 alle versucht, mich konstant anzumelden. 110 00:09:08,280 --> 00:09:15,710 Jetzt weiß ich, dass ich rendern möchte, um einzukaufen, wenn dies alles wahr ist, und wie wir das tun können, wenn wir authentifiziert sind. 111 00:09:15,720 --> 00:09:20,000 Ich rendere immer zum Einkaufen, mir ist nichts anderes wichtig. 112 00:09:20,160 --> 00:09:28,290 Jetzt möchte ich den Off-Navigator rendern, wenn er fehlerhaft ist, und wir haben versucht, uns anzumelden, denn wenn 113 00:09:28,290 --> 00:09:36,540 wir nicht versucht haben, uns automatisch anzumelden, möchte ich den Startbildschirm tatsächlich rendern, wenn wir nicht authentifiziert sind 114 00:09:36,540 --> 00:09:42,700 und dies auch getan haben Versuchen Sie noch nicht, sich automatisch anzumelden. 115 00:09:43,100 --> 00:09:47,180 Dann wissen wir nicht, ob der Benutzer ein Authentifikator sein könnte oder nicht. 116 00:09:47,180 --> 00:09:54,580 In diesem Fall möchte ich jetzt auf dem Startbildschirm rendern. Ich möchte schnell einen POS dort und stelle sicher, dass wir 117 00:09:54,700 --> 00:10:00,820 alle auf derselben Seite sind und wir alle verstehen, warum wir dies jetzt anstelle des Switch-Navigators verwenden. 118 00:10:00,830 --> 00:10:05,550 Zunächst einmal gibt es in der Reaktionsnavigation 5 keinen Schalternavigator mehr. 119 00:10:05,710 --> 00:10:07,720 Aber warum wurde es entfernt. 120 00:10:07,720 --> 00:10:15,010 Nun, da wir jetzt alles mit Komponenten konfigurieren, können wir reguläre Reaktionstools verwenden, um entweder eine Komponente zu 121 00:10:15,010 --> 00:10:16,540 rendern oder nicht. 122 00:10:16,540 --> 00:10:21,850 Wenn Sie nicht an die Navigation denken, sondern an einen normalen Bildschirm, auf dem Sie möglicherweise 123 00:10:21,850 --> 00:10:28,420 einen Text haben, den Sie nur bedingt anzeigen möchten, verwenden Sie einen bestimmten Status. In J ist X, und Sie rendern 124 00:10:28,600 --> 00:10:31,990 beispielsweise nur manchmal einen Text mit einem ternären Ausdruck . 125 00:10:32,110 --> 00:10:37,660 Und wir machen hier dasselbe mit unserer Routenkonfiguration mit unseren Bildschirmkonfigurationen hier. Das Bildschirmkonfigurationssetup, 126 00:10:37,660 --> 00:10:43,700 das wir hier haben, sind verschiedene Navigatoren. Um den Bildschirm zu starten, sind dies letztendlich 127 00:10:43,750 --> 00:10:50,770 alles nur Dinge, die reagieren sollten, um etwas auf die zu bringen Bildschirm und reagieren Navigation hinter den 128 00:10:50,800 --> 00:10:56,830 Kulissen staubig schwer abheben Interpretieren Sie unsere Konfiguration und stellen Sie sicher, dass die richtige 129 00:10:56,830 --> 00:10:59,440 Komponente auf dem Bildschirm gerendert wird. 130 00:10:59,440 --> 00:11:09,210 Wenn wir nun "Aus" verwenden und versuchen, sich automatisch anzumelden, um zu steuern, welcher Navigator tatsächlich rendererfähig ist, indem wir mit 131 00:11:09,220 --> 00:11:17,230 einem solchen ternären Ausdruck reagieren, stellen wir sicher, dass Shop-Navigator-Bildschirme auf keinen Fall aktiviert werden können, wenn 132 00:11:17,230 --> 00:11:21,610 beispielsweise "Aus" nicht wahr ist auf den Bildschirm gebracht. 133 00:11:21,610 --> 00:11:22,230 Warum. 134 00:11:22,270 --> 00:11:28,840 Da die Shop-Navigator-Komponente, die unsere Shop-bezogene Stammkonfiguration enthält, unsere Bildschirmkonfiguration enthält, wird diese 135 00:11:29,260 --> 00:11:33,400 Komponente nur gerendert, wenn Office wahr ist. 136 00:11:33,400 --> 00:11:39,840 Es gibt also keine Möglichkeit, einen Shop-bezogenen Bildschirm auf dem Bildschirm zu rendern, wenn "Aus" falsch ist. 137 00:11:40,090 --> 00:11:47,560 Machen Sie diesen Vergleich wirklich mit normalen Textelementen oder normalen Feldern auf einem Bildschirm, den Sie bedingt rendern. 138 00:11:47,560 --> 00:11:54,000 Wir machen hier dasselbe, aber nicht mit Feldern und Text, sondern mit unserem gesamten Navigationsstapel. 139 00:11:54,040 --> 00:12:00,170 Das ist es, was wir hier tun und mit all dem, wenn wir dies speichern 140 00:12:04,210 --> 00:12:12,860 und auf Android erneut ausführen, landen wir außerhalb des Bildschirms. Wenn ich dies neu lade und es neu erstellt, landen wir wieder dort. 141 00:12:13,630 --> 00:12:16,450 Wenn ich jetzt versuche, mich hier einzuloggen, bekomme 142 00:12:21,790 --> 00:12:23,930 ich hier tatsächlich ein Problem. 143 00:12:24,100 --> 00:12:30,530 Ich erhalte eine Fehlermeldung, dass das Navigieren mit einer Nutzlast des Shops nicht gut gehandhabt wurde. 144 00:12:30,540 --> 00:12:32,960 Dies ist jetzt sinnvoll, wenn Sie darüber nachdenken. 145 00:12:32,970 --> 00:12:35,440 Wir haben keinen Switch Navigator mehr. 146 00:12:35,490 --> 00:12:40,170 Stattdessen steuern wir nur, welchen Navigator wir unter welchen Umständen rendern möchten. 147 00:12:40,350 --> 00:12:42,410 Warum bekommen wir das? 148 00:12:42,420 --> 00:12:44,490 Können Sie es herausfinden und selbst reparieren? 149 00:12:44,580 --> 00:12:48,330 Andernfalls machen wir es zusammen und reparieren es in der nächsten Vorlesung.