1 00:00:02,400 --> 00:00:06,680 Ora con le schede aggiunte, ci manca il contenuto nella schermata preferita. 2 00:00:06,740 --> 00:00:12,960 Ora non abbiamo ancora funzionalità per aggiungere preferiti, se facciamo clic sull'icona a forma di stella, che non fa 3 00:00:12,960 --> 00:00:13,640 nulla 4 00:00:13,650 --> 00:00:16,370 e, a proposito, sono consapevole che anche qui mancano 5 00:00:16,380 --> 00:00:17,680 contenuti, aggiungeremo questo dopo. 6 00:00:17,880 --> 00:00:22,140 Quindi fare clic sull'icona a forma di stella non fa ancora nulla e saremo 7 00:00:22,140 --> 00:00:23,370 in grado di farlo 8 00:00:23,490 --> 00:00:29,040 solo un po 'più tardi, comunque voglio popolare un po' di più questa schermata preferita almeno con alcuni pasti 9 00:00:29,040 --> 00:00:30,340 fittizi che stiamo caricando 10 00:00:30,480 --> 00:00:35,640 lì diciamo e almeno con la funzionalità di andare anche a MealDetailScreen lì perché alla fine, l'idea 11 00:00:35,640 --> 00:00:39,080 qui è che abbiamo un elenco di pasti qui, così come 12 00:00:39,090 --> 00:00:44,460 lo abbiamo qui dopo aver selezionato una categoria e che possiamo toccare un pasto per andare alla pagina 13 00:00:44,460 --> 00:00:45,620 dei dettagli, proprio come 14 00:00:45,660 --> 00:00:50,940 possiamo fare nel navigatore dei pasti, quindi nel navigatore dello stack dei pasti dovrei dire e quindi alla 15 00:00:50,940 --> 00:00:58,620 fine, ciò di cui abbiamo bisogno per i preferiti, perché la nostra scheda dei preferiti non è una singola schermata ma un altro stack, uno stack 16 00:00:58,620 --> 00:00:59,330 per 17 00:00:59,340 --> 00:01:02,750 le nostre funzionalità preferite in questa applicazione, è quello di cui 18 00:01:02,760 --> 00:01:06,960 abbiamo bisogno qui, questo ci darà poi anche un'intestazione che attualmente ci manca anche. 19 00:01:07,470 --> 00:01:10,020 Naturalmente, non è troppo difficile 20 00:01:10,110 --> 00:01:18,500 da implementare, possiamo semplicemente creare un altro navigatore dello stack sopra il nostro tabScreenConfig forse e questo imposterà il navigatore 21 00:01:18,500 --> 00:01:21,390 dello stack per il nostro stack preferito. 22 00:01:21,530 --> 00:01:26,630 Quindi l'oggetto che passiamo qui deve definire tutte le schermate che vogliamo avere in quella 23 00:01:26,630 --> 00:01:30,830 pila e quella sarebbe la schermata dei preferiti stessa con l'elenco dei 24 00:01:30,830 --> 00:01:36,470 nostri pasti preferiti e lì voglio puntare alla schermata dei preferiti e quindi voglio avere un 25 00:01:36,710 --> 00:01:42,710 dettaglio del pasto e indicherò MealDetailScreen e stiamo già usando MealDetailScreen qui nel nostro navigatore dei pasti, 26 00:01:42,710 --> 00:01:44,000 nell'altro navigatore dello stack 27 00:01:44,030 --> 00:01:45,230 ma va 28 00:01:45,230 --> 00:01:49,030 benissimo, puoi usare una stessa schermata in diversi navigatori dello stack, 29 00:01:49,040 --> 00:01:51,540 non c'è niente di sbagliato in quello. 30 00:01:51,710 --> 00:01:58,340 Quindi possiamo usare MealDetailScreen anche qui nel navigatore dello stack dei preferiti e ora voglio solo assicurarmi di copiare anche 31 00:01:58,340 --> 00:02:03,550 le mie opzioni qui, le mie opzioni di navigazione predefinite, questo secondo argomento in realtà 32 00:02:03,560 --> 00:02:09,170 per creare il navigatore dello stack, per il navigatore dei pasti tra i miei preferiti impila anche 33 00:02:09,170 --> 00:02:10,070 il navigatore. 34 00:02:10,070 --> 00:02:15,680 Quindi qui come secondo argomento per creare stack navigator, copio in quell'oggetto in 35 00:02:15,680 --> 00:02:22,430 cui ho impostato le mie opzioni di navigazione predefinite in modo che per questo stack, ho 36 00:02:22,430 --> 00:02:29,330 gli stessi valori predefiniti, ho lo stesso stile di intestazione e quindi, naturalmente, possiamo anche taglia questo 37 00:02:29,330 --> 00:02:39,100 da qui e rimuovilo da qui e archivia l'impostazione predefinita in una costante qui, forse il nostro defaultStackNavOptions, è questo oggetto che imposta lo 38 00:02:39,330 --> 00:02:45,670 stile dell'intestazione e possiamo quindi usare defaultStackNavOptions qui nel nostro stack del navigatore dei pasti 39 00:02:45,840 --> 00:02:52,800 e anche qui nel nostro Preferiti Stack Navigator e lo memorizzerò anche nella costante FavNavigator, ovviamente puoi 40 00:02:52,800 --> 00:02:55,330 nominare questa costante come preferisci. 41 00:02:55,410 --> 00:02:57,230 Ora è quel FavNavigator, quindi 42 00:02:57,270 --> 00:03:03,890 alla fine ho creato il componente Stack Navigator che voglio usare nel mio tabScreenConfig, lì per i pasti stavamo 43 00:03:03,920 --> 00:03:09,420 già usando Stack Navigator, per i preferiti stavo usando la schermata dei preferiti e questo 44 00:03:09,420 --> 00:03:10,720 ora deve cambiare, 45 00:03:10,720 --> 00:03:16,620 ora dovrebbe essere il FavNavigator, in modo che qui usiamo anche uno stack anziché un singolo schermo. 46 00:03:16,680 --> 00:03:23,220 E con quello già, se andiamo ai preferiti, abbiamo il nostro titolo qui, almeno abbiamo un'intestazione che dimostra 47 00:03:23,220 --> 00:03:27,000 già che stiamo usando un navigatore dello stack qui. 48 00:03:27,080 --> 00:03:31,870 Ora, ovviamente, uno schermo non è poi così utile, non è qualcosa che voglio dire qui, 49 00:03:31,920 --> 00:03:37,500 quindi voglio impostare opzioni di navigazione specifiche per lo schermo preferito e possiamo usarlo qui quando creiamo il navigatore 50 00:03:37,560 --> 00:03:43,290 dello stack preferiti con la forma più lunga dove abbiamo impostato la schermata e le opzioni di navigazione per 51 00:03:43,290 --> 00:03:47,340 quella schermata qui o lo facciamo direttamente nel nostro componente, è quello che 52 00:03:47,370 --> 00:03:48,570 ho fatto finora, 53 00:03:48,600 --> 00:03:50,330 è quello che farò anche qui. 54 00:03:50,340 --> 00:03:55,560 Lì possiamo impostare la schermata Preferiti. navigationOpzioni come questa, usa l'oggetto qui, 55 00:03:55,740 --> 00:03:57,610 non abbiamo bisogno della 56 00:03:57,630 --> 00:04:03,900 funzione perché non deriverò il nome in modo dinamico qui e nelle opzioni di navigazione 57 00:04:03,900 --> 00:04:11,700 qui, imposterò semplicemente il titolo dell'intestazione sui tuoi preferiti e, naturalmente, puoi scegliere qualsiasi testo tu voglia qui e se 58 00:04:11,700 --> 00:04:12,210 ora 59 00:04:12,330 --> 00:04:17,880 lo salviamo, ora vediamo il nostro titolo personalizzato qui che è un po 'meglio. 60 00:04:17,880 --> 00:04:24,090 Ora, come ho detto, non abbiamo ancora gli strumenti per conservare i pasti come preferiti, è 61 00:04:24,090 --> 00:04:26,410 qualcosa che faremo tra poco. 62 00:04:26,430 --> 00:04:29,160 Quindi per ora, voglio solo mostrare 63 00:04:29,160 --> 00:04:36,000 alcuni pasti fittizi qui, diciamo i pasti con ID M1 e M2, semplicemente due pasti fittizi e per 64 00:04:36,000 --> 00:04:41,670 questo, possiamo andare alla schermata preferita e invece di visualizzare questa vista qui, nella 65 00:04:41,670 --> 00:04:45,000 fine Voglio visualizzare lo stesso come nella schermata 66 00:04:45,000 --> 00:04:51,480 dei pasti della categoria, a destra, voglio renderizzare un FlatList che quindi rende i miei piatti qui. 67 00:04:51,480 --> 00:04:53,620 L'unica differenza è quale pasto renderò, 68 00:04:53,640 --> 00:04:58,300 quella logica non sarà la stessa perché è diversa per il mio schermo preferito. 69 00:04:58,320 --> 00:05:03,480 Questo sarà comunque lo stesso e poiché riutilizzerò quella logica di creazione dell'elenco e l'unica 70 00:05:03,480 --> 00:05:09,570 cosa che differisce sono i dati che visualizzo, sarebbe logico esternalizzare questo elenco in un componente separato, in modo 71 00:05:09,750 --> 00:05:15,140 da poter riutilizzare il componente nel schermata dei pasti di categoria e nella schermata dei preferiti. 72 00:05:15,180 --> 00:05:20,970 Quindi, nella cartella dei componenti, aggiungerò una lista dei pasti. js file e lì dentro, voglio avere un 73 00:05:21,000 --> 00:05:30,210 componente React, quindi importare React da React e avremo anche bisogno di importare FlatList da React-native e ovviamente avremo anche bisogno di importare il foglio di stile 74 00:05:30,210 --> 00:05:34,470 da React-native e poi qui , possiamo creare il nostro componente dell'elenco 75 00:05:34,470 --> 00:05:42,500 dei pasti dove otteniamo oggetti di scena ed esportiamo che come impostazione predefinita da allora in poi, avremo anche bisogno di alcuni stili 76 00:05:42,500 --> 00:05:43,180 in 77 00:05:43,190 --> 00:05:49,940 modo che possiamo già aggiungere fogli di stile creare qui come questo e ora voglio passare la mia logica di 78 00:05:49,940 --> 00:05:56,690 elenco dalla categoria schermo del pasto in questo nuovo componente. Quindi taglierò l'intero codice jsx che torno 79 00:05:56,930 --> 00:06:04,640 qui nella schermata dei pasti della categoria e lo sposterò qui e lo restituirò nel componente 80 00:06:04,910 --> 00:06:06,380 dell'elenco dei pasti. 81 00:06:06,380 --> 00:06:08,720 Quindi ora qui, restituirò quella 82 00:06:08,720 --> 00:06:16,000 vista e quindi ovviamente dovremo anche importare la vista qui. Ciò significa anche che dobbiamo portare il look, quindi qui questo stile 83 00:06:16,000 --> 00:06:21,340 dello schermo può anche essere tagliato dai pasti di categoria e quindi qui, non abbiamo più bisogno di 84 00:06:21,340 --> 00:06:22,370 un foglio di 85 00:06:22,480 --> 00:06:24,700 stile, possiamo anche sbarazzarci dell'importazione del foglio 86 00:06:24,700 --> 00:06:29,650 di stile, possiamo effettivamente sbarazzarsi di tutte le importazioni di React Native perché non abbiamo più alcun 87 00:06:29,680 --> 00:06:37,000 componente specifico di React Native qui e invece spostarlo nell'elenco dei pasti. Quindi, nel foglio di stile, posso aggiungere questa schermata che ho 88 00:06:37,000 --> 00:06:42,540 appena rimosso e un nome più appropriato quindi probabilmente è elenchi, quindi lo rinominerò, tecnicamente non è 89 00:06:42,610 --> 00:06:47,590 necessario rinominarlo ma ha senso perché ora non è un componente dello schermo più, è 90 00:06:47,590 --> 00:06:52,570 solo il rendering di un elenco che sembra essere l'unica parte sul nostro schermo, ma 91 00:06:52,570 --> 00:06:56,590 questa è una storia diversa. Quindi darò solo un nome a questo elenco, ho la mia FlatList lì dentro. 92 00:06:57,960 --> 00:07:02,240 Ora, naturalmente, i pasti visualizzati che voglio renderizzare, che non funzioneranno più, invece mi aspetto 93 00:07:02,240 --> 00:07:09,170 semplicemente di ottenere alcuni dati dai miei oggetti di scena qui, forse dai un nome ai dati dell'elenco, puoi ovviamente scegliere qualsiasi nome che 94 00:07:09,170 --> 00:07:15,380 desideri qui e renderizzare elemento del pasto, che manca anche. Per questo nella categoria pasti, possiamo tagliare questo 95 00:07:16,190 --> 00:07:17,030 elemento 96 00:07:17,040 --> 00:07:20,570 del pasto di rendering qui costante, tagliarlo dalla schermata 97 00:07:20,570 --> 00:07:25,250 dei pasti della categoria e spostarlo anche nella nostra lista dei pasti. 98 00:07:25,250 --> 00:07:27,240 Quindi, nel componente dell'elenco dei 99 00:07:27,290 --> 00:07:33,890 pasti, aggiungerò questa costante che contiene questa funzione di rendering degli articoli del pasto che ha tutto ciò di 100 00:07:34,160 --> 00:07:37,650 cui ha bisogno per funzionare tranne una cosa, manca 101 00:07:37,760 --> 00:07:49,160 l'importazione degli articoli del pasto, quindi dobbiamo importare l'articolo del pasto. / MealItem, quindi dal componente dell'articolo pasto. Un'altra cosa mancherà qui anche nel componente dell'elenco dei pasti 102 00:07:49,160 --> 00:07:51,470 e quello sarà il puntello di 103 00:07:51,470 --> 00:07:56,300 navigazione perché, come ho già detto, il puntello di navigazione è disponibile solo nei 104 00:07:56,300 --> 00:08:02,390 componenti che sono caricati con l'aiuto di un navigatore dalla navigazione React e solo in quello componente, 105 00:08:02,420 --> 00:08:04,100 non nei componenti nidificati. 106 00:08:04,100 --> 00:08:09,620 Quindi il fatto è che la categoria pasti è il componente che stiamo caricando con l'aiuto del navigatore e 107 00:08:09,620 --> 00:08:12,630 se poi utilizziamo l'elenco dei pasti lì dentro che faremo 108 00:08:12,690 --> 00:08:18,920 in un secondo, l'elenco dei pasti non avrà accesso alla navigazione degli oggetti di scena, solo il componente caricato direttamente ha accesso 109 00:08:19,400 --> 00:08:21,790 ma sarà un problema facile da risolvere. 110 00:08:21,890 --> 00:08:30,530 Prima di tutto, tuttavia, importiamo l'elenco dei pasti qui dal componente dell'elenco dei pasti e restituiamo l'elenco dei pasti qui nella componente 111 00:08:30,650 --> 00:08:38,690 dei pasti della categoria e ora l'elenco dei pasti ovviamente ha bisogno di quell'elaboratore di dati con cui stiamo lavorando, 112 00:08:38,690 --> 00:08:39,920 quindi passiamo ai 113 00:08:39,920 --> 00:08:46,900 dati dell'elenco e ciò dovrebbe semplicemente indicare l'array che vogliamo rendere che in questo caso vengono visualizzati 114 00:08:46,900 --> 00:08:48,130 i pasti e 115 00:08:48,140 --> 00:08:53,110 ora, come ho già detto, avremo un problema con il puntello di navigazione, 116 00:08:53,260 --> 00:09:00,760 ma possiamo solo inoltrarlo, possiamo usare la navigazione, aggiungere tale propulsione qui alla lista dei pasti e inoltra la 117 00:09:00,790 --> 00:09:01,960 navigazione dei 118 00:09:01,960 --> 00:09:06,170 puntelli, ecco quanto possiamo inoltrarli facilmente alla lista dei pasti. 119 00:09:06,200 --> 00:09:11,660 Quindi ora nella lista dei pasti, in quel componente, avremo di nuovo un puntello di navigazione 120 00:09:11,660 --> 00:09:16,940 perché lo stiamo inoltrando, stiamo aggiungendo il nostro puntello di navigazione e puntiamo ai dati 121 00:09:16,940 --> 00:09:18,810 che otteniamo sul puntello di 122 00:09:18,890 --> 00:09:20,480 navigazione fornito da React 123 00:09:20,540 --> 00:09:26,850 navigazione, è così che abbiamo di nuovo accesso qui e con ciò, dovremmo avere una configurazione che funzioni, quindi 124 00:09:27,240 --> 00:09:33,570 dovrebbe essere la nostra schermata dei pasti della categoria. Salviamolo e ignoriamo la schermata preferita per 125 00:09:33,570 --> 00:09:40,110 il momento e vediamo solo che il nostro navigatore dello stack qui funziona ancora e sembra 126 00:09:40,160 --> 00:09:48,820 farlo, se lo provo, sicuramente funziona ancora qui come prima. Ora assicuriamoci di usarlo anche nella 127 00:09:48,820 --> 00:09:50,620 schermata preferita. 128 00:09:50,620 --> 00:09:55,320 Quindi qui nella schermata dei preferiti, non abbiamo bisogno di importare nulla da React Native, 129 00:09:55,330 --> 00:10:01,270 invece dobbiamo solo importare il componente dell'elenco dei pasti che abbiamo appena creato dai componenti e quindi l'elenco dei 130 00:10:01,600 --> 00:10:06,670 pasti e semplicemente restituire l'elenco dei pasti e ora la differenza nella categoria la schermata dei 131 00:10:06,730 --> 00:10:11,500 pasti in cui restituiamo anche la lista dei pasti è ovviamente i dati che vogliamo rendere, 132 00:10:11,510 --> 00:10:12,150 la 133 00:10:12,190 --> 00:10:14,410 logica per ricavarli, questa è la differenza 134 00:10:14,410 --> 00:10:15,880 e un'altra differenza tra i 135 00:10:15,880 --> 00:10:20,250 componenti è ovviamente la nostra configurazione delle opzioni di navigazione e il titolo dell'intestazione 136 00:10:20,260 --> 00:10:21,450 che stiamo impostando. 137 00:10:22,030 --> 00:10:26,680 Possiamo sbarazzarci del foglio di stile qui, non ne abbiamo più bisogno qui 138 00:10:26,680 --> 00:10:27,820 nella schermata 139 00:10:27,970 --> 00:10:30,010 preferita e ora i dati che 140 00:10:30,100 --> 00:10:31,960 voglio rendere, dipende dai miei 141 00:10:34,440 --> 00:10:42,060 pasti, quindi importerò i pasti da, ora dai dati fittizi . js file e, come ho già detto, qui dato che non 142 00:10:42,080 --> 00:10:47,120 abbiamo un vero modo di impostare i preferiti, userò solo alcuni preferiti fittizi che trovo. 143 00:10:47,160 --> 00:10:55,710 Quindi qui, i miei pasti preferiti, quello potrebbe essere il mio assortimento di pasti e lì voglio filtrare per due pasti specifici, quindi darò 144 00:10:55,860 --> 00:10:57,500 un'occhiata a ogni singolo 145 00:10:57,540 --> 00:11:05,510 pasto ma tornerò vero solo se il pasto. id è uguale a M1 o se pasto. id è uguale a M2 e questa è 146 00:11:05,520 --> 00:11:09,480 ovviamente solo una logica fittizia in modo che abbiamo qualcosa qui, 147 00:11:09,600 --> 00:11:15,330 lo sostituiremo più tardi una volta che avremo davvero imparato a gestire il nostro stato e come 148 00:11:15,330 --> 00:11:17,580 gestire i preferiti attualmente impostati. 149 00:11:17,610 --> 00:11:23,730 Ora alla lista dei pasti, al nostro componente qui, possiamo inoltrare di 150 00:11:23,820 --> 00:11:36,840 nuovo il puntello dei dati della lista di cui abbiamo bisogno lì, quindi possiamo inoltrare i dati della lista e impostare questo uguale ai pasti preferiti, proprio così. 151 00:11:36,850 --> 00:11:38,980 Quindi ora dovremmo avere anche alcuni preferiti 152 00:11:39,010 --> 00:11:40,990 e lo facciamo, ne abbiamo 153 00:11:40,990 --> 00:11:47,440 due preferiti, tuttavia se faccio clic su di esso, non siamo definiti non è un oggetto in cui proviamo a chiamare 154 00:11:48,670 --> 00:11:54,520 la navigazione di oggetti di scena e sì, il problema ovviamente è che in l'elenco dei pasti, come ho 155 00:11:54,550 --> 00:11:59,560 già detto, stiamo usando il puntello di navigazione ed è disponibile solo nel componente che 156 00:11:59,590 --> 00:12:05,440 viene caricato direttamente attraverso un navigatore, quindi in questo caso è la schermata preferita e nella categoria pasti, risolviamo 157 00:12:05,440 --> 00:12:11,080 inoltrando la navigazione puntello, ovviamente dobbiamo fare la stessa cosa qui per la nostra schermata preferita, quindi dobbiamo 158 00:12:11,080 --> 00:12:17,170 fornire quel puntello di navigazione qui sulla lista dei pasti e inoltrare la navigazione dei puntelli in modo che quel 159 00:12:17,170 --> 00:12:22,800 puntello di navigazione con il metodo di navigazione sia disponibile nel componente della lista dei pasti anche. 160 00:12:22,870 --> 00:12:29,940 Ora con ciò, se andiamo ai preferiti, siamo davvero in grado di andare alla schermata dei dettagli. 161 00:12:30,130 --> 00:12:37,690 Quindi funziona, è abbastanza decente, molto carino. Come vedi, questi due navigatori dello stack funzionano anche indipendentemente l'uno dall'altro, possiamo essere 162 00:12:37,720 --> 00:12:38,700 nella schermata dei 163 00:12:38,700 --> 00:12:44,200 dettagli in entrambe le pile separatamente, qui sono nella schermata dei dettagli del salmone nella scheda dei pasti e posso 164 00:12:44,470 --> 00:12:50,410 andare al toast hawaii schermata dei dettagli nella scheda dei preferiti. Possiamo tornare qui nella scheda dei pasti e 165 00:12:50,530 --> 00:12:54,840 sono ancora nella pagina dei dettagli di toast hawaii qui nello stack dei preferiti. 166 00:12:54,940 --> 00:12:57,670 Quindi queste due pile funzionano separate l'una dall'altra, totalmente 167 00:12:57,700 --> 00:13:00,350 indipendenti ed è così che dovrebbe essere ed è 168 00:13:00,610 --> 00:13:06,130 così che possiamo riutilizzare un po 'di logica e come possiamo avere pile diverse unite nello stesso navigatore di 169 00:13:06,130 --> 00:13:07,760 schede e anche se 170 00:13:07,810 --> 00:13:11,900 manca ancora della logica , la logica per aggiungere davvero favoriti, questo è un 171 00:13:11,950 --> 00:13:17,620 enorme passo avanti e, si spera, ti mostra il potere della navigazione React e come impostare questo schema di 172 00:13:17,620 --> 00:13:24,490 navigazione comune in cui hai schede e quindi diversi stack nidificati. Manca un modello di navigazione che voglio mostrarti e 173 00:13:24,490 --> 00:13:25,920 che è un 174 00:13:26,080 --> 00:13:27,210 cassetto laterale.