Quindi vogliamo trovare i pasti che rientrano nella categoria che abbiamo selezionato, quindi in realtà nella componente della schermata
dei pasti
della categoria, non siamo realmente interessati alla categoria selezionata ma siamo molto interessati ai pasti che
appartengono a quella categoria. Ora, per
questo, possiamo prima di tutto importare il nostro array di pasti perché contiene tutti i possibili
pasti che abbiamo e ora vogliamo filtrare quelli che hanno effettivamente l'ID categoria che abbiamo
selezionato lì, array ID categoria che ogni pasto ha. Vedrai nei dati fittizi che ogni pasto ha questa matrice di
ID categoria a
cui appartiene, quindi è quello che useremo per filtrare.
Quindi nella schermata dei pasti della categoria, vogliamo trovare i pasti che appartengono a quella categoria che abbiamo selezionato e li
memorizzerò in un pasto visualizzato con nome costante, il nome spetta
ovviamente a te e lì, guarderò il mio pasti, quindi è l'intero array di
pasti e utilizza il metodo di filtro che Javascript offre per eseguire una funzione su ogni pasto in quell'array
in cui riceviamo automaticamente il pasto come argomento e dove dobbiamo tornare veri se è uno dei pasti
che vogliamo da mantenere o falso se è uno dei pasti che non vogliamo
conservare e vogliamo conservare tutti i pasti in cui la proprietà ID categoria di quel pasto che stiamo guardando contiene l'ID
categoria che abbiamo selezionato qui.
Quindi qui, restituirò vero se l'indice degli ID categoria di pasto di cui è anche un metodo Javascript, l'ID gatto che abbiamo estratto dai parametri del
percorso, se è maggiore o uguale a zero perché sarà meno uno se l'ID categoria non
è parte degli ID di categoria, se è zero o maggiore, allora sappiamo che questo pasto ha questo
ID di categoria nella sua matrice di ID di categoria e questo ci darà una matrice di pasti
visualizzati per quella categoria selezionata, ora è quello
che vogliamo produrre qui. Ora per questo, ho la
mia vista qui e in quella vista, voglio di nuovo rendere un elenco e ora sarà un elenco
e non una griglia, quindi invece del pulsante di cui non avremo più bisogno, importerò FlatList qui e quindi renderizza
la mia FlatList in questo modo
e ora lì i dati che inserisco ovviamente sono la mia matrice di pasti visualizzata perché sono
i pasti che voglio rendere sullo schermo.
Ora, come accennato in precedenza, le versioni moderne di React Native cercano automaticamente il campo ID in un pasto per usarlo come chiave
in FlatList, se stai usando una versione precedente o anche solo per esercitarti di nuovo, aggiungerò un estrattore di chiavi qui dove ottengo l'oggetto e
l'indice e so che ad ogni pasto, avrò un campo ID perché è quello che abbiamo impostato qui nel
modello e che sarà quello che uso come chiave nel mio elenco, quindi
lo userò qui nell'estrattore di chiavi.
Più importante dell'estrattore di chiavi, tuttavia, è l'elemento di rendering che ovviamente dovrebbe puntare
a una funzione che usiamo per eseguire il rendering di un singolo elemento in quell'elenco e lì, come prima, imposterò una nuova funzione, lo farò
qui all'interno della mia funzione componente in modo che io possa usare oggetti di scena e darò un nome a questo oggetto del pasto di
rendering, il nome dipende totalmente da te. Lì, otterrò alcuni dati dell'articolo, lo so perché
l'elenco semplice ci passa come oggetto dati articolo in questa funzione e lì dentro, dobbiamo restituire un codice jsx
che dovrebbe visualizzare un articolo pasto e lì renderò un visualizzare e per il momento, quindi semplicemente un componente di
testo lì dentro dove voglio produrre itemData. articolo. titolo, quindi solo il nome del pasto per
ora, in seguito visualizzeremo anche l'immagine lì, ma per ora, questo lo farà e ora renderò l'elemento del
pasto è quello che uso qui come l'elemento di rendering della funzione dovrebbe puntare a. Questo dovrebbe rendere un elenco di base dei
pasti, vediamo se funziona. Se lo salviamo e ora selezioniamo diciamo italiano, vedo spaghetti al pomodoro,
non sembra male.
Veloce e facile, vediamo quattro pasti e hamburger, vediamo l'hamburger classico, leggero e delizioso, vediamo
due ricette, quindi sembra che funzioni, sembra che le ricette siano selezionate in base alla categoria
che abbiamo scelto ed è ovviamente fantastico. Ora è di nuovo il momento di lavorare un po 'sullo stile perché non sono
sicuro di te ma penso che possiamo migliorarlo un po'.