La majorité de nos fichiers n'ont pas besoin d'être modifiés.
Ce que nous devons changer, c'est ce qui se passe dans les fichiers de navigation et le dossier
de navigation dans l'application J. S. vous vous souvenez peut-être de rendre
le conteneur de navigation ici et le conteneur de navigation n'est qu'un composant personnalisé ici où nous avons finalement
notre logique pour vérifier si l'utilisateur est authentifié, puis nous rendons un navigateur de boutique qui est notre
navigateur d'itinéraire créé ici avec React Navigation et c'est là que les choses doivent changer maintenant.
Commençons maintenant avec le conteneur de navigation.
Nous n'aurons plus besoin de ce code ici où nous naviguerons manuellement ailleurs si l'utilisateur est authentifié, car vous
verrez plus tard que cela sera désormais géré différemment avec cette configuration basée sur les composants afin que vous
puissiez supprimer utiliser le fait ici.
Keep est désactivé ici, mais vous pouvez supprimer la référence ici, mais également la supprimer là et en ce qui concerne les
importations ici, nous n'avons plus besoin de deux crochets ici et nous n'avons plus besoin de cette importation.
Il nous reste donc le navigateur de la boutique et ce n'est plus vraiment quelque chose dont nous avons besoin ici.
Nous n'ajoutons pas un navigateur de boutique en tant que composant comme celui-ci, où nous nous référons ensuite
à la configuration globale du fichier de navigateur de boutique, car cette configuration globale est bien sûr entièrement
configurée avec cette vieille logique d'avoir cette configuration de type registre global qui est simplement ne fonctionne plus avec react
navigation 5.
Au lieu de cela, nous devons maintenant migrer tout cela vers la nouvelle approche de cette approche basée sur les composants et
le faire.
Je veux commencer assez simplement dans le conteneur de navigation.
Je vais configurer un nouveau navigateur de pile qui n'est pour l'instant qu'un navigateur factice.
Alors avez-vous vu comment cela fonctionne généralement avant que nous n'appliquions plus tard cela
à notre application réelle pour cela.
Ajoutons l'importation ici à partir de réagir.
Navigation slash native.
Et à partir de là, nous devons importer la navigation dans le conteneur de navigation.
Cela peut être déroutant car notre propre composant ici est tout le conteneur de navigation nommé.
Donc, pour éviter toute confusion ici, je renommerai notre propre composant ici en navigateur d'application ou comme vous voulez le nommer,
donc je le renommerai ici et tout cela pour éviter toute confusion même s'il n'est
pas techniquement requis dans le composant d'application dans l'application oui je le ferai importé en tant que navigateur d'application Je renommerai
le fichier en navigateur d'application et j'importerai depuis le navigateur d'application ici dans le composant d'application afin d'ajuster le chemin d'importation pour inclure
ce nouveau nom de fichier.
Et puis ici, je rend le navigateur d'application.
Maintenant, je viens de faire ces changements de nom pour éviter toute confusion.
La partie la plus importante se produit à l'intérieur de cette application Navigator, qui était auparavant notre conteneur de navigation.
Maintenant, nous importons un conteneur de navigation à partir de React Native.
Mais papa sera un composant différent de ce que nous avons construit dans le passé.
Il vient de partager le même nom, c'est pourquoi je l'ai renommé plus important que ce conteneur de navigation.
Pour l'instant, nous importons quelque chose de la pile de slash de navigation ad react.
Et c'est maintenant un paquet qui n'existe pas et que nous n'avons pas encore installé.
Arrêtons donc à nouveau ce processus.
Et avec npm install dash dash safe, installons-le dans la pile de slash de navigation de sorte que NPM installe Ashutosh safe dans
la pile de slash de navigation de react.
Cela installera aux États-Unis la logique de navigation de la pile et nous pouvons tous déjà installer un
certain nombre de paquets car nous en aurons besoin plus tard et c'est au niveau de réagir à la navigation slash
draw qui nous donnera plus tard la navigation basée sur le tirage qui aura également besoin alors attendons un D aux commandes d'installation pour terminer et par la
suite avec le démarrage du moteur, nous pouvons à nouveau faire apparaître ce serveur expo, donc maintenant nous avons installé la pile de vietnamisation.
Nous pouvons en importer quelque chose et c'est quelque chose comme D create navigateur de pile.
Maintenant, créer un navigateur de pile est une fonction que nous connaissons déjà dans la boutique Navigator qui utilise toujours l'ancienne
navigation React dans laquelle nous importons également pour créer un navigateur de pile à partir de Reaction Navigation ou si vous
utilisiez le travail pour ce package à partir d'un package séparé.
Mais nous avons également dû créer un navigateur de pile et créer des navigateurs de dessin.
Maintenant, nous avons utilisé la création de navigateur de pile pour créer notre configuration, notre registre de navigation pour cette partie de notre application, vous pouvez le dire pour
l'aperçu des produits et les détails de l'écran de la carte que
nous avons regroupés en une seule pile, puis nous avons eu plusieurs de ces piles de les composer
pour rassembler dans notre tirage Navigateur que nous avons finalement combiné avec l'écran hors tension dans le navigateur de commutateur.
Maintenant, revenons à notre navigateur d'application, que faisons-nous avec créer un navigateur de pile ici.
Cela fonctionne désormais différemment.
Maintenant, nous l'utilisons pour créer un nouveau composant avec lui et je vais l'appeler ma pile.
Le nom dépend entièrement de vous, mais vous appelez simplement crée un navigateur de pile comme celui-ci et vous avez terminé.
Et c'est maintenant un énorme changement.
Vous ne passez maintenant aucun objet pour créer un navigateur de pile pour le configurer.
Au lieu de cela, c'est une fonction qui ne veut pas d'objet.
C'est une fonction qui n'a besoin d'aucun objet alors que fait-elle alors.
Quelle est ma pile ma pile est maintenant un composant React et nous l'utilisons comme tel ici dans le navigateur d'application pour être
précis.
Nous devons encapsuler toute la logique de navigation avec le composant de conteneur de navigation que nous
importons depuis React Navigation Native.
Vous pouvez considérer ce composant de conteneur de navigation comme la version du composant du conteneur d'application que nous
avons créé avec create container d'application dans l'ancienne configuration.
Là, nous avons dû envelopper notre navigateur fini avec le conteneur de création d'applications.
Maintenant, nous devons envelopper notre configuration de navigation basée sur les composants à faire avec le conteneur de navigation.
Donc, ici, nous configurons maintenant notre logique en ce qui concerne les pages que nous voulons pouvoir charger.
Et ici, nous utilisons maintenant ma pile comme composant de réaction, mais pas comme ça.
Mais ici, nous avons besoin du composant de navigation DOT.
Donc, ma pile est en fait un objet avec une propriété de navigateur et les valeurs stockées
dans cette propriété sont maintenant un composant.
Alors maintenant, nous pouvons créer ce composant et entre la taxe d'ouverture et de clôture de ce
composant, nous mettons maintenant essentiellement les différents écrans que nous voulons faire partie de cette pile.
Donc, ce que nous avions auparavant ici dans le navigateur de magasin avait à l'intérieur de cet objet, nous avons passé pour créer le
navigateur de pile cette carte des composants d'écran et leurs noms.
C'est ce que nous mettons en place ici entre cette balise d'ouverture et de fermeture.
Vous pourriez donc penser que ce que nous faisons, c'est que nous ajoutons le composant d'écran de présentation du produit à droite.
C'est l'un de nos composants, nous ajouterions une importation que nous n'avons pas faite ici parce que
c'est faux mais vous pourriez penser que nous le faisons presque bien.
Ce serait certainement l'écran que nous voulons avoir dans le cadre de ce navigateur, mais il n'aurait pas
de nom.
Maintenant, nous avons besoin d'un nom pour pouvoir y naviguer par exemple afin de pouvoir déclencher une navigation quelque part
dans notre application.
C'est pourquoi nous avons également un nom ici sur l'ancienne configuration.
Au lieu de cela, nous faisons quelque chose de différent.
Nous utilisons à nouveau ma pile cet objet là-haut et maintenant une deuxième propriété dont il a la propriété screen tout
comme la propriété navigateur, la propriété screen contient également un composant react et donc nous pouvons le
rendre comme ceci.
C'est maintenant un composant qui nous permet de définir un écran qui devrait faire partie de ce navigateur de pile
ici et nous le configurons à l'aide d'accessoires maintenant parce que nous travaillons avec un composant ici, donc la configuration fonctionne avec les
accessoires comme c'est toujours le cas où nous travaillons avec des composants pour donner un nom à cet écran, nous
ajoutons un accessoire de nom et maintenant nous pouvons utiliser ce nom, nous utilisons ici l'aperçu des produits afin que nous puissions ajouter ce
nom et laisser réagir la navigation savoir quel composant charger lorsque nous ciblons ce nom lorsque nous faisons cela
avec une action d'immigration par exemple, nous ajoutons un deuxième accessoire le composant prop et cela devrait contenir un pointeur sur le
composant que nous voulons charger lorsque nous voulons aller à cet écran avec ce nom.
Donc, pour cela, je vais importer l'écran de présentation des produits ici depuis notre dossier screens vers le sous-dossier shop, puis l'écran de
présentation des produits.
Alors maintenant nous en avons besoin et je suis passé ici.
Maintenant, il est important de ne pas créer le composant ici.
Nous indiquons simplement que nous utilisons simplement son nom qui est exporté à partir de ce fichier.
Et avec cela, nous avons maintenant notre première petite pile installée ici.
Maintenant, commentons cette importation depuis le navigateur de la boutique.
Nous n'en avons plus besoin pour le moment.
Enregistrons tout et avons lancé son sur Android disons.
Et lorsque vous faites cela, il crée le bundle javascript et s'ouvre sur l'appareil Android.
Et ce que vous verrez est notre écran de présentation des produits.
Bien sûr, cela semble un peu différent.
Bien sûr, il manque les boutons d'en-tête.
Il manque toute la configuration de l'en-tête.
Le titre est tout faux, mais cela a du sens parce que nous n'utilisons plus l'ancien navigateur
où nous avions toute cette configuration mais la nouvelle et c'est juste une preuve que cela fonctionne et comment cela fonctionne.
Maintenant, avec cette connaissance à l'esprit, laissons maintenant ce petit exemple ici et portons en fait notre navigation entière configurée
ici vers cette nouvelle logique.