Ora con le schede aggiunte, ci manca il contenuto nella schermata preferita.
Ora non abbiamo ancora funzionalità per aggiungere preferiti, se facciamo clic sull'icona a forma di stella, che non fa
nulla
e, a proposito, sono consapevole che anche qui mancano
contenuti, aggiungeremo questo dopo.
Quindi fare clic sull'icona a forma di stella non fa ancora nulla e saremo
in grado di farlo
solo un po 'più tardi, comunque voglio popolare un po' di più questa schermata preferita almeno con alcuni pasti
fittizi che stiamo caricando
lì diciamo e almeno con la funzionalità di andare anche a MealDetailScreen lì perché alla fine, l'idea
qui è che abbiamo un elenco di pasti qui, così come
lo abbiamo qui dopo aver selezionato una categoria e che possiamo toccare un pasto per andare alla pagina
dei dettagli, proprio come
possiamo fare nel navigatore dei pasti, quindi nel navigatore dello stack dei pasti dovrei dire e quindi alla
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
per
le nostre funzionalità preferite in questa applicazione, è quello di cui
abbiamo bisogno qui, questo ci darà poi anche un'intestazione che attualmente ci manca anche.
Naturalmente, non è troppo difficile
da implementare, possiamo semplicemente creare un altro navigatore dello stack sopra il nostro tabScreenConfig forse e questo imposterà il navigatore
dello stack per il nostro stack preferito.
Quindi l'oggetto che passiamo qui deve definire tutte le schermate che vogliamo avere in quella
pila e quella sarebbe la schermata dei preferiti stessa con l'elenco dei
nostri pasti preferiti e lì voglio puntare alla schermata dei preferiti e quindi voglio avere un
dettaglio del pasto e indicherò MealDetailScreen e stiamo già usando MealDetailScreen qui nel nostro navigatore dei pasti,
nell'altro navigatore dello stack
ma va
benissimo, puoi usare una stessa schermata in diversi navigatori dello stack,
non c'è niente di sbagliato in quello.
Quindi possiamo usare MealDetailScreen anche qui nel navigatore dello stack dei preferiti e ora voglio solo assicurarmi di copiare anche
le mie opzioni qui, le mie opzioni di navigazione predefinite, questo secondo argomento in realtà
per creare il navigatore dello stack, per il navigatore dei pasti tra i miei preferiti impila anche
il navigatore.
Quindi qui come secondo argomento per creare stack navigator, copio in quell'oggetto in
cui ho impostato le mie opzioni di navigazione predefinite in modo che per questo stack, ho
gli stessi valori predefiniti, ho lo stesso stile di intestazione e quindi, naturalmente, possiamo anche taglia questo
da qui e rimuovilo da qui e archivia l'impostazione predefinita in una costante qui, forse il nostro defaultStackNavOptions, è questo oggetto che imposta lo
stile dell'intestazione e possiamo quindi usare defaultStackNavOptions qui nel nostro stack del navigatore dei pasti
e anche qui nel nostro Preferiti Stack Navigator e lo memorizzerò anche nella costante FavNavigator, ovviamente puoi
nominare questa costante come preferisci.
Ora è quel FavNavigator, quindi
alla fine ho creato il componente Stack Navigator che voglio usare nel mio tabScreenConfig, lì per i pasti stavamo
già usando Stack Navigator, per i preferiti stavo usando la schermata dei preferiti e questo
ora deve cambiare,
ora dovrebbe essere il FavNavigator, in modo che qui usiamo anche uno stack anziché un singolo schermo.
E con quello già, se andiamo ai preferiti, abbiamo il nostro titolo qui, almeno abbiamo un'intestazione che dimostra
già che stiamo usando un navigatore dello stack qui.
Ora, ovviamente, uno schermo non è poi così utile, non è qualcosa che voglio dire qui,
quindi voglio impostare opzioni di navigazione specifiche per lo schermo preferito e possiamo usarlo qui quando creiamo il navigatore
dello stack preferiti con la forma più lunga dove abbiamo impostato la schermata e le opzioni di navigazione per
quella schermata qui o lo facciamo direttamente nel nostro componente, è quello che
ho fatto finora,
è quello che farò anche qui.
Lì possiamo impostare la schermata Preferiti. navigationOpzioni come questa, usa l'oggetto qui,
non abbiamo bisogno della
funzione perché non deriverò il nome in modo dinamico qui e nelle opzioni di navigazione
qui, imposterò semplicemente il titolo dell'intestazione sui tuoi preferiti e, naturalmente, puoi scegliere qualsiasi testo tu voglia qui e se
ora
lo salviamo, ora vediamo il nostro titolo personalizzato qui che è un po 'meglio.
Ora, come ho detto, non abbiamo ancora gli strumenti per conservare i pasti come preferiti, è
qualcosa che faremo tra poco.
Quindi per ora, voglio solo mostrare
alcuni pasti fittizi qui, diciamo i pasti con ID M1 e M2, semplicemente due pasti fittizi e per
questo, possiamo andare alla schermata preferita e invece di visualizzare questa vista qui, nella
fine Voglio visualizzare lo stesso come nella schermata
dei pasti della categoria, a destra, voglio renderizzare un FlatList che quindi rende i miei piatti qui.
L'unica differenza è quale pasto renderò,
quella logica non sarà la stessa perché è diversa per il mio schermo preferito.
Questo sarà comunque lo stesso e poiché riutilizzerò quella logica di creazione dell'elenco e l'unica
cosa che differisce sono i dati che visualizzo, sarebbe logico esternalizzare questo elenco in un componente separato, in modo
da poter riutilizzare il componente nel schermata dei pasti di categoria e nella schermata dei preferiti.
Quindi, nella cartella dei componenti, aggiungerò una lista dei pasti. js file e lì dentro, voglio avere un
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
da React-native e poi qui , possiamo creare il nostro componente dell'elenco
dei pasti dove otteniamo oggetti di scena ed esportiamo che come impostazione predefinita da allora in poi, avremo anche bisogno di alcuni stili
in
modo che possiamo già aggiungere fogli di stile creare qui come questo e ora voglio passare la mia logica di
elenco dalla categoria schermo del pasto in questo nuovo componente. Quindi taglierò l'intero codice jsx che torno
qui nella schermata dei pasti della categoria e lo sposterò qui e lo restituirò nel componente
dell'elenco dei pasti.
Quindi ora qui, restituirò quella
vista e quindi ovviamente dovremo anche importare la vista qui. Ciò significa anche che dobbiamo portare il look, quindi qui questo stile
dello schermo può anche essere tagliato dai pasti di categoria e quindi qui, non abbiamo più bisogno di
un foglio di
stile, possiamo anche sbarazzarci dell'importazione del foglio
di stile, possiamo effettivamente sbarazzarsi di tutte le importazioni di React Native perché non abbiamo più alcun
componente specifico di React Native qui e invece spostarlo nell'elenco dei pasti. Quindi, nel foglio di stile, posso aggiungere questa schermata che ho
appena rimosso e un nome più appropriato quindi probabilmente è elenchi, quindi lo rinominerò, tecnicamente non è
necessario rinominarlo ma ha senso perché ora non è un componente dello schermo più, è
solo il rendering di un elenco che sembra essere l'unica parte sul nostro schermo, ma
questa è una storia diversa. Quindi darò solo un nome a questo elenco, ho la mia FlatList lì dentro.
Ora, naturalmente, i pasti visualizzati che voglio renderizzare, che non funzioneranno più, invece mi aspetto
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
desideri qui e renderizzare elemento del pasto, che manca anche. Per questo nella categoria pasti, possiamo tagliare questo
elemento
del pasto di rendering qui costante, tagliarlo dalla schermata
dei pasti della categoria e spostarlo anche nella nostra lista dei pasti.
Quindi, nel componente dell'elenco dei
pasti, aggiungerò questa costante che contiene questa funzione di rendering degli articoli del pasto che ha tutto ciò di
cui ha bisogno per funzionare tranne una cosa, manca
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
e quello sarà il puntello di
navigazione perché, come ho già detto, il puntello di navigazione è disponibile solo nei
componenti che sono caricati con l'aiuto di un navigatore dalla navigazione React e solo in quello componente,
non nei componenti nidificati.
Quindi il fatto è che la categoria pasti è il componente che stiamo caricando con l'aiuto del navigatore e
se poi utilizziamo l'elenco dei pasti lì dentro che faremo
in un secondo, l'elenco dei pasti non avrà accesso alla navigazione degli oggetti di scena, solo il componente caricato direttamente ha accesso
ma sarà un problema facile da risolvere.
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
dei pasti della categoria e ora l'elenco dei pasti ovviamente ha bisogno di quell'elaboratore di dati con cui stiamo lavorando,
quindi passiamo ai
dati dell'elenco e ciò dovrebbe semplicemente indicare l'array che vogliamo rendere che in questo caso vengono visualizzati
i pasti e
ora, come ho già detto, avremo un problema con il puntello di navigazione,
ma possiamo solo inoltrarlo, possiamo usare la navigazione, aggiungere tale propulsione qui alla lista dei pasti e inoltra la
navigazione dei
puntelli, ecco quanto possiamo inoltrarli facilmente alla lista dei pasti.
Quindi ora nella lista dei pasti, in quel componente, avremo di nuovo un puntello di navigazione
perché lo stiamo inoltrando, stiamo aggiungendo il nostro puntello di navigazione e puntiamo ai dati
che otteniamo sul puntello di
navigazione fornito da React
navigazione, è così che abbiamo di nuovo accesso qui e con ciò, dovremmo avere una configurazione che funzioni, quindi
dovrebbe essere la nostra schermata dei pasti della categoria. Salviamolo e ignoriamo la schermata preferita per
il momento e vediamo solo che il nostro navigatore dello stack qui funziona ancora e sembra
farlo, se lo provo, sicuramente funziona ancora qui come prima. Ora assicuriamoci di usarlo anche nella
schermata preferita.
Quindi qui nella schermata dei preferiti, non abbiamo bisogno di importare nulla da React Native,
invece dobbiamo solo importare il componente dell'elenco dei pasti che abbiamo appena creato dai componenti e quindi l'elenco dei
pasti e semplicemente restituire l'elenco dei pasti e ora la differenza nella categoria la schermata dei
pasti in cui restituiamo anche la lista dei pasti è ovviamente i dati che vogliamo rendere,
la
logica per ricavarli, questa è la differenza
e un'altra differenza tra i
componenti è ovviamente la nostra configurazione delle opzioni di navigazione e il titolo dell'intestazione
che stiamo impostando.
Possiamo sbarazzarci del foglio di stile qui, non ne abbiamo più bisogno qui
nella schermata
preferita e ora i dati che
voglio rendere, dipende dai miei
pasti, quindi importerò i pasti da, ora dai dati fittizi . js file e, come ho già detto, qui dato che non
abbiamo un vero modo di impostare i preferiti, userò solo alcuni preferiti fittizi che trovo.
Quindi qui, i miei pasti preferiti, quello potrebbe essere il mio assortimento di pasti e lì voglio filtrare per due pasti specifici, quindi darò
un'occhiata a ogni singolo
pasto ma tornerò vero solo se il pasto. id è uguale a M1 o se pasto. id è uguale a M2 e questa è
ovviamente solo una logica fittizia in modo che abbiamo qualcosa qui,
lo sostituiremo più tardi una volta che avremo davvero imparato a gestire il nostro stato e come
gestire i preferiti attualmente impostati.
Ora alla lista dei pasti, al nostro componente qui, possiamo inoltrare di
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ì.
Quindi ora dovremmo avere anche alcuni preferiti
e lo facciamo, ne abbiamo
due preferiti, tuttavia se faccio clic su di esso, non siamo definiti non è un oggetto in cui proviamo a chiamare
la navigazione di oggetti di scena e sì, il problema ovviamente è che in l'elenco dei pasti, come ho
già detto, stiamo usando il puntello di navigazione ed è disponibile solo nel componente che
viene caricato direttamente attraverso un navigatore, quindi in questo caso è la schermata preferita e nella categoria pasti, risolviamo
inoltrando la navigazione puntello, ovviamente dobbiamo fare la stessa cosa qui per la nostra schermata preferita, quindi dobbiamo
fornire quel puntello di navigazione qui sulla lista dei pasti e inoltrare la navigazione dei puntelli in modo che quel
puntello di navigazione con il metodo di navigazione sia disponibile nel componente della lista dei pasti anche.
Ora con ciò, se andiamo ai preferiti, siamo davvero in grado di andare alla schermata dei dettagli.
Quindi funziona, è abbastanza decente, molto carino. Come vedi, questi due navigatori dello stack funzionano anche indipendentemente l'uno dall'altro, possiamo essere
nella schermata dei
dettagli in entrambe le pile separatamente, qui sono nella schermata dei dettagli del salmone nella scheda dei pasti e posso
andare al toast hawaii schermata dei dettagli nella scheda dei preferiti. Possiamo tornare qui nella scheda dei pasti e
sono ancora nella pagina dei dettagli di toast hawaii qui nello stack dei preferiti.
Quindi queste due pile funzionano separate l'una dall'altra, totalmente
indipendenti ed è così che dovrebbe essere ed è
così che possiamo riutilizzare un po 'di logica e come possiamo avere pile diverse unite nello stesso navigatore di
schede e anche se
manca ancora della logica , la logica per aggiungere davvero favoriti, questo è un
enorme passo avanti e, si spera, ti mostra il potere della navigazione React e come impostare questo schema di
navigazione comune in cui hai schede e quindi diversi stack nidificati. Manca un modello di navigazione che voglio mostrarti e
che è un
cassetto laterale.