Comment pouvons-nous résoudre ce problème dont nous avons besoin ici pour trouver un repas spécifique et nous ne pouvons pas vraiment utiliser
notre sélecteur ici dans les options de navigation?
Maintenant, il y a deux correctifs possibles - le correctif numéro un est que nous utilisons à nouveau les bons anciens paramètres
pour communiquer entre les options de composant
et de navigation comme je l'ai montré dans le module de navigation. Ici, dans le composant, nous chargeons notre repas, donc bien sûr ici
nous pouvons utiliser les paramètres de navigation des accessoires et maintenant définir les paramètres à une nouvelle valeur ici et maintenant nous pouvons utiliser définir les paramètres pour
transférer le repas sélectionné ou son titre dans l'en-tête et tout ce que vous définissez ici est des paramètres en passant sera
fusionné avec les paramètres existants, donc cela ne les remplacera pas, donc vous ne remplacerez pas votre repasId
que vous récupérez ici, qui sera toujours là, vous êtes juste en ajoutant quelque chose
de nouveau, vous ne remplacez un paramètre que s'il existe déjà dans les paramètres.
Donc, ici, nous pourrions ajouter la clé de titre du repas et la définir sur le repas sélectionné. Titre.
Maintenant, cela signifie que j'ai envoyé ces paramètres à mon en-tête lorsque ce composant est rendu à la fin.
Maintenant, comme cela changera les accessoires, nous nous retrouverions généralement dans une boucle infinie,
donc pour rompre cela, nous utiliserons l'effet d'utilisation ici comme je l'ai
montré dans le module de navigation et le faisons en fait à l'intérieur de l'effet d'utilisation.
Donc, ici, nous pouvons utiliser use use et comme dépendance,
je vais spécifier un tableau vide pour l'instant, puis définir des paramètres ici à l'intérieur de la fonction use effect et
je n'aurai
pas de tableau vide ici, au lieu de cela ma dépendance ici est ma sélection repas.
Lorsque cela change, je souhaite transmettre les nouvelles informations à l'en-tête. Maintenant, nous verrons si cela fonctionne, allons à l'en-tête et là,
nous pouvons
maintenant récupérer cela à partir des paramètres.
Alors là, j'ai mon titre de repas,
je peux l'obtenir avec navigationData. la navigation. Titre du repas getParam, c'est le
nom que j'ai choisi lors de la configuration des paramètres ici.
Maintenant, avec le titre du
repas sélectionné ici, nous pouvons définir le titre de l'en-tête sur ce titre du repas et commenter cette ligne car cela ne
fonctionnera pas de toute façon et essayons.
Enregistrons cela et allons à la page de détail et pendant que cela
fonctionne, vous verrez un problème. Lorsque cela se charge, initialement il n'y a pas de titre
et cela n'apparaît qu'après un certain temps.
Donc, seulement après que cela soit complètement chargé, nous voyons cette pop de titre qui
n'est pas trop belle et la
raison en est simplement que notre logique fonctionne ici, mais puisque l'effet d'utilisation s'exécute après le rendu du
composant pour la première fois, nous attendons pour que le composant soit rendu pour la première fois
jusqu'à ce que nous envoyions les paramètres au titre et cela signifie que lorsque cette transition est toujours en cours
de lecture et que le rendu n'est pas complètement terminé, nous ne montrons pas vraiment ce titre.
C'est pourquoi ce n'est peut-être pas la solution
optimale ici et je commenterai cela. Une meilleure solution ici, aussi bon marché que cela
puisse paraître, mais c'est aussi une solution que vous pouvez souvent utiliser, c'est que vous transférez simplement le titre dont
nous aurons besoin ici depuis l'intérieur du composant dont vous venez, afin de le charger lorsque vous êtes dans le composant
qui ira à ce composant et que vous l'envoyez à ce composant avant qu'il ne soit chargé.
Envoyons donc les données à l'avance et nous venons de l'écran des
favoris ou de l'écran des catégories de repas. Là, nous finissons par taper un élément dans la liste des repas et dans les deux éléments,
dans les deux composants, l'écran préféré et l'écran de la catégorie de repas, nous utilisons la liste des repas,
ce qui est bien parce que cela signifie que nous pouvons aller à la liste des repas ici et là, nous avons cette action de navigation et maintenant
simplement en plus de passer l'ID du repas, il serait bon que nous passions déjà ici le titre du repas car ici nous l'avons disponible, non?
itemData. article. titre, c'est notre titre du repas. En le fournissant simplement ici, nous
résolvons tous les problèmes que nous avons sur l'autre écran, c'est donc certainement l'approche que nous voulons utiliser ici.
Donc, en définissant ce paramètre ici sur le composant où nous déclenchons cette action de navigation vers la page de détail du repas,
nous avons résolu ce problème car maintenant vous voyez que le titre est là dès le début et nous n'avons aucun problème là-bas et
le même bien sûr également sur Android si nous essayons là-bas. Mon émulateur est juste un peu
lent, mais vous pouvez généralement le voir également. C'est ainsi que nous pouvons travailler avec des données dans
l'en-tête lorsque nous en avons besoin de Redux et avec cela, nous avons un premier état solide, nous pouvons
utiliser nos données Redux. Ce que nous ne sommes pas vraiment en mesure de
faire, c'est de le changer, c'est donc la prochaine étape, nous voulons ajouter un peu de logique afin que nous puissions changer les données, que nous
pouvons marquer les favoris et que nous pouvons filtrer nos données.