Ora sai come possiamo andare alla pagina dei dettagli ovviamente, è qualcosa che abbiamo
fatto prima quando siamo passati dalla pagina delle categorie alla pagina dei pasti della categoria. Quindi possiamo usare lo stesso approccio qui e
ovviamente sentiti libero
di mettere in pausa il video a questo punto e farlo
da solo, è assolutamente qualcosa che puoi fare qui come pratica. Ovviamente facciamo anche insieme.
Quindi nella schermata dei pasti della categoria, quando selezioniamo un pasto, su Seleziona pasto, questa funzione dovrebbe attivarsi
perché stiamo passando in questa funzione attraverso Selezione pasto all'elemento pasto e lì, lo leghiamo alla stampa,
sull'opacità tangibile qui, in modo
che dovrebbe sparare su un pasto selezionato e quindi nella schermata dei pasti di
categoria, in questa funzione qui, possiamo navigare. Ora da quando ho definito questa funzione di rendering del
pasto in cui eseguo il rendering del mio pasto all'interno del mio componente, ho accesso ai puntelli e lì, poiché la schermata
del pasto di categoria è il nostro componente che cariciamo con l'aiuto della navigazione, posso accedere alla proprietà di navigazione e il metodo di
navigazione e hai appreso che lì, ora possiamo passare il nome del percorso dove vogliamo andare e che sarebbe il dettaglio del
pasto, quindi il nome del percorso che abbiamo impostato nel navigatore dei pasti, questo nome qui, caricherà il pagina dei dettagli del pasto.
Ora dovremo inoltrare alcuni dati lì e i dati che voglio inoltrare qui ovviamente sono l'ID del pasto selezionato,
in modo che possiamo quindi caricare i dettagli di quel pasto sulla pagina dei dettagli di quel
pasto per renderli lì.
Quindi nella schermata dei pasti della categoria qui, possiamo impostare i parametri qui sul nostro oggetto di navigazione, sull'oggetto che passiamo per navigare e params prende
un oggetto di coppie chiave-valore come hai imparato, è qualcosa che abbiamo fatto prima
e qui, voglio per inoltrare il mio pasto. ID che ovviamente posso ottenere dai dati
di un oggetto perché itemData. l'articolo è un pasto e ogni pasto, come puoi vedere nel modello, ha un documento d'identità, lo conserviamo qui.
Quindi qui ovviamente possiamo dire itemData. articolo. id, è quello che voglio inoltrare e, con
ciò, dovremmo andare alla pagina dei dettagli del pasto e lì, saremo anche in grado di estrarre l'ID del pasto che
abbiamo caricato.
Quindi su MealDetailScreen, vediamo se funziona, il pasto. id è puntelli. navigazione. getParam e
ora il nome era pasto. id, questo è il nome del parametro che ho scelto
qui per la memorizzazione del parametro, se hai scelto un nome diverso qui,
devi scegliere un nome diverso qui o utilizzare lì lo stesso nome ovviamente e ora possiamo selezionare il pasto, per questo importiamo
tutti i pasti dal file di dati fittizi nella cartella dati, come questo e ora il pasto selezionato qui ovviamente sono i pasti trovati e quindi eseguiamo questa funzione su ogni pasto lì ed è il
pasto in cui il pasto. l'id corrisponde al pasto. id che abbiamo estratto
lassù, questo è il nostro pasto selezionato. Per dimostrare che funziona, possiamo produrlo lì, selezionato pasto. titolo e ovviamente voglio
anche impostare il titolo nell'intestazione e questo è anche qualcosa che hai imparato.
Puoi farlo aggiungendo qui le opzioni di navigazione a questa schermata, le opzioni di navigazione e
hai imparato che se vuoi recuperare qualcosa di dinamico, lo fai con l'aiuto di questa speciale funzione qui.
I dati di navigazione sono ciò che ottieni lì, questa funzione è chiamata per te dalla navigazione React come hai appreso
e ora lì dentro, dobbiamo restituire il nostro oggetto di navigazione, il nostro oggetto opzioni di navigazione ma prima di restituirlo, possiamo usare i dati che otteniamo
da dati di navigazione, come il nostro prop di navigazione che a sua volta ci consente di accedere a
un parametro, in modo da poter usare navigationData. navigazione. getParam per ottenere il nostro pasto. id qui e anche recuperare il nostro pasto
proprio come lo stiamo facendo lassù nel componente, fare lo stesso laggiù
per le opzioni di navigazione e con il pasto selezionato, ovviamente possiamo qui impostare un
titolo di intestazione sul pasto selezionato. titolo ed è qualcosa che abbiamo fatto prima, è
così che possiamo estrarre i dati qui nelle nostre opzioni di navigazione e usare quei dati dinamici lì per
esempio per impostare il titolo dell'intestazione.
Con questo fatto,
vediamo se funziona, forse su Android. Andiamo alla luce e adorabili, qui abbiamo tutte le nostre ricette, andiamo a insalata
qui ed eccolo qui, ecco il nostro titolo, lo vediamo anche qui quindi questo è
tutto carico, se andiamo al salmone, invece vediamo quello.
Quindi tutto funziona come dovrebbe, molto bello da
vedere, ora è il
momento di fare il passo successivo perché, ad esempio, vogliamo essere in grado di contrassegnare un pasto come preferito
e per questo, voglio avere un'icona a forma di stella qui nella navigazione che posso premere.
Questo è qualcosa che ci manca ancora e non abbiamo ancora imparato,
quindi è un bel passo successivo.