1 00:00:02,710 --> 00:00:05,590 Maintenant, vous savez comment nous pouvons aller à la page de détails, bien sûr, c'est quelque chose que nous 2 00:00:05,620 --> 00:00:11,530 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 3 00:00:11,530 --> 00:00:12,880 bien sûr, n'hésitez pas 4 00:00:12,910 --> 00:00:16,900 à mettre la vidéo en pause à ce stade et à le faire vous-même, 5 00:00:16,900 --> 00:00:24,540 c'est absolument quelque chose que vous pouvez faire ici en tant que pratique. Bien sûr, faisons-le aussi ensemble. 6 00:00:24,630 --> 00:00:32,550 Donc, dans l'écran de catégorie de repas, lorsque nous sélectionnons un repas, onSelectMeal, cette fonction ici doit se déclencher car 7 00:00:32,550 --> 00:00:39,950 nous passons cette fonction via onSelectMeal à l'élément de repas et là, nous le lions à la presse, 8 00:00:39,950 --> 00:00:42,550 sur l'opacité tactile ici, de sorte 9 00:00:42,570 --> 00:00:48,870 que devrait se déclencher sur certains repas et donc dans l'écran des repas de catégorie, 10 00:00:48,870 --> 00:00:54,870 dans cette fonction ici, nous pouvons naviguer. Maintenant que j'ai défini cette fonction de rendu de repas où 11 00:00:54,900 --> 00:01:00,780 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 12 00:01:00,780 --> 00:01:07,050 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 13 00:01:07,050 --> 00:01:12,820 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 14 00:01:12,900 --> 00:01:18,810 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. 15 00:01:19,590 --> 00:01:26,400 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 16 00:01:26,400 --> 00:01:32,850 sélectionné, afin que nous puissions ensuite charger les détails de ce repas sur cette page de détail de repas 17 00:01:32,850 --> 00:01:34,500 pour les y rendre. 18 00:01:34,770 --> 00:01:44,520 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 19 00:01:44,520 --> 00:01:49,980 un objet de paires clé-valeur comme vous l'avez appris, c'est quelque chose que nous avons fait avant 20 00:01:49,980 --> 00:01:56,730 et ici, je veux pour faire suivre mon repas. id que je peux bien sûr obtenir à partir 21 00:01:56,790 --> 00:02:03,330 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. 22 00:02:04,320 --> 00:02:10,890 Par conséquent, ici, bien sûr, nous pouvons dire itemData. article. id, c'est ce que je veux transmettre et avec 23 00:02:10,890 --> 00:02:16,650 cela, nous devrions aller à la page de détail du repas et là, nous pourrons également extraire l'ID du repas que nous 24 00:02:16,650 --> 00:02:17,410 avons chargé. 25 00:02:17,640 --> 00:02:26,760 Donc, sur le MealDetailScreen, voyons simplement si cela fonctionne, le repas. id est des accessoires. la navigation. getParam et 26 00:02:26,760 --> 00:02:34,470 maintenant le nom était repas. id, c'est le nom du paramètre que j'ai choisi ici pour 27 00:02:34,470 --> 00:02:39,090 stocker le paramètre, si vous avez choisi un nom différent ici, vous devez choisir 28 00:02:39,090 --> 00:02:46,980 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 29 00:02:46,980 --> 00:02:59,800 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 30 00:02:59,800 --> 00:03:05,770 le repas où le repas. id correspond au repas. id nous avons 31 00:03:05,860 --> 00:03:14,200 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 32 00:03:14,290 --> 00:03:21,250 veux également définir le titre dans l'en-tête et c'est aussi quelque chose que vous avez appris. 33 00:03:21,970 --> 00:03:28,460 Vous pouvez le faire en ajoutant des options de navigation à cet écran ici, des options de navigation et vous 34 00:03:28,490 --> 00:03:35,090 avez appris que si vous souhaitez récupérer quelque chose de dynamique, vous le faites à l'aide de cette fonction spéciale ici. 35 00:03:35,690 --> 00:03:42,650 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 36 00:03:43,340 --> 00:03:52,050 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 37 00:03:52,050 --> 00:03:58,470 obtenons de les données de navigation, comme notre accessoire de navigation qui à son tour nous permet d'accéder à 38 00:03:58,470 --> 00:04:09,340 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 39 00:04:09,340 --> 00:04:13,890 comme nous le faisons là-haut dans le composant, faire la même chose 40 00:04:13,990 --> 00:04:19,630 là-bas pour les options de navigation et avec le repas sélectionné, nous pouvons bien sûr ici 41 00:04:19,630 --> 00:04:25,040 définir un titre d'en-tête pour selectedMeal. title et c'est quelque chose que nous avons fait auparavant, 42 00:04:25,060 --> 00:04:30,650 c'est ainsi que nous pouvons extraire des données ici dans nos options de navigation et utiliser ces données dynamiques par exemple 43 00:04:30,790 --> 00:04:32,620 pour définir le titre de l'en-tête. 44 00:04:35,400 --> 00:04:37,830 Avec cela à 45 00:04:37,920 --> 00:04:47,600 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 46 00:04:49,530 --> 00:04:54,690 ici et le voici, voici notre titre, nous le voyons également ici donc tout est chargé, si 47 00:04:54,690 --> 00:04:58,050 nous allons au saumon, nous voyons à la place cette. 48 00:04:58,050 --> 00:05:00,850 Donc, tout fonctionne comme il se doit, très agréable 49 00:05:00,870 --> 00:05:02,350 à voir, maintenant il 50 00:05:02,370 --> 00:05:08,340 est temps de passer à l'étape suivante parce que par exemple, nous voulons pouvoir marquer un repas comme favori et 51 00:05:08,340 --> 00:05:13,650 pour cela, je veux avoir une icône d'étoile ici dans la navigation sur laquelle je peux appuyer. 52 00:05:13,650 --> 00:05:16,290 C'est quelque chose qui nous manque encore et que nous n'avons pas encore 53 00:05:16,320 --> 00:05:17,850 appris, c'est donc une belle prochaine étape.