Cominciamo cambiando l'icona a forma di stella
in base al fatto che questa sia una delle preferite o meno,
voglio avere quella stella piena solo se è una delle preferite e una stella vuota se non lo è.
Quindi alla fine nella schermata dei dettagli del pasto, dobbiamo scambiare quell'icona che stiamo visualizzando qui in
base allo stato preferito di questo pasto che abbiamo caricato qui. Ancora una volta, il problema qui è che
possiamo scoprire se quel pasto è il preferito o meno in modo molto semplice nella funzione componente
ma non proprio nelle opzioni di navigazione.
Quindi, di nuovo, avremo bisogno di parametri per comunicare tra questi due, ma nel complesso, non è troppo difficile.
Quello che voglio fare qui è che voglio ottenere i miei pasti preferiti con l'aiuto del selettore d'uso nella funzione del componente della schermata dei dettagli dei
pasti con l'aiuto di stato e quindi di stato. pasti. pasti preferiti, quindi voglio
ottenere tutti i miei pasti preferiti e ora voglio semplicemente controllare se quel
pasto fa parte dei pasti preferiti e in realtà possiamo quindi perfezionarlo e persino nominare questo pasto corrente è preferito e nel
selettore non solo tornare i pasti preferiti ma aggiungiamo un po 'più di logica e aggiungiamo semplicemente
un segno di spunta in cui chiamiamo alcuni che è anche
un metodo incorporato che restituisce vero se la condizione che stiamo per specificare è vera per almeno un
elemento in quello array e lì, controllo ogni pasto presente, se l'ID del pasto è uguale all'ID del pasto che recupero qui e quindi devo scambiare le righe.
Quindi qui, ottengo il pasto del pasto in cui stiamo caricando nella schermata dei dettagli e
quindi controllo i miei pasti preferiti, se l'ID del pasto fa parte di essi, il che significherebbe che questo pasto è parte dei nostri preferiti.
Quindi, con questo, abbiamo questo pasto attuale come informazione preferita, ora dobbiamo passarlo alle opzioni di
navigazione e, di nuovo, possiamo farlo con effetto d'uso, forse laggiù. Proprio come prima, fornisci una funzione qui in una
serie di dipendenze, nella funzione qui imposterò i parametri di navigazione set props per unire più dati nei miei parametri e questo
è forse il parametro is fav, il nome dipende da te, che detiene il pasto corrente è il
valore preferito in modo che quel valore che abbiamo appena derivato e ora una dipendenza da
quella funzione, di quell'uso dell'effetto chiamata voglio dire è ovviamente il pasto corrente è il preferito,
quando ciò cambia, voglio inoltrare le nuove informazioni ai parametri e quindi all'intestazione, altrimenti questo effetto non dovrebbe essere eseguito nuovamente.
Quindi ora torniamo alle opzioni di navigazione, possiamo recuperare quelle informazioni qui, i preferiti
possono essere recuperati da navigationData. naviga con l'aiuto di get param e lì ho
chiamato questo è fav, eccolo qui, quindi è questo il nome
con cui possiamo recuperarlo.
Ora abbiamo le informazioni preferite nell'intestazione e ora possiamo usarle per visualizzare qui un'icona
diversa.
Quindi, invece di rendere sempre la stella iOS, avrò un'espressione dinamica qui e controllerò se il preferito è
vero, se lo è,
quindi voglio usare la stella iOS che è questa stella di campo, se
non lo
è, io ' Renderò il contorno di una stella iOS e
sarà una stella vuota.
Con ciò, speriamo di avere un setup che funzioni come previsto.
Se vado agli spaghetti, ora
questa è una stella vuota e se faccio clic
su questa, è una stella piena e fa parte dei preferiti.
Se poi vado alla schermata dei dettagli qui, vedi che ci vuole un po 'prima che la
stella sia compilata anche qui, dovremo risolvere questo problema. Se ora faccio clic qui e torniamo ai pasti, lì
viene anche aggiornato e questa è la magia di Redux, aggiorna una parte dell'applicazione se qualcosa correlato cambia in un'altra
parte, è esattamente come dovrebbe comportarsi qui. Quindi in genere funziona, l'unica
cosa che non era troppo bella è che questa stella qui inizialmente è vuota e si riempie solo
dopo che questo è stato caricato, quindi
possiamo sistemarlo ma a parte questo, funziona come dovrebbe. Ora per riparare questa stella inizialmente vuota, possiamo ancora
usare una
soluzione alternativa che ho spiegato in precedenza per i dati iniziali dell'intestazione.
Non vogliamo aspettare che il primo
rendering finisca, invece dovremmo passare questi dati iniziali a questo componente quando ci navighiamo.
Quindi è di nuovo il momento per la lista dei pasti in cui abbiamo questa azione di
navigazione di inoltrare anche questa è la chiave fav, quindi questa chiave che ho cercato di estrarre qui nella schermata dei
dettagli del pasto laggiù, get param è fav. Voglio passare il valore corrente quando carichiamo questo componente,
quando carichiamo questa schermata qui dall'elenco dei pasti che è il componente che
innesca quella
navigazione ai dettagli del pasto e, naturalmente, itemData. l'articolo è un singolo pasto ma che non contiene informazioni sul fatto che faccia parte
o meno dei
nostri preferiti, ma ovviamente possiamo scoprire se è così o no. Nell'elenco dei pasti,
possiamo anche accedere al negozio Redux, non solo dai componenti dello schermo.
Quindi qui posso anche usare il selettore di React Redux in questo modo e quindi nel mio componente qui, posso ottenere i miei pasti preferiti
con l'aiuto del selettore di utilizzo dove ottengo il mio stato e quindi ritorno. pasti puntano i pasti preferiti per ottenere tutti i miei pasti preferiti e
ora quando eseguiamo il rendering di un
singolo elemento del pasto, possiamo usarlo per scoprire se quell'elemento del pasto fa parte dei
nostri preferiti. A proposito,
non puoi usare il selettore lì dentro,
che non sarebbe un uso valido perché devi usare gli hook di React solo al livello
principale della funzione del componente, non nelle funzioni nidificate o nidificate se
blocchi o qualcosa del genere, quindi l'uso
del selettore di utilizzo qui non è consentito ma possiamo usare i nostri pasti preferiti lì ovviamente
e quindi qui, possiamo scoprire se questo è un preferito semplicemente controllando i pasti preferiti e cercando il pasto in cui il suo ID corrisponde all'elementoDati
.
articolo.
id, quindi l'ID del pasto che stiamo attualmente visualizzando. Pertanto, il preferito conterrà l'oggetto che abbiamo trovato lì,
in alternativa ne utilizziamo alcuni qui che è un metodo Javascript incorporato che restituirà vero se qualsiasi elemento
nei pasti preferiti corrisponde a questa condizione.
Quindi, se il preferito è vero, sappiamo che questo articolo è un preferito e quindi possiamo usare il
preferito come valore per è fav che passiamo come parametro iniziale alla schermata dei dettagli
del pasto e ora questa stella tremolante che inizialmente è vuota dovrebbe essere andato.
Ora, se lo segnalo come preferito qui e lascio questo e torno, è compilato
fin
dall'inizio, anche sullo schermo preferito ovviamente. Ecco, questo è il modo in cui possiamo lavorare
con i preferiti, ora assicuriamoci di mostrare
un testo fittizio qui sulla schermata dei preferiti nel caso in cui non abbiamo dati da
visualizzare altrimenti e, successivamente, prendiamoci
cura dei nostri filtri.