Come possiamo risolvere quel problema di cui qui abbiamo bisogno per trovare un pasto specifico e non possiamo davvero usare il
nostro selettore qui nelle opzioni di navigazione?
Ora ci sono due possibili correzioni: la correzione numero uno è che usiamo di nuovo i vecchi parametri per
comunicare tra il componente e le
opzioni di navigazione, come ho mostrato nel modulo di navigazione. Qui nel componente, stiamo caricando il nostro pasto, quindi ovviamente
qui possiamo usare i parametri di navigazione dei puntelli e ora impostare i parametri su un nuovo valore qui e ora possiamo usare i parametri per
inoltrare il pasto selezionato o il suo titolo all'intestazione e qualunque cosa tu abbia impostato qui è che i parametri
saranno uniti ai parametri esistenti, quindi questo non li sovrascriverà, quindi non sovrascriverai il tuo pasto,
se ciò che stai recuperando qui, sarà ancora lì, sei solo aggiungendo qualcosa di
nuovo, hai la precedenza su un parametro solo se esiste già nei parametri.
Quindi qui, potremmo aggiungere la chiave del titolo del pasto e impostarlo sul pasto selezionato. titolo.
Ora questo significa che ho inviato questi parametri alla mia intestazione quando questo componente viene visualizzato alla fine.
Ora poiché questo cambierà gli oggetti di scena, di solito finiremo in
un ciclo infinito, quindi per romperlo, useremo l'effetto use qui come
l'ho mostrato nel modulo di navigazione e lo facciamo effettivamente all'interno dell'effetto use.
Quindi qui possiamo usare use effect e come
dipendenza, per ora specificherò un array vuoto e quindi impostare i parametri qui all'interno della funzione use effect e
non avrò
un array vuoto qui, invece la mia dipendenza qui è la mia selezionata pasto.
Quando ciò cambia, voglio inoltrare le nuove informazioni all'intestazione. Ora vedremo se funziona, andiamo all'intestazione e
ora
possiamo recuperarlo dai parametri.
Quindi qui ho il titolo del mio
pasto, posso ottenerlo con navigationData. navigazione. Titolo del pasto getParam, quello era
il nome che ho scelto quando ho impostato i parametri qui.
Ora con il titolo
del pasto selezionato qui, possiamo impostare il titolo dell'intestazione sul titolo del pasto e commentare questa riga perché
non funzionerà comunque e proviamo.
Salviamo questo e andiamo alla pagina dei dettagli e mentre
funziona, vedrai un problema. Quando questo viene caricato, inizialmente non esiste un titolo e
questo compare solo dopo un po '.
Quindi solo dopo che questo è stato completamente caricato, vediamo quel pop del titolo in
cui non è troppo bello e
la ragione di ciò è semplicemente che la nostra logica qui funziona ma poiché l'effetto use viene
eseguito dopo il rendering del componente per la prima volta, aspettiamo per il rendering del componente per
la prima volta fino a quando non inviamo i parametri al titolo e ciò significa che quando questa transizione è
ancora in esecuzione e il rendering non è stato completamente completato, non stiamo davvero mostrando quel titolo.
Ecco perché questa potrebbe non essere la
soluzione ottimale qui e lo commenterò. Una soluzione migliore qui, per quanto economica
possa sembrare ma che è anche una soluzione che puoi spesso usare, è semplicemente inoltrare il titolo
di cui avremo bisogno dall'interno del componente da cui provieni, in modo da caricarlo quando sei nel componente
che andrà a questo componente e lo invierai a questo componente prima che sia caricato.
Quindi inviamo i dati in anticipo e veniamo dalla schermata dei preferiti
o dalla schermata dei pasti di categoria. Lì, stiamo alla fine toccando un elemento nell'elenco dei pasti e in entrambi gli
elementi, in entrambi i componenti, la schermata preferita e la schermata dei pasti di categoria, stiamo usando
l'elenco dei pasti che è buono perché ciò significa che possiamo andare all'elenco dei pasti qui e lì, abbiamo questa azione di navigazione e ora
semplicemente oltre a passare l'ID del pasto, sarebbe bene se qui passassimo già il titolo del pasto perché qui lo abbiamo disponibile, giusto?
itemData. articolo. titolo, questo è il nostro titolo del pasto. Fornendolo semplicemente qui, risolviamo tutti
i problemi che abbiamo sull'altro schermo, quindi questo è sicuramente l'approccio che vogliamo usare qui.
Quindi impostando quel parametro qui sul componente in cui attiviamo l'azione di navigazione sulla pagina dei dettagli del pasto,
abbiamo risolto questo problema perché ora vedi il titolo è lì fin dall'inizio e non abbiamo alcun problema e lo
stesso ovviamente anche su Android se ci proviamo. Il mio emulatore è solo un
po 'lento ma generalmente lo puoi vedere anche lì. Quindi è così che possiamo lavorare con i dati nell'intestazione
quando ne abbiamo bisogno da Redux e con quello, abbiamo un primo stato solido, siamo in grado di usare
i nostri dati Redux. Ciò che non siamo davvero in grado di
fare è cambiarlo, quindi questo è il prossimo passo, vogliamo aggiungere un po 'di logica in modo da poter cambiare i dati, che possiamo
contrassegnare i preferiti e che possiamo filtrare i nostri dati.