Eh bien, pour atteindre nos autres écrans, nous avons besoin de quelque chose sur lequel nous pouvons cliquer, sur lequel nous pouvons appuyer.
Plus tard, nous aurons notre grille de catégories ici et nous y travaillerons également dans ce
module, mais juste pour commencer la navigation, j'ajouterai un bouton, donc sur l'écran
des catégories où j'ai ce texte, je veux ajouter un bouton sur lequel je peux appuyer pour accéder à l'écran
des repas de la catégorie.
Alors ici, je vais ajouter ce bouton React Native, celui qui est intégré et définir un titre d'aller aux repas et lorsque nous appuyez
sur ce bouton, je veux déclencher une fonction qui m'amène réellement à l'écran de la catégorie
des repas.
Maintenant, nous configurons cet écran de
catégorie de repas ici, mais comment pouvons-nous maintenant y aller? Eh bien pour cela, il est important de savoir que tout
composant que vous avez chargé à l'aide de la navigation React reçoit automatiquement un accessoire spécial, donc tout composant mappé à l'un
de vos identificateurs d'écran ici, donc
dans ce cas, ces trois composants, obtiendront le accessoire spécial. Les composants imbriqués ne l'obtiennent pas automatiquement, uniquement
les composants de niveau supérieur que vous avez mappés à des identificateurs dans vos navigateurs.
C'est donc un accessoire spécial dont je parle,
jetons un coup d'œil.
Donc ici, dans les accessoires, nous pouvons l'extraire et commençons simplement par consigner les accessoires de la console ici, afin que nous
puissions avoir une idée et pour l'instant afin de ne pas avoir d'erreur, je
vais simplement passer une fonction vide ici à onPress .
Sauvegardons donc cela et voyons ce qu'il y a à l'intérieur des accessoires.
Cette recharge, nous avons le bouton qui ne fait rien et ici dans la console, on voit bien que les accessoires ne
sont pas vides.
C'est notre
objet d'accessoires et là nous avons un accessoire de navigation qui lui-même est un objet qui
a des actions, d'accord mais qui a aussi par exemple pop, push, replace, reset et une fonction de navigation, donc un tas de fonctions là-dedans, des
fonctions qui nous aident à nous déplacer dans notre application.
Il a également un accessoire d'écran, donc notre accessoire a des accessoires d'écran que nous pouvons ignorer pour l'instant.
Donc, ce qui est à l'intérieur des accessoires et cet accessoire de navigation, cette partie de navigation qui
s'y trouve,
nous aide vraiment, donc cet accessoire de navigation. Cela nous aide ici parce que lorsque nous appuyons sur ce bouton et
je le ferai avec une fonction de flèche en ligne ici, bien sûr, vous pourriez avoir une fonction distincte que
vous créez et que vous mappez
ensuite sur onPress, cela nous aide et cela peut être utilisé pour naviguer.
Donc, sur la navigation des accessoires, la navigation est cet accessoire spécial que nous obtenons par React navigation parce que
nous avons chargé ce composant d'écran de catégories avec l'aide de notre
navigateur ici, cet accessoire de navigation spécial a une méthode de navigation
et c'est votre méthode principale,
la plus importante méthode pour se déplacer à l'aide de la navigation React. Comment fonctionne la navigation?
Naviguer prend un objet comme argument et dans cet objet, vous pouvez configurer le nom de l'itinéraire vers lequel vous
souhaitez naviguer.
Donc, vous passez une propriété de nom de route dans cet objet que vous passez pour naviguer et maintenant important, le nom
de route que vous spécifiez ici doit être l'un des trois noms de route que j'ai définis ici.
Les noms de route sont maintenant les identifiants que vous affichez choisis devant ces deux-points, donc les noms de propriété dans cet
objet que vous avez transmis pour créer le navigateur de pile.
Ce sont les noms de vos itinéraires
et c'est ce que vous pouvez maintenant utiliser pour naviguer. Alors ici, je veux aller à la catégorie repas,
c'est le nom de
l'itinéraire que je veux utiliser, donc ici, je pointe vers
la catégorie repas mais pas comme ça, cela en Javascript chercherait une variable de catégorie repas, au lieu d'une chaîne nommée repas
de catégorie, car cela indiquera à la fin à Javascript et à la navigation React que vous voulez
aller sur l'itinéraire qui a le nom de la catégorie de repas et c'est cet itinéraire ici.
Alors maintenant, voici comment vous pouvez y aller.
Si nous enregistrons maintenant cela et que nous cliquons sur Aller aux repas ici, vous voyez que nous allons à l'écran des repas, nous obtenons
cette belle animation hors de la boîte, nous obtenons ce bouton de retour qui ressemble exactement à
ce à quoi nous nous attendrions. iOS et tout cela fonctionne hors de la boîte sans aucun travail supplémentaire, pas de vérification
si, pas de code d'animation manuel, nous obtenons cela grâce à la bibliothèque de navigation React.
Donc, avec cela, nous pouvons aller et revenir à notre écran de repas, à l'écran de catégorie de repas, puis revenir à
l'écran de catégorie et cela fonctionne également sur Android. Là, nous obtenons la navigation de routage spécifique à Android qui
semble un peu différente de celle sur iOS, c'est l'animation de navigation que vous attendez sur Android, bien sûr,
vous pouvez également utiliser le bouton de retour de l'appareil pour revenir en arrière.
Voici donc comment vous pouvez naviguer vers un autre écran et notez également que la navigation ne dit bien
sûr rien sur la direction que nous voulons prendre, elle ne dit pas à React navigation s'il doit
jouer cette animation avant ou cette animation arrière . React navigation le détecte automatiquement car sous le capot,
il gère cette pile de pages dont je parlais, cette pile d'écrans et dans cette pile, en ce
moment quand on démarre l'application, on n'a que l'écran catégorie mais quand j'appuie sur ce bouton ,
naviguer à la fin indique à React navigation que puisque nous faisons cela à l'intérieur d'un composant qui a
été chargé avec un navigateur de pile, nous voulons naviguer vers un écran différent qui
devrait être poussé en haut de la pile. Il s'agit simplement du comportement par défaut et, par conséquent, il sait qu'il
veut avancer car un nouvel itinéraire a été poussé, ce qui signifie qu'il est ajouté à la pile, nous voulons avancer et lorsque
nous cliquons sur le bouton de retour qu'il ajoute automatiquement, il fait disparaître cet écran de la pile et comme il supprime quelque chose de la
pile, il sait qu'il doit lire l'animation arrière. C'est donc ce qui se passe dans
les coulisses, vous n'avez pas vraiment besoin de vous en soucier et c'est
la bonne chose, je veux juste que vous en soyez conscient, que la navigation React fait le
gros du travail pour vous là-bas et gère cette pile de écran et les animations dont vous avez besoin donc sous le capot pour vous.
D'accord, cela nous permet de faire des allers-retours ou des allers-retours.
Maintenant, votre défi pour la prochaine conférence où nous le ferons ensemble est que vous fassiez de même sur
l'écran des repas de la catégorie et assurez-vous que nous pouvons également accéder au
MealDetailScreen à partir de là. Cela ne devrait pas être trop difficile, dans la prochaine conférence, nous le ferons ensemble.