1 00:00:02,190 --> 00:00:05,630 Lavoriamo nella schermata degli ordini prima di aggiungere la navigazione, non è necessario 2 00:00:05,670 --> 00:00:07,920 completarla ma voglio essere in grado di visualizzarla. 3 00:00:08,700 --> 00:00:15,300 Quindi, lì, importa React da React in modo da poter costruire un componente React valido, importare qualcosa da React Native 4 00:00:15,300 --> 00:00:20,060 come sempre e che qualcosa è anche ciò a cui siamo praticamente abituati, giusto? 5 00:00:20,060 --> 00:00:21,810 Non è mai così sorprendente. 6 00:00:21,840 --> 00:00:23,050 Avremo bisogno 7 00:00:23,370 --> 00:00:32,880 di una vista, probabilmente avremo bisogno di un elenco piatto perché avremo potenzialmente più ordini, un importo infinito 8 00:00:32,880 --> 00:00:43,670 e voglio essere in grado di renderlo e con quello qui, possiamo costruire la schermata dei nostri ordini in questo modo. 9 00:00:43,790 --> 00:00:53,710 Esporterò anche questo ovviamente e lo styling non dovrebbe davvero essere richiesto qui, in realtà non dovremmo nemmeno aver bisogno della vista qui 10 00:00:53,770 --> 00:01:01,570 perché voglio solo produrre il mio elenco di ordini. Quindi, ovviamente, i dati di cui abbiamo bisogno verranno 11 00:01:01,720 --> 00:01:04,350 da Redux, quindi dovremmo importare 12 00:01:04,360 --> 00:01:10,600 utilizzare il selettore da React Redux che ci consente di accedere al negozio Redux. 13 00:01:11,350 --> 00:01:19,330 Quindi qui, possiamo ottenere i nostri ordini con l'aiuto del selettore di utilizzo e usa il selettore ora indica lo stato. ordini e che ovviamente è l'identificatore che ho assegnato qui 14 00:01:19,390 --> 00:01:25,740 negli ordini di riduttori combinati qui, questo ci dà accesso alla porzione di stato gestita 15 00:01:25,810 --> 00:01:29,680 dal riduttore di ordini e lì, abbiamo un'altra 16 00:01:29,680 --> 00:01:34,040 proprietà di ordini che contiene la matrice effettiva di ordini. 17 00:01:34,060 --> 00:01:37,860 Quindi qui ho bisogno di accedere allo stato. ordini. gli ordini alla fine, 18 00:01:37,870 --> 00:01:41,070 che mi dà i miei ordini che sono memorizzati in Redux. 19 00:01:41,110 --> 00:01:48,640 Ora qui, abbiamo solo bisogno di restituire la nostra lista piatta e questo riceve ordini che dovrebbero 20 00:01:48,640 --> 00:01:56,640 essere una matrice e quali sono come dati. Ora un estrattore di chiavi non è richiesto nelle versioni più recenti di React 21 00:01:56,640 --> 00:02:01,520 Native perché ogni ordine se dai un'occhiata al modello ha un ID e le versioni più 22 00:02:02,010 --> 00:02:09,780 recenti di React dovrebbero cercarlo ma per sicurezza, lo aggiungerò qui e renderò l'articolo ora ovviamente dovrebbe contenere una funzione che riceve i dati dell'articolo e che 23 00:02:09,780 --> 00:02:16,440 alla fine restituisce tutto ciò che vogliamo rendere per ordine. Ora un articolo dell'ordine sarà più complesso in futuro, per 24 00:02:16,440 --> 00:02:17,010 ora 25 00:02:17,010 --> 00:02:21,990 emetterò un po 'di testo, di nuovo in modo da avere rapidamente qualcosa sullo schermo che 26 00:02:21,990 --> 00:02:23,670 possiamo vedere prima di perfezionarlo. 27 00:02:24,000 --> 00:02:27,650 Il testo qui per l'articolo dato potrebbe essere e ora diamo 28 00:02:27,660 --> 00:02:32,590 un'occhiata all'ordine, lì abbiamo l'ID, abbiamo gli articoli che sono ancora un altro elenco, 29 00:02:32,580 --> 00:02:32,990 quindi 30 00:02:33,000 --> 00:02:40,150 la cosa più semplice da produrre è semplicemente l'importo. Quindi qui emetterò solo la proprietà dell'importo totale 31 00:02:41,050 --> 00:02:44,380 che il mio ordine ha qui. 32 00:02:44,430 --> 00:02:46,050 Questo è ciò che 33 00:02:46,050 --> 00:02:48,360 ho prodotto nell'elenco piatto, ora abbiamo una schermata 34 00:02:48,360 --> 00:02:55,550 degli ordini di base, ovviamente ora dobbiamo essere in grado di raggiungerlo. Quindi andiamo al navigatore del negozio e importiamo 35 00:02:55,610 --> 00:03:04,740 qui la schermata degli ordini, la schermata degli ordini dalla cartella delle schermate, dalla schermata degli ordini del negozio e ora qui la 36 00:03:05,180 --> 00:03:11,630 cosa importante è che non voglio aggiungerlo a questo navigatore dello stack perché non fa parte di 37 00:03:11,630 --> 00:03:12,590 questo stack, 38 00:03:12,590 --> 00:03:16,490 invece voglio raggiungerlo con un menu, con un menu laterale. 39 00:03:16,730 --> 00:03:19,840 Quindi avremo bisogno di costruire un navigatore dei cassetti. 40 00:03:19,910 --> 00:03:24,430 Ovviamente potresti anche lavorare con le schede se preferisci questo, ma voglio lavorare con un cassetto qui, 41 00:03:24,500 --> 00:03:26,720 quindi abbiamo bisogno di quel navigatore dei cassetti. 42 00:03:26,750 --> 00:03:31,760 Ora la schermata degli ordini, anche se sarà l'unico elemento, dovrebbe essere nel suo stack, 43 00:03:31,850 --> 00:03:34,490 in modo da avere anche un'intestazione lì. 44 00:03:34,490 --> 00:03:45,550 Quindi, creerò un nuovo navigatore ordini qui dove creo un altro navigatore dello stack e lì, l'unica mappatura di cui ho bisogno sono gli ordini che puntano alla 45 00:03:45,550 --> 00:03:53,740 schermata degli ordini, il secondo argomento qui dovrebbe ancora impostare alcune opzioni di navigazione predefinite e userò le stesse opzioni 46 00:03:53,740 --> 00:03:57,640 che faccio qui, quindi prenderò effettivamente questo oggetto, lo taglierò 47 00:03:57,970 --> 00:04:04,660 da qui e lo memorizzerò in una costante separata, opzioni di navigazione predefinite, come questo, questo è 48 00:04:04,700 --> 00:04:07,170 un modello che ho già 49 00:04:08,550 --> 00:04:13,590 usato nel modulo di navigazione perché ora possiamo usare questa costante qui 50 00:04:13,590 --> 00:04:19,830 nel navigatore prodotti per le opzioni di navigazione predefinite e anche qui nel navigatore ordini. 51 00:04:19,830 --> 00:04:26,760 Ora, ovviamente, l'obiettivo è quello di creare un navigatore dei cassetti che chiamerò il navigatore del negozio in generale perché 52 00:04:26,760 --> 00:04:29,160 combina diverse funzionalità del negozio che 53 00:04:29,160 --> 00:04:36,260 potresti dire con l'aiuto della creazione del navigatore dei cassetti. Ora voglio unire queste due pile, il 54 00:04:36,270 --> 00:04:40,410 navigatore dei prodotti e il navigatore degli ordini, quindi 55 00:04:40,410 --> 00:04:48,300 qui abbiamo bisogno dei prodotti con il navigatore dei prodotti e gli ordini che puntano sul navigatore 56 00:04:48,330 --> 00:04:56,160 degli ordini, quindi su questi navigatori dello stack. Voglio anche configurare le mie opzioni di contenuto lì 57 00:04:56,160 --> 00:05:02,280 sul cassetto, questo mi permette ad esempio di impostare il colore della tinta degli elementi quando 58 00:05:02,280 --> 00:05:11,680 sono selezionati e lì voglio impostare il colore della tinta attiva su Colori. primario in modo che siano colorati con il colore primario se sono selezionati. 59 00:05:11,710 --> 00:05:17,710 Ora è il navigatore del negozio che dovrebbe essere restituito qui. Questo da solo non farà il trucco, ma è un 60 00:05:17,710 --> 00:05:18,680 primo passo, ora 61 00:05:18,730 --> 00:05:25,870 prima di aggiungere il pulsante del menu, andiamo alla schermata degli ordini e lì effettivamente aggiungiamo un titolo, quindi aggiungerò lì le opzioni di 62 00:05:25,900 --> 00:05:28,630 navigazione, impostarlo su un oggetto, in questo momento non 63 00:05:28,630 --> 00:05:29,940 abbiamo bisogno di opzioni 64 00:05:29,950 --> 00:05:35,680 dinamiche qui perché voglio solo impostare il titolo dell'intestazione per i tuoi ordini e ora che ci penso, dovremmo 65 00:05:35,680 --> 00:05:36,290 anche 66 00:05:37,060 --> 00:05:38,620 aggiungere questo sullo schermo del 67 00:05:38,710 --> 00:05:42,670 carrello dove non lo sto ancora facendo. Lì voglio anche 68 00:05:42,670 --> 00:05:48,520 impostare questo sullo schermo del carrello, impostarlo sul carrello. 69 00:05:48,520 --> 00:05:51,200 Quindi questo è ora nelle opzioni di navigazione nella schermata 70 00:05:51,220 --> 00:05:57,270 del carrello, questo è nella schermata degli ordini o questo navigatore è impostato. Con tutto ciò impostato, dobbiamo aggiungere questo pulsante di 71 00:05:57,280 --> 00:06:04,000 menu, questa icona di hamburger ad esempio nella schermata di panoramica dei prodotti in cui voglio essere in grado di aprire 72 00:06:04,000 --> 00:06:09,220 il cassetto e andare ai miei ordini. Ora per aggiungerlo lì, andiamo alle opzioni 73 00:06:09,220 --> 00:06:13,780 di navigazione della schermata di panoramica del prodotto che è già dinamica, 74 00:06:13,780 --> 00:06:14,550 il 75 00:06:14,860 --> 00:06:21,070 che è buono e quindi oltre ad aggiungere l'intestazione a destra per questa icona del carrello, aggiungiamo 76 00:06:21,070 --> 00:06:29,100 headerLeft e headerLeft dovrebbe contenere anche i pulsanti di intestazione, ma ovviamente lì , saranno le mie voci di menu, quindi lo 77 00:06:29,220 --> 00:06:37,170 chiamerò così e lì, voglio usare il menu md o il menu ios a seconda della piattaforma su cui siamo in 78 00:06:37,170 --> 00:06:38,910 esecuzione e voglio navigare ovviamente 79 00:06:38,920 --> 00:06:46,150 da nessuna parte, invece con la navigazione prop qui per così dire, voglio chiamare cassetto a levetta che aprirà 80 00:06:46,160 --> 00:06:48,950 il cassetto laterale. Ora la stessa 81 00:06:48,950 --> 00:06:54,920 configurazione è richiesta anche nella schermata degli ordini in modo che possiamo lasciare quella schermata. 82 00:06:55,700 --> 00:07:01,820 Quindi in realtà qui, avremo bisogno di quella configurazione dinamica delle opzioni di navigazione in cui abbiamo 83 00:07:01,820 --> 00:07:09,020 una funzione qui in cui restituiamo il nostro oggetto di configurazione in modo che in là, possiamo anche aggiungere headerLeft con 84 00:07:09,020 --> 00:07:15,170 i pulsanti header, con il nostro menu che attiva / disattiva il cassetto che si basa sui dati 85 00:07:15,170 --> 00:07:22,910 di navigazione qui e, naturalmente, per questo, dobbiamo importare i pulsanti di intestazione, il pulsante di intestazione e l'elemento, quindi alla fine della 86 00:07:22,910 --> 00:07:25,700 schermata di panoramica del prodotto, devo importare 87 00:07:25,700 --> 00:07:30,860 queste cose qui, queste due righe devono essere aggiunte anche alla schermata degli ordini. 88 00:07:30,860 --> 00:07:32,700 Quindi, lasciami aggiungere, aggiungendo 89 00:07:32,840 --> 00:07:39,020 i pulsanti di intestazione e l'importazione degli elementi dai pulsanti di intestazione di navigazione di React e 90 00:07:39,020 --> 00:07:45,300 l'importazione dei pulsanti di intestazione dal nostro componente personalizzato. Ora con questo, se salviamo questo, dovremmo avere un 91 00:07:45,300 --> 00:07:52,410 pulsante di menu qui e lo facciamo, apre il cassetto, possiamo andare agli ordini e qui ricevo un errore 92 00:07:52,890 --> 00:07:55,560 perché nella schermata dell'ordine, ovviamente sto 93 00:07:55,560 --> 00:07:58,400 usando la piattaforma API quindi dovremmo importarlo lì, 94 00:07:58,400 --> 00:08:08,170 facciamolo, aggiungiamo la piattaforma e ora se torniamo indietro, possiamo andare agli ordini e lì possiamo anche tornare indietro e lo stesso è il caso su Android. 95 00:08:10,060 --> 00:08:12,160 Ora, con quello, abbiamo aggiunto il cassetto. 96 00:08:12,160 --> 00:08:15,400 C'è una cosa che voglio aggiungere al cassetto, 97 00:08:15,400 --> 00:08:21,940 ma che non ho mai fatto prima di continuare a lavorare sul mio elenco ordini, non stiamo ancora producendo 98 00:08:22,240 --> 00:08:28,570 nulla perché non stiamo davvero aggiungendo ordini, non abbiamo collegato questo pulsante ordina ora, non stiamo vedendo nulla 99 00:08:28,570 --> 00:08:33,180 che cambi se aggiungiamo qualcosa al carrello, fai clic su Ordina ora una 100 00:08:33,280 --> 00:08:37,810 volta, facendo clic più volte ti darà un errore in questo momento e 101 00:08:37,860 --> 00:08:41,140 poi vedremo quell'ordine qui. Ora dovremo svuotare il 102 00:08:41,140 --> 00:08:45,940 carrello, è un'altra cosa che dobbiamo fare, ma prima di farlo, nel cassetto, voglio anche avere 103 00:08:46,030 --> 00:08:51,340 icone accanto alle mie voci qui e aggiungere queste icone è in realtà molto semplice, vero ' Ho 104 00:08:51,340 --> 00:08:57,640 fatto questo nel modulo di navigazione ma lo faremo ora. Per aggiungere icone, devi solo andare alle schermate che stai 105 00:08:57,640 --> 00:08:59,920 navigando nel tuo cassetto e nel 106 00:08:59,920 --> 00:09:04,990 nostro caso, ovviamente questi due navigatori, quindi questi non sono schermate ma questi due navigatori e 107 00:09:05,440 --> 00:09:11,200 su questi navigatori o se erano schermate , su queste schermate, è possibile impostare le opzioni di navigazione 108 00:09:11,200 --> 00:09:17,230 e, con ciò, non intendo le opzioni di navigazione predefinite impostate per tutte le schermate di quel navigatore, ma 109 00:09:17,230 --> 00:09:23,080 si imposta per questo navigatore se viene utilizzato all'interno di un altro navigatore come è il caso qui. 110 00:09:23,080 --> 00:09:25,020 Quindi possiamo aggiungere qui 111 00:09:25,030 --> 00:09:29,320 le opzioni di navigazione, ancora una volta questo non verrà applicato alle 112 00:09:29,320 --> 00:09:32,550 schermate di questo navigatore, ma invece configurerà questo navigatore 113 00:09:32,740 --> 00:09:39,700 se è una schermata di un altro navigatore e qui il navigatore degli ordini è una schermata del navigatore 114 00:09:39,700 --> 00:09:50,140 del negozio alla fine e lì in queste opzioni di navigazione, possiamo aggiungere una voce dell'icona del cassetto che può essere una funzione che diciamo diciamo la configurazione del 115 00:09:51,150 --> 00:09:56,890 cassetto, questa funzione è chiamata per te dalla navigazione di React e ti dà questa configurazione 116 00:09:56,890 --> 00:10:03,870 del cassetto che ti dice soprattutto qual è il tuo colore di tinta perché qui puoi ora restituire un componente, 117 00:10:03,880 --> 00:10:10,630 come un componente Ionicons per il rendering di un'icona. Per questo devi solo assicurarti di importare Ionicon 118 00:10:11,200 --> 00:10:12,780 da @ expo / 119 00:10:12,790 --> 00:10:16,650 vector-icons, quindi devi aggiungere quell'importazione nel file del navigatore 120 00:10:16,780 --> 00:10:23,770 del negozio e ora con quello aggiunto, se andiamo qui, sto restituendo il mio Ionicon, ora posso 121 00:10:23,770 --> 00:10:24,640 configurarlo 122 00:10:24,850 --> 00:10:30,720 come ho sempre fatto e per quello ancora, possiamo usare l'API della piattaforma che 123 00:10:30,730 --> 00:10:39,340 stiamo già importando qui, se non lo sei, assicurati di farlo. Possiamo usarlo per controllare il sistema operativo e se è 124 00:10:39,790 --> 00:10:43,820 uguale ad Android, allora qui renderò md create come 125 00:10:43,820 --> 00:10:49,820 icona, altrimenti iOS create e questa è solo un'icona che ho scelto in anticipo. 126 00:10:49,850 --> 00:10:56,640 Ora ovviamente, possiamo anche configurare le dimensioni qui e mi atterrò al mio buon vecchio 23 e in aggiunta a ciò, impostare 127 00:10:56,760 --> 00:11:02,130 un colore se lo si desidera e ora ovviamente, che non dovrebbe essere i colori primari 128 00:11:02,190 --> 00:11:07,620 perché quindi questa icona hanno sempre quel colore, invece questo colore dovrebbe essere assegnato dal cassetto che è 129 00:11:07,710 --> 00:11:13,310 la cosa che sa se l'oggetto è selezionato o meno e che cambierà il colore in modo appropriato. 130 00:11:13,380 --> 00:11:16,570 Quindi qui, dovresti accedere a drawer config. TintColor e questo 131 00:11:16,680 --> 00:11:22,110 ti dice quale colore dovrebbe avere al momento e questo colore cambierà a seconda 132 00:11:22,110 --> 00:11:24,330 che sia attualmente selezionato o meno. 133 00:11:25,370 --> 00:11:29,350 Ora è il caso dei miei ordini, mi scusi, 134 00:11:29,540 --> 00:11:30,470 l'icona 135 00:11:30,580 --> 00:11:39,080 qui dovrebbe essere l'elenco md e l'elenco iOS, non creare. Quindi questa è la mia configurazione dell'ordine ora con le icone dell'elenco e ovviamente questa 136 00:11:39,440 --> 00:11:46,130 stessa cosa può essere fatta qui copiandola sul navigatore dei prodotti e lì, voglio usare il carrello md o il carrello iOS, quindi questa 137 00:11:46,130 --> 00:11:54,490 icona del carrello di nuovo e ora questo è quasi pronto per essere utilizzato. Una cosa che devi fare tuttavia è che devi 138 00:11:54,490 --> 00:11:59,500 importare React da React ora in questo file di navigazione perché ora 139 00:11:59,500 --> 00:12:06,610 stai utilizzando componenti con quella sintassi jsx. Come sai, jsx viene 140 00:12:06,610 --> 00:12:14,260 compilato o convertito in React. createElement alla fine e quindi è necessario importare React affinché 141 00:12:14,260 --> 00:12:16,190 questa sintassi funzioni qui. 142 00:12:16,510 --> 00:12:21,850 Ora con questo se torni indietro, hai queste belle icone qui accanto ai tuoi articoli 143 00:12:21,850 --> 00:12:23,230 e sono anche 144 00:12:23,230 --> 00:12:26,020 colorate correttamente, anche qui su Android ovviamente. 145 00:12:26,020 --> 00:12:32,110 Quindi ora che è finito il cassetto laterale, possiamo anche andare alla schermata degli ordini e possiamo persino vedere un 146 00:12:32,110 --> 00:12:32,920 ordine lì. 147 00:12:32,920 --> 00:12:37,450 Tuttavia, in questo momento, il carrello non viene cancellato e quindi se fai clic più volte, 148 00:12:37,450 --> 00:12:42,520 riceverai effettivamente un avviso perché quindi ciò che fai è fare clic su questo troppo velocemente e quindi 149 00:12:42,790 --> 00:12:48,700 creare più ordini con lo stesso pseudo ID univoco in cui noi alla fine usa il timestamp corrente, se fai clic 150 00:12:48,700 --> 00:12:50,770 più volte troppo velocemente è lo 151 00:12:50,860 --> 00:12:56,110 stesso timestamp, ecco perché sta arrivando questo avviso e vorrei cancellare il carrello dopo aver comunque effettuato un ordine. 152 00:12:56,860 --> 00:13:02,050 Quindi assicuriamoci di cancellare il carrello dopo aver effettuato un ordine e quindi, naturalmente, assicuriamo di emettere gli ordini 153 00:13:02,110 --> 00:13:04,930 in un modo migliore di quello che facciamo attualmente.