Maintenant, vous savez comment nous pouvons aller à la page de détails, bien sûr, c'est quelque chose que nous
avons fait auparavant lorsque nous sommes passés de la page des catégories à la page des repas de la catégorie. Nous pouvons donc utiliser la même approche ici et
bien sûr, n'hésitez pas
à mettre la vidéo en pause à ce stade et à le faire vous-même,
c'est absolument quelque chose que vous pouvez faire ici en tant que pratique. Bien sûr, faisons-le aussi ensemble.
Donc, dans l'écran de catégorie de repas, lorsque nous sélectionnons un repas, onSelectMeal, cette fonction ici doit se déclencher car
nous passons cette fonction via onSelectMeal à l'élément de repas et là, nous le lions à la presse,
sur l'opacité tactile ici, de sorte
que devrait se déclencher sur certains repas et donc dans l'écran des repas de catégorie,
dans cette fonction ici, nous pouvons naviguer. Maintenant que j'ai défini cette fonction de rendu de repas où
je rend mon repas à l'intérieur de mon composant, j'ai accès aux accessoires et là, puisque l'écran de catégorie de repas est notre
composant que nous chargeons à l'aide de la navigation, je peux accéder à la propriété de navigation et la méthode de navigation et vous avez
appris que là, nous pouvons maintenant passer le nom de l'itinéraire où nous voulons aller et ce serait le détail du repas, donc
le nom de l'itinéraire que nous avons défini dans le navigateur de repas, ce nom ici, cela chargera le page de détail du repas.
Maintenant, nous devons y envoyer des données et les données que je veux transmettre ici bien sûr sont l'ID du repas
sélectionné, afin que nous puissions ensuite charger les détails de ce repas sur cette page de détail de repas
pour les y rendre.
Donc, dans l'écran de catégorie de repas ici, nous pouvons configurer des paramètres ici sur notre objet de navigation, sur l'objet que nous passons pour naviguer et params prend
un objet de paires clé-valeur comme vous l'avez appris, c'est quelque chose que nous avons fait avant
et ici, je veux pour faire suivre mon repas. id que je peux bien sûr obtenir à partir
des données d'un élément parce que itemData. l'article est un repas et chaque repas comme vous pouvez le voir dans le modèle a une pièce d'identité, nous la stockons ici.
Par conséquent, ici, bien sûr, nous pouvons dire itemData. article. id, c'est ce que je veux transmettre et avec
cela, nous devrions aller à la page de détail du repas et là, nous pourrons également extraire l'ID du repas que nous
avons chargé.
Donc, sur le MealDetailScreen, voyons simplement si cela fonctionne, le repas. id est des accessoires. la navigation. getParam et
maintenant le nom était repas. id, c'est le nom du paramètre que j'ai choisi ici pour
stocker le paramètre, si vous avez choisi un nom différent ici, vous devez choisir
un nom différent ici ou utiliser le même nom là bien sûr et maintenant nous pouvons sélectionner le repas, pour cela importons tous les
repas du fichier de données factices dans le dossier de données, comme ceci et maintenant le repas sélectionné ici est bien sûr la recherche de repas et ensuite nous exécutons cette fonction à chaque repas là-bas et c'est
le repas où le repas. id correspond au repas. id nous avons
extrait là-haut, c'est notre repas sélectionné. Pour prouver que cela fonctionne, nous pouvons le produire là-bas, selectedMeal. titre et bien sûr, je
veux également définir le titre dans l'en-tête et c'est aussi quelque chose que vous avez appris.
Vous pouvez le faire en ajoutant des options de navigation à cet écran ici, des options de navigation et vous
avez appris que si vous souhaitez récupérer quelque chose de dynamique, vous le faites à l'aide de cette fonction spéciale ici.
Les données de navigation sont ce que vous obtenez là-bas, cette fonction est appelée pour vous par React navigation comme vous l'avez
appris et maintenant, nous devons retourner notre objet de navigation, notre objet d'options de navigation mais avant de retourner cela, nous pouvons utiliser les données que nous
obtenons de les données de navigation, comme notre accessoire de navigation qui à son tour nous permet d'accéder à
un paramètre, afin que nous puissions utiliser navigationData. la navigation. getParam pour prendre notre repas. id ici aussi et récupérer également notre repas
comme nous le faisons là-haut dans le composant, faire la même chose
là-bas pour les options de navigation et avec le repas sélectionné, nous pouvons bien sûr ici
définir un titre d'en-tête pour selectedMeal. title et c'est quelque chose que nous avons fait auparavant,
c'est ainsi que nous pouvons extraire des données ici dans nos options de navigation et utiliser ces données dynamiques par exemple
pour définir le titre de l'en-tête.
Avec cela à
l'écart, voyons si cela fonctionne, peut-être sur Android. Allons à la lumière et belle, là, nous avons toutes nos recettes, allons à la salade
ici et le voici, voici notre titre, nous le voyons également ici donc tout est chargé, si
nous allons au saumon, nous voyons à la place cette.
Donc, tout fonctionne comme il se doit, très agréable
à voir, maintenant il
est temps de passer à l'étape suivante parce que par exemple, nous voulons pouvoir marquer un repas comme favori et
pour cela, je veux avoir une icône d'étoile ici dans la navigation sur laquelle je peux appuyer.
C'est quelque chose qui nous manque encore et que nous n'avons pas encore
appris, c'est donc une belle prochaine étape.