Nous extrayons notre catégorie ici dans notre composant, car nous y obtenons notre paramètre à
l'aide d'accessoires de navigation.
Maintenant, en fait, je veux afficher le titre dans mon en-tête.
Maintenant, vous avez appris comment configurer cet en-tête à l'aide des options de navigation, donc sur le
composant d'écran de catégorie repas et donc, c'est une fonction donc, c'est un objet, nous pouvons ajouter des options de
navigation et vous avez appris que c'est un L'objet Javascript où vous pouvez
configurer un titre d'en-tête et un titre d'en-tête maintenant devrait être le nom de ma catégorie.
Le problème ici est qu'ici, la catégorie sélectionnée est disponible mais se trouve à l'intérieur de la fonction du composant.
Bien sûr, d'un autre côté, nous ne pouvons pas y accéder car cela se produit après la définition
de la fonction.
Nous n'avons donc pas accès à la catégorie que nous y avons
identifiée, c'est un problème.
La bonne chose est que les options de navigation peuvent être un objet si vous avez des valeurs de configuration codées en dur mais
cela peut aussi être une fonction si vous avez besoin d'une configuration dynamique qui dépend de la modification des données et bien sûr
les données dont nous dépendons ici changent parce que nous '' ré utiliser un seul et
même écran pour différentes catégories et par conséquent, l'ID et le titre de la catégorie changent chaque fois
que nous utilisons cet écran. Une fois, nous l'utilisons pour
la catégorie italienne, la prochaine fois nous l'utilisons pour la catégorie exotique. Cette fonction que vous pouvez également utiliser, elle est
bien sûr prise en charge par
React navigation et si c'est une fonction, ce que vous passez aux options de navigation,
React navigation l'appellera pour vous et transmettra certaines données de navigation, donc il passez un objet avec des données qui devraient vous aider, nous
allons voir ce qu'il y a dans une seconde car nous pouvons simplement enregistrer ces données de
navigation ici.
Commençons par ça, allons
maintenant sur cette page et voyons ce qu'il y a dedans.
Si je développe ceci ici, c'est le journal que j'ai reçu et vous voyez
que nous avons un autre accessoire de navigation dans les données de navigation. Là, nous avons des actions, nous avons naviguer pop, push,
donc
en gros ce que nous savions. Nous avons également getParam
et cela devrait être utile car cela nous permettra d'extraire des données ici à l'intérieur de nos options de
navigation à la fin, ce qui devrait être super utile. Donc, à la fin, nous obtenons le même accessoire de navigation que nous obtenons également sur nos accessoires de composants.
Donc ici, nous pouvons maintenant utiliser navigationData. la navigation. getParam pour obtenir mon ID de catégorie, exactement ce
que nous avons fait dans le composant. Nous pouvons donc répéter le code que nous avions dans un
composant et obtenir la catégorie sélectionnée, non seulement dans le composant, mais aussi dans cette fonction que nous utilisons pour configurer nos options de navigation.
Alors maintenant, ici, nous avons également accès à la catégorie sélectionnée et maintenant, les options de navigation, cette fonction,
si c'est une fonction, devrait bien sûr renvoyer un objet avec vos options de navigation.
Donc, ce que nous avons précédemment défini directement comme options de navigation alors que nous n'avions que des valeurs codées
en dur
doit maintenant être retourné, mais nous pouvons maintenant utiliser ces données dérivées dynamiquement ou les informations dérivées dynamiquement ici.
Alors maintenant, nous pouvons toujours configurer un titre d'en-tête ici et le titre d'en-tête peut maintenant
être sélectionnéCatégorie. Titre.
C'est ainsi que nous pouvons dériver dynamiquement cela et donc maintenant si vous revenez en arrière,
vous voyez l'italien ici, vous voyez rapide et facile ici, vous voyez l'allemand ici et cela fonctionne.
Veuillez noter que vous obtenez également par défaut un texte de bouton de retour qui est le titre des écrans précédents, c'est une autre fonctionnalité
par défaut que la navigation React vous offre. Nous revenons aux catégories de repas ici parce que
nous venons de catégories de repas. Seulement sur rapide et facile où cela
serait trop long à côté de ce titre un peu plus long, il revient et revient par défaut, ce qui est un bon comportement par
défaut que vous pouvez remplacer mais dont je suis satisfait ici. Sur Android, nous n'avons pas de texte en arrière, mais
bien sûr, nous avons un bouton de retour et là, l'en-tête est également correctement rempli pour les écrans qui sont chargés.
Voilà comment nous pouvons également obtenir nos données de manière dynamique ici dans les options de navigation. Un problème que vous remarquerez peut-être, mais qui est le
plus visible ici sur Android, est que l'en-tête du nouvel écran que nous chargeons n'a pas le même style
que notre en-tête ici, il n'a pas la couleur d'arrière-plan, à savoir. Maintenant, bien sûr, cela est facilement corrigé car sur les
options de navigation de la catégorie repas, nous pouvons simplement ajouter le style d'en-tête et la couleur de teinte d'en-tête que
nous avons configurés ici sur l'autre écran également. Nous pouvons donc copier cela ici et
cela signifie simplement que nous devons importer l'API de la plate-forme et bien sûr, notre couleur constante, alors importez des couleurs
à partir de constantes / Couleurs comme ceci et quand nous le ferons, nous verrons que si nous y allons , nous avons maintenant le même style d'en-tête pour cette nouvelle page
qui est bien sûr ce que vous voulez généralement. Ce que vous ne voulez généralement pas, c'est que
vous devez copier la même configuration sur chaque écran, car dans cette application, nous n'avons pas autant
d'écrans, nous pouvons certainement le faire, mais dans les applications plus grandes où vous
avez plus d'écrans, cela serait super ennuyeux et super encombrant, donc ce n'est certainement pas la façon d'y aller.
Jetons donc un œil à une alternative dans la prochaine conférence.