1 00:00:02,430 --> 00:00:04,130 Quindi stiamo facendo buoni progressi. 2 00:00:04,140 --> 00:00:08,190 Abbiamo migrato tutti i nostri navigatori o quasi tutti. 3 00:00:08,190 --> 00:00:12,930 Ora che dire dello switch navigator vuoto del navigatore QUI. 4 00:00:12,930 --> 00:00:15,210 Bene, ti abbiamo spento Navigator di sicuro. 5 00:00:15,240 --> 00:00:21,300 È uno Stack Navigator che è responsabile dello schermo esterno e noi. 6 00:00:21,540 --> 00:00:23,610 Bene, che dire dello switch navigator. 7 00:00:23,610 --> 00:00:26,490 Bene, non avremo più bisogno di cambiare navigatore. 8 00:00:26,520 --> 00:00:31,600 Non esiste un pacchetto di switch slash di navigazione per reagire o qualcosa del genere. 9 00:00:31,800 --> 00:00:33,810 Ma ci tornerò quando ne avremo bisogno. 10 00:00:33,960 --> 00:00:42,960 Quindi per ora creiamo il nostro navigatore off stack o il nostro navigatore off stack qui chiamando navigator. 11 00:00:42,970 --> 00:00:52,410 Chiamando create stack navigator ed esportiamo il nostro anno off navigator costante, che è di nuovo un componente 12 00:00:52,410 --> 00:00:59,480 di reazione proprio come prima quando torniamo dallo stack dot navigator dot navigator. 13 00:00:59,550 --> 00:01:05,850 E lì abbiamo la nostra schermata con il punto di navigazione del deck dell'ufficio e il nome dello schermo è spento. 14 00:01:05,850 --> 00:01:12,470 Dato che lo abbiamo qui e facciamo il componente di cui abbiamo bisogno è fuori dallo schermo, quindi è quello. 15 00:01:12,490 --> 00:01:14,680 Ora abbiamo le opzioni del diavolo NAF qui. 16 00:01:14,680 --> 00:01:22,170 Quindi le opzioni dello schermo sul navigatore dovrebbero essere le opzioni di pisolino predefinite e 40 opzioni specifiche dello schermo. 17 00:01:22,180 --> 00:01:30,160 Diamo un'occhiata allo schermo spento e se scorriamo verso il basso abbiamo anche alcune opzioni qui. 18 00:01:30,190 --> 00:01:36,240 Esportiamo quindi le opzioni dello schermo qui come abbiamo fatto prima. 19 00:01:36,280 --> 00:01:42,980 Esportiamolo e poi andiamo al navigatore del negozio qui e su quello schermo. 20 00:01:42,980 --> 00:01:50,960 Impostiamo due opzioni fuori dallo schermo che ora dobbiamo aggiungere anche come importazione 21 00:01:51,440 --> 00:02:01,210 nella parte superiore dello schermo, importiamo le opzioni dello schermo come opzioni dello schermo, quindi è così. 22 00:02:01,220 --> 00:02:07,400 Ora abbiamo anche queste schermate di avvio, ma se guardiamo più da vicino in passato, le abbiamo 23 00:02:07,460 --> 00:02:13,470 semplicemente indicate direttamente dall'interno del nostro switch Navigator, il che ci lascia con una sola domanda. 24 00:02:13,730 --> 00:02:16,950 Che dire di questo interruttore di navigazione. 25 00:02:17,300 --> 00:02:23,040 Ora in passato questa sarebbe stata la prima schermata che vedrai una volta caricata la mela perché è 26 00:02:23,280 --> 00:02:26,420 la prima schermata più in alto in questa configurazione. 27 00:02:26,420 --> 00:02:33,590 E poi abbiamo avuto la logica in quel vecchio contenitore di navigazione che abbiamo creato in precedenza, dove abbiamo verificato 28 00:02:33,590 --> 00:02:39,800 se siamo autenticati e se ciò non fosse vero se non fossimo autenticati, reindirizzeremmo l'utente a 29 00:02:39,800 --> 00:02:41,420 quello fuori dallo schermo. 30 00:02:41,420 --> 00:02:44,470 Ora quando raggiungeremo lo schermo del negozio. 31 00:02:44,480 --> 00:02:46,880 Bene, diamo un'occhiata alla schermata di avvio. 32 00:02:47,060 --> 00:02:54,350 Lì vediamo che abbiamo provato ad eseguire l'autenticazione e qui alla fine andremmo alla schermata dei negozi quando 33 00:02:54,350 --> 00:02:55,900 ci accediamo automaticamente. 34 00:02:55,910 --> 00:02:58,410 Questa era la logica che abbiamo scritto lì. 35 00:02:58,430 --> 00:03:03,400 Ora c'è ancora qualche logica che ha molto senso. 36 00:03:03,450 --> 00:03:11,100 Dobbiamo solo modificarlo per il nuovo pacchetto di navigazione alla fine quello che possiamo vedere qui è che 37 00:03:11,100 --> 00:03:19,390 all'inizio dello schermo stiamo cercando di bloccare l'utente e se non riusciamo a trovare i dati dell'utente memorizzati sul dispositivo andiamo 38 00:03:19,420 --> 00:03:20,830 alla pagina off. 39 00:03:20,830 --> 00:03:26,260 Se rileviamo che i dati sul token sono scaduti o no, andiamo alla pagina off. 40 00:03:26,260 --> 00:03:34,750 Se riusciremo comunque con tutto e avremo un token valido, andremo invece alla pagina del negozio e inviamo 41 00:03:35,110 --> 00:03:41,110 un'azione in cui autentichiamo l'utente che cambia stato e il nostro negozio 42 00:03:41,110 --> 00:03:49,750 di redux che imposta i token inizialmente che il token nel nostro negozio è ora ora possiamo usarlo. 43 00:03:49,760 --> 00:03:58,250 Che cosa succede se eliminiamo tutte queste chiamate di navigazione qui in modo da poterle eliminare o commentarle mentre lo sto 44 00:03:58,340 --> 00:03:59,430 facendo qui. 45 00:03:59,480 --> 00:04:03,920 Quindi eliminiamo invece tutte queste azioni di navigazione. 46 00:04:04,460 --> 00:04:06,890 Cosa succede se torniamo qui. 47 00:04:06,890 --> 00:04:11,840 Bene, se torniamo qui, l'esecuzione della disfunzione arresta Indiana proprio. 48 00:04:11,840 --> 00:04:12,730 Si ferma. 49 00:04:12,830 --> 00:04:17,270 E quello che sicuramente non facciamo è che non spediamo azioni. 50 00:04:17,270 --> 00:04:20,240 Quindi sicuramente non impostiamo il token su nulla. 51 00:04:20,240 --> 00:04:22,270 È ancora no. 52 00:04:22,640 --> 00:04:27,800 Succede sempre qui, a meno che non arriviamo in fondo, nel qual caso abbiamo un token. 53 00:04:27,890 --> 00:04:30,810 Ci abbiamo inviato e il token non è nullo. 54 00:04:30,830 --> 00:04:32,750 Sono spesso nel nostro negozio. 55 00:04:32,840 --> 00:04:38,770 Quindi quel token che gestiamo con redux è ancora adesso o contiene un valore. 56 00:04:38,840 --> 00:04:41,990 Ora voglio modificare un po 'il negozio di redux. 57 00:04:42,140 --> 00:04:48,500 La parte fuori di esso e tutti voi per l'utente e aggiungerò un nuovo pezzo di dati 58 00:04:48,530 --> 00:04:54,070 a questo stato e questo è il tentativo di tutto per accedere alla chiave. 59 00:04:54,090 --> 00:04:58,300 Puoi nominarlo come vuoi e lo imposterò su false inizialmente qui. 60 00:04:58,300 --> 00:05:02,290 Voglio archiviare se abbiamo provato ad accedere l'utente o meno. 61 00:05:02,290 --> 00:05:04,150 Ora se eseguiamo l'autenticazione. 62 00:05:04,150 --> 00:05:11,850 Quindi, se inviamo un'azione con quell'identificatore, imposterò il tentativo di accesso automatico su true. 63 00:05:11,890 --> 00:05:19,240 Aggiungerò anche una nuova azione qui nelle azioni off e per questo aggiungerò un 64 00:05:19,240 --> 00:05:31,820 nuovo identificatore qui che nominerò set provato o una L per il login automatico ha provato una L e ho creato un creatore di azioni 65 00:05:31,910 --> 00:05:38,070 per quello set ha provato una L che non accetta argomenti. 66 00:05:38,070 --> 00:05:44,040 E dove non ho restituito il mio oggetto azione dove digitare è appena impostato. 67 00:05:44,060 --> 00:05:45,200 Ho provato a .. 68 00:05:45,230 --> 00:05:49,020 Potresti anche metterlo in fondo al file non importa. 69 00:05:49,020 --> 00:05:50,330 Ora perché lo sto facendo. 70 00:05:50,390 --> 00:05:51,460 Lo vedrai nel secondo. 71 00:05:51,530 --> 00:05:55,820 Torniamo al riduttore, togli il riduttore e gestiamo questo nuovo caso. 72 00:05:55,820 --> 00:05:58,960 Il set di casi ha provato a l. 73 00:05:59,000 --> 00:06:06,620 Assicurati che anche l'importazione provenga da azioni di ogni anno in cui restituiamo un nuovo stato in cui copio il vecchio stato e 74 00:06:06,620 --> 00:06:13,250 dove ho detto che ho provato ad accedere automaticamente in modo che il token possa essere ancora conoscenza, basta 75 00:06:13,250 --> 00:06:14,750 impostare questo su vero. 76 00:06:14,750 --> 00:06:19,490 Ora la mia idea è che invio questa azione qui nella schermata di avvio. 77 00:06:19,610 --> 00:06:25,790 In tutti gli scenari in cui in precedenza eravamo andati fuori dallo schermo, quindi dove abbiamo provato ad accedere ma dove 78 00:06:25,790 --> 00:06:27,280 non ci siamo riusciti. 79 00:06:27,380 --> 00:06:38,650 Quindi sì spedirò il set provando A. L. quindi assicurati di accedere a questo nelle tue azioni off proprio in 80 00:06:39,040 --> 00:06:44,270 questo modo e fallo in questi due casi in cui in precedenza siamo passati allo schermo spento. 81 00:06:44,320 --> 00:06:48,160 Quindi ora abbiamo questo nuovo campo e redux e perché lo sto facendo. 82 00:06:48,160 --> 00:06:49,840 Perché è utile? 83 00:06:49,840 --> 00:06:55,480 Bene, perché con la navigazione di reazione 5 non c'è più alcun interruttore di navigazione perché non ne abbiamo 84 00:06:55,810 --> 00:06:58,900 più bisogno poiché ora gestiamo l'intera configurazione del nostro percorso. 85 00:06:59,010 --> 00:07:06,920 Perché sono componenti possiamo semplicemente renderizzare dinamicamente i componenti per farli avere un effetto o non renderli 86 00:07:06,920 --> 00:07:14,240 così nel navigatore dell'app in cui eseguo il rendering del navigatore dei miei prodotti. 87 00:07:14,260 --> 00:07:20,820 Ora è il momento di aggiungere tutti questi navigatori da configurare e quindi decidere quale navigatore dovrebbe 88 00:07:20,830 --> 00:07:24,230 essere reso quando così dal navigatore del negozio. 89 00:07:24,330 --> 00:07:27,300 Ora in realtà voglio importare questo 90 00:07:31,660 --> 00:07:40,180 navigatore negozio qui che esporterò di nuovo come costante e quindi qui un navigatore app che importazione 91 00:07:40,270 --> 00:07:41,320 navigatore negozio. 92 00:07:41,320 --> 00:07:42,850 Questo è il nostro disegnare un navigatore. 93 00:07:42,850 --> 00:07:45,990 Tienilo a mente ed è quello che voglio rendere qui. 94 00:07:46,090 --> 00:07:48,090 Shop Navigator. 95 00:07:48,240 --> 00:07:55,020 Quindi questo è fondamentalmente ciò che voglio rendere se siamo bloccati nel nostro negozio proprio in precedenza che è ciò 96 00:07:55,020 --> 00:07:59,070 che abbiamo mappato a questa chiave negozio nel navigatore di switch. 97 00:07:59,070 --> 00:08:02,350 Ora abbiamo tutti bisogno del navigatore off nella schermata di avvio. 98 00:08:02,400 --> 00:08:04,190 Quindi ecco un navigatore di app. 99 00:08:04,290 --> 00:08:09,290 Importerò off navigator e questi sono gli unici due navigatori che devo importare qui. 100 00:08:09,330 --> 00:08:15,060 Quindi puoi rimuovere la dichiarazione di esportazione su tutti gli altri navigatori qui nel nostro file del navigatore del negozio, ma 101 00:08:16,080 --> 00:08:20,300 ciò che sarà anche necessario importare nel navigatore dell'app è ora la schermata di avvio. 102 00:08:20,520 --> 00:08:30,520 Quindi importiamo la schermata di avvio dalle schermate schermata di avvio e ora qui abbiamo il navigatore del negozio. 103 00:08:30,520 --> 00:08:40,010 Abbiamo il navigatore spento in alternativa e abbiamo anche una schermata di avvio profondo ora renderà solo 104 00:08:40,010 --> 00:08:42,430 uno dei gratuiti e. 105 00:08:42,540 --> 00:08:45,410 Ed è qui che possiamo riutilizzare il redux. 106 00:08:45,480 --> 00:08:51,000 Copierò il selettore di utilizzo perché le informazioni del sito sul token 107 00:08:51,000 --> 00:08:57,770 mi interessano anche conoscere il campo di accesso che ho aggiunto allo stato spento qui. 108 00:08:57,780 --> 00:09:05,770 Questo nuovo campo ha aggiunto ora ottengo l'accesso a questo qui nel mio file di navigatore app e memorizzato e ho provato 109 00:09:05,810 --> 00:09:08,280 tutti a effettuare il login costante. 110 00:09:08,280 --> 00:09:15,710 Ora so che voglio renderlo per fare acquisti se tutto ciò è vero e fa è come possiamo farlo se siamo autenticati. 111 00:09:15,720 --> 00:09:20,000 Rendo sempre al negozio non mi interessa nient'altro. 112 00:09:20,160 --> 00:09:28,290 Ora voglio renderizzare il navigatore off se è dei suoi difetti e abbiamo ancora provato ad accedere perché 113 00:09:28,290 --> 00:09:36,540 se non abbiamo provato ad accedere automaticamente allora voglio effettivamente rendere la schermata di avvio quindi se non 114 00:09:36,540 --> 00:09:42,700 siamo autenticati e abbiamo fatto non provare ancora il nostro accesso automatico. 115 00:09:43,100 --> 00:09:47,180 Bene, allora non sappiamo se l'utente potrebbe essere un autenticatore o meno. 116 00:09:47,180 --> 00:09:54,580 Quindi in quel caso voglio renderizzare alla schermata di avvio ora voglio un POS lì e assicurarmi di essere tutti 117 00:09:54,700 --> 00:10:00,820 sulla stessa pagina e tutti capiamo perché ora stiamo usando questo invece del commutatore di navigazione. 118 00:10:00,830 --> 00:10:05,550 Ora, prima di tutto, non esiste più alcun interruttore di navigazione in Reattiva navigazione 5. 119 00:10:05,710 --> 00:10:07,720 Ma perché è stato rimosso. 120 00:10:07,720 --> 00:10:15,010 Bene, poiché ora configuriamo tutto con componenti, possiamo usare strumenti di reazione regolari per renderizzare o 121 00:10:15,010 --> 00:10:16,540 meno un componente. 122 00:10:16,540 --> 00:10:21,850 Se non stai pensando alla navigazione, ma a una schermata normale in cui potresti avere un 123 00:10:21,850 --> 00:10:28,420 testo che vuoi mostrare solo in modo condizionale, allora useresti un certo stato e poi in J è X, a 124 00:10:28,600 --> 00:10:31,990 volte potresti solo renderizzare un testo con un'espressione ternaria . 125 00:10:32,110 --> 00:10:37,660 E stiamo facendo lo stesso qui con la nostra configurazione del percorso con le nostre 126 00:10:37,660 --> 00:10:43,700 configurazioni dello schermo qui l'impostazione della configurazione dello schermo che abbiamo qui sono diversi navigatori e alla 127 00:10:43,750 --> 00:10:50,770 schermata di avvio questi sono alla fine tutte le cose che reagiscono dovrebbero essere consapevoli di portare qualcosa sul schermare 128 00:10:50,800 --> 00:10:56,830 e reagire alla navigazione dietro le quinte, impolverando pesantemente, interpretando la nostra configurazione e assicurandosi che il 129 00:10:56,830 --> 00:10:59,440 componente corretto venga visualizzato sullo schermo. 130 00:10:59,440 --> 00:11:09,210 Ora se usiamo è disattivato e abbiamo provato ad accedere automaticamente per controllare quale navigatore è effettivamente renderer in grado di reagire usando 131 00:11:09,220 --> 00:11:17,230 un'espressione ternaria, allora assicuriamo che se per esempio è spento non è vero non c'è modo che le 132 00:11:17,230 --> 00:11:21,610 schermate del navigatore negozio possano essere portato sullo schermo. 133 00:11:21,610 --> 00:11:22,230 Perché. 134 00:11:22,270 --> 00:11:28,840 Poiché il componente del navigatore del negozio che contiene la nostra configurazione radice correlata al negozio, la nostra configurazione dello 135 00:11:29,260 --> 00:11:33,400 schermo di quel componente viene visualizzata solo se Office è true. 136 00:11:33,400 --> 00:11:39,840 Quindi non è possibile visualizzare sullo schermo una schermata relativa al negozio se l'opzione è disattivata. 137 00:11:40,090 --> 00:11:47,560 Effettua davvero il confronto con elementi di testo normali o caselle normali su uno schermo che esegui il rendering in modo condizionale. 138 00:11:47,560 --> 00:11:54,000 Stiamo facendo lo stesso qui, ma non con le caselle e il testo ma invece con l'intero stack di navigazione. 139 00:11:54,040 --> 00:12:00,170 Questo è quello che facciamo qui e con tutto ciò che se salviamo questo 140 00:12:04,210 --> 00:12:12,860 e lo eseguiamo di nuovo su Android finiamo fuori dallo schermo e se lo ricarico e ricostruito finiamo di nuovo lì. 141 00:12:13,630 --> 00:12:16,450 Ora, se provo ad accedere qui, ora 142 00:12:21,790 --> 00:12:23,930 ho effettivamente un problema qui. 143 00:12:24,100 --> 00:12:30,530 Viene visualizzato un errore che indica che la navigazione con un payload del negozio non è stata gestita correttamente. 144 00:12:30,540 --> 00:12:32,960 Questo ora ha senso se ci pensate. 145 00:12:32,970 --> 00:12:35,440 Non abbiamo più alcun interruttore di navigazione. 146 00:12:35,490 --> 00:12:40,170 Invece controlliamo solo quale navigatore vogliamo rendere in quali circostanze. 147 00:12:40,350 --> 00:12:42,410 Allora perché stiamo ottenendo questo. 148 00:12:42,420 --> 00:12:44,490 Riesci a capirlo e risolverlo da solo. 149 00:12:44,580 --> 00:12:48,330 Altrimenti lo faremo insieme lo ripareremo insieme nella prossima lezione.