Je veux commencer avec la forme de navigation la plus basique et aussi la forme de navigation la plus courante que
vous avez dans n'importe quelle application mobile et c'est comment aller et venir entre les écrans et pour cela va
mettre en place une soi-disant pile et navigateur parce que pages ou écrans.
Je vais utiliser ces mots comme synonymes ici.
Les pages et les écrans sont donc essentiellement gérés sur une pile de pages.
Et chaque fois que vous accédez à un nouvel écran, il sera poussé au-dessus de cette pile. L'écran le plus haut
d'une pile est toujours l'écran qui est visible.
Et lorsque vous cliquez ensuite sur le bouton de retour, cet écran sur lequel vous étiez était sauté.
Et puisque vous voyez toujours sur l'application l'écran le plus haut, vous verrez l'écran en dessous de celui
dont vous venez.
C'est pourquoi il s'appelle Stack Navigator.
Voilà la fureur.
Utilisons-le simplement et cela deviendra très clair.
Nous avons importé de React.
La navigation et son nom étaient le nom de la fonction.
Nous devons réellement créer un tel navigateur de pile, c'est créer un navigateur de pile.
Maintenant, une note importante, cette syntaxe est correcte si vous utilisez la version de navigation gratuite de Rea si vous
utilisez l'aversion de navigation React car elle a légèrement changé, vous devez installer un package supplémentaire comme mentionné
dans une conférence plus tôt.
Vous devez exécuter npm installer dash dash enregistrer réagir dash navigation dash stack et installer ce package supplémentaire et avec celui-ci installé vous importez créer pile navigateur
à partir de react as navigation dash stack au lieu de react navigation qui est un ajustement mineur que vous
n'avez pas à faire quatre créer un navigateur de pile et lorsque nous créons nos navigateurs, par
exemple les taps ou dessiner le navigateur plus tard, vous aurez les packages respectifs dont vous avez besoin
pour installer React Dash Dash Taps et ainsi de suite, tout cela est couvert dans la leçon
que vous trouverez avant cette leçon.
Maintenant, ici, j'ai enregistré ce cours avec la version React Navigation gratuite qui, autrement, est exactement la
même.
Ce n'est que l'importation qui diffère et donc je vais importer de React Navigation ici.
Mais si vous suivez la version 4, il s'agit de réagir à la pile de tirets de navigation et d'un paquet
supplémentaire que vous devez installer.
Voilà comment fonctionne la navigation de réaction cette bibliothèque vous créez des soi-disant navigateurs qui sont à la fin
juste vous pourriez dire que les objets réagissent réellement aux composants car il se trouvera qui contient toute la configuration de navigation qui contient
toutes les informations des différents écrans que vous avez et qui fera le gros
du travail en chargeant différents écrans et en jouant de belles transitions fluides pour passer de
A à B pour vous.
Nous devons donc importer créer un navigateur de pile, puis nous pouvons simplement appeler cela maintenant, créer un navigateur de pile prend au moins
un argument et c'est un objet javascript où nous configurons les différents écrans que nous voulons pouvoir déplacer entre maintenant
et cette application que je veux pour commencer sur l'écran des catégories et si je tape sur une catégorie là-bas, je
veux aller à l'écran des repas de catégorie et si je tape ensuite sur une recette là-bas sur un repas,
je veux aller à l'écran de détail du repas donc nous en aurons besoin trois écrans dans notre navigateur de pile afin
que ce soient les trois écrans que vous pouvez parcourir en utilisant ce modèle de pile en vous poussant les pages
et en les sautant et pourquoi n'avons-nous pas besoin de favoris et de filtres parce que des filtres seront ajoutés plus
tard avec l'aide de une barre latérale ce sera une alternative à cette pile ici et des favoris aussi comme alternative à
cette pile, nous pourrons y aller avec des robinets plus tard mais pas pour le moment.
Commençons donc avec cette navigation de base basée sur la pile où nous pouvons aller et venir
entre les catégories écran catégorie repas Écran et vous détaillerez l'écran, nous informons la navigation de réaction sur ces trois écrans en les
enregistrant comme paires de valeurs clés, vous prenez n'importe quel identifiant n'importe quel nom votre choix pour des catégories d'exemple, mais ce nom est
à vous car une convention de nom de propriété est de commencer par un caractère majuscule ici,
mais vous n'avez pas à le faire techniquement.
Donc, vous utilisez n'importe quel identifiant que vous voulez comme nom de propriété dans cet objet
que vous passez pour créer un navigateur de pile et maintenant la valeur dans sa forme la plus simple est simplement un pointeur sur le
composant de react que vous souhaitez charger comme écran pour cet écran.
Donc, dans mon cas, ce serait l'écran des catégories tout importer cet écran toutes les catégories d'importation à partir de l'écran de
catégorie des écrans Je peux importer cela car il s'agit de mon exportation par défaut.
Alors maintenant, nous mappons ces deux catégories et cela nous permet de dire plus tard à React Navigation que la
bibliothèque que nous utilisons doit charger l'écran de catégorie.
Maintenant, comme je l'ai dit, ce n'est pas le seul écran dont j'ai besoin, je veux aussi avoir la catégorie repas.
Ce sont donc les systèmes du deuxième écran Cet écran présentera tous les repas de la catégorie choisie pour lesquels
nous avons un certain nombre de composants et c'est l'écran de repas de catégorie que nous avons préparé que nous importons à
partir des écrans de l'écran de repas de catégorie, donc nous cartographions cette année maintenant par la façon dont j'ai mentionné qu'il s'agit de la forme la plus
simple de mappage ayant simplement le nom de la propriété, puis un pointeur sur le composant que
vous souhaitez charger, vous pouvez également passer l'objet ici à la place et définir la propriété screen sur cet objet, puis pointer sur
at le composant que vous souhaitez charger.
Maintenant, pourquoi feriez-vous cela?
Parce que maintenant, vous pouvez également configurer une configuration supplémentaire ici en plus de l'écran, vous pouvez configurer des options par
défaut pour l'écran et ainsi de suite, mais ce n'est pas quelque chose dont nous
devons nous inquiéter pour le moment, nous nous en occuperons plus tard dans ce module Je
veux juste déjà mentionner que c'est le raccourci, c'est la forme la plus longue de dire à Reaction
Navigation quels écrans doivent être chargés pour quel identifiant parlant, nous avons besoin d'un troisième identifiant bien sûr et
c'est l'identifiant qui devrait charger notre écran détaillé. nommez-le détail du repas et je veux pointer vers l'écran détaillé de mon repas, donc
je vais importer l'écran des détails du repas à partir de Et maintenant, allons dans le dossier screens et là, c'est l'écran détaillé du repas et
encore une fois, j'utiliserai le raccourci ici.
Nous pourrions utiliser ce formulaire plus long, mais je vais utiliser ce raccourci au point de l'écran détaillé du repas.
Donc, avec cette configuration de base, nous disons réagir à la navigation.
Hé, ce sont les écrans qui pourront se déplacer entre maintenant, mais les données seules ne feront pas grand-chose.
Pourquoi.
Parce que nous créons ce navigateur de pile mais que nous ne faisons rien avec lui, modifions ce navigateur de pile
de création qui retourne en fait un conteneur de navigation et qui se révèle être un composant réactif.
Tout est nommé navigateur de repas.
Cela ressemble à un nom approprié parce que c'est ce que nous avons à la fin ici.
Et maintenant, nous stockons le composant React créé par le navigateur de pile, qui est fondamentalement
un composant React avec toutes les tâches lourdes liées au chargement de différents écrans et à la lecture des animations, ce composant
React est stocké dans le navigateur de repas.
Maintenant, nous pouvons exporter le navigateur de repas ici et essayer de l'utiliser comme ceci et nous capturer pour le rendre à
l'écran et voir ce qui se passe, mais en réalité, la navigation fonctionne un peu différemment.
Vous devez également créer un conteneur d'application dans ce conteneur d'application dont vous avez besoin pour envelopper votre itinéraire.
Donc, votre navigateur principal dans ce cas, nous n'en avons qu'un, nous n'avons qu'à empiler Navigator.
Alors, enveloppons-le avec.
Emballons la navigation dans les repas ou recréez-la en appelant create container d'application, puis passez simplement
le navigateur de repas en tant qu'argument create container d'application.
Crée également un conteneur de navigation.
Vous donne donc également un composant React.
Mais ce n'est pas vraiment le composant React.
Vous devez utiliser dans votre code ASX car il contient désormais toutes les métadonnées sur la navigation en général sur
la navigation de réaction, etc.
Donc, c'est simplement un modèle dont vous avez besoin pour envelopper votre itinéraire avec votre navigateur le plus important et utiliser ce composant
return react dans votre code J is X, puis fait essentiellement la configuration que vous aurez toujours lorsque vous
travaillerez avec Reaction Navigation plus tard, vous apprendrez également comment utiliser plusieurs navigateurs dans une seule application.
Soit dit en passant, pour l'instant, nous avons celui-ci et nous exportons ce composant qui est la fin crée.
Alors maintenant, dans la chasse aux applications, nous pouvons commencer à utiliser ce composant.
Nous avons donc vu quelque chose à l'écran pour cela allons-y et importons le navigateur de repas à partir du navigateur de
repas de navigation.
Maintenant, comme je l'ai mentionné, le navigateur de repas est maintenant juste un composant de réaction, donc à la fin ce que nous pouvons faire,
c'est que nous pouvons simplement le retourner au lieu de retourner notre point de vue avec notre texte ici.
Je reviendrai navigateur de repas et comme c'est un composant réactif, je peux simplement piloter
du code de J Isaac comme celui-ci avec papa si nous enregistrons cela.
Nous examinons notre application lors du rechargement
et vous devrez peut-être recharger manuellement votre application.
Vous devriez voir l'écran des catégories une fois rechargé et cela est bien sûr énorme car cela signifie
que cela fonctionne.
Maintenant, veuillez également noter que vous avez tous par défaut un bel en-tête qui a le look de plate-forme par défaut
pour les E / S, il est propre et plat a cette fine ligne en dessous pour Android, il est plus libre car il a
une légère ombre portée.
Maintenant, bien sûr, il manque un titre et vous apprendrez comment nous pouvons en ajouter un dans
ce module, mais nous le sortons de la boîte et cela respecte automatiquement tous les crans que vous pourriez avoir à rester
aussi loin que vous avez ici, donc il utilise automatiquement un tel vue de zone sûre et c'est tout ce que
j'ai mentionné dans le dernier module de cours pendant que vous avez ce composant et vous en avez parfois besoin
par exemple lorsque vous créez une application avec React Navigation Navigation Reaction encapsule déjà vos vues dans une vue de zone sûre au moins une
grande partie du travail que vous auriez à faire autrement, cela vous assurera que votre en-tête est bon
et c'est une grande chose, car la création manuelle d'un en-tête qui a l'air bien sur tous les appareils est
en fait un peu de travail.
Voilà donc ce que nous obtenons ici.
La question évidente est maintenant de savoir comment atteindre nos autres écrans.