Nous progressons donc bien.
Nous avons migré tous nos navigateurs ou presque tous.
Maintenant, qu'en est-il du commutateur de navigateur vide de navigateur ICI.
BIEN NOUS VOUS AVONS ARRÊTÉ Navigateur à coup sûr.
C'est un navigateur de pile qui est responsable de l'écran hors tension et nous.
Et le navigateur de commutateur.
Eh bien, nous n'aurons plus besoin de changer de navigateur.
Il n'y a pas de paquet de commutateurs de navigation slash at react ou quelque chose comme ça.
Mais j'y reviendrai quand nous en aurons besoin.
Donc pour l'instant, créons notre navigateur off ou notre navigateur off stack ici en appelant navigateur.
En appelant create stack navigator et exportez notre constante off navigator year qui est à nouveau un composant
react juste comme avant lorsque nous revenons de stack navigator dot navigator.
Et là-bas, nous avons notre écran à points de navigateur de bureau et le nom de l'écran est éteint.
Comme nous l'avons ici et que le composant dont nous avons besoin est hors écran, c'est tout.
Maintenant, nous avons les options diable NAF ici.
Les options d'écran du navigateur doivent donc être les options de sieste par défaut et 40 options spécifiques à l'écran.
Jetons un coup d'œil à l'écran hors tension et si nous faisons défiler vers le bas, nous avons également quelques options ici.
Exportons donc nos options d'écran ici comme nous l'avons fait auparavant.
Exportons-le, puis allons dans le navigateur de la boutique ici et sur cet écran.
Définissons les options deux options hors écran que nous devons maintenant également ajouter en
tant qu'importation en haut de l'écran, nous importons les options d'écran en tant qu'options hors écran, c'est tout.
Maintenant, nous avons également ces écrans de démarrage, mais si nous regardons de plus près dans le passé, nous
venons de le signaler directement depuis notre navigateur de commutateur, ce qui nous laisse une seule question.
Qu'en est-il de ce navigateur de commutateur.
Dans le passé, cela aurait été le premier écran que vous voyez une fois la pomme chargée, car c'est
le premier écran le plus haut de cette configuration.
Et puis nous avions une logique dans cet ancien conteneur de navigation que nous avons construit plus tôt, où nous vérifions
si nous sommes authentifiés et si ce n'est pas vrai si nous ne sommes pas authentifiés, nous redirigerons
l'utilisateur vers cet écran.
Maintenant, quand pourrions-nous atteindre l'écran du magasin.
Eh bien, jetons un œil à l'écran de démarrage.
Là, nous voyons que nous avons essayé de nous authentifier et ici, nous irions à l'écran des magasins éventuellement lorsque la
connexion automatique nous réussirait.
C'est la logique que nous avons écrite là-bas.
Maintenant, c'est encore une logique qui a beaucoup de sens.
Nous devons juste l'ajuster pour le nouveau package de navigation à la fin ce que nous pouvons voir ici, c'est qu'au début
de l'écran, nous essayons de verrouiller l'utilisateur et si nous ne pouvons pas trouver les données utilisateur stockées sur l'appareil, nous allons à
la page off.
Si nous constatons que les données sur le jeton sont expirées ou non, nous allons à la page off.
Si nous réussissons avec tout et que nous avons un jeton valide, nous allons à la place à la page de
la boutique et nous envoyons une action où nous authentifions l'utilisateur qui change d'état
et notre magasin redux qui définit initialement les jetons sur ce jeton dans notre magasin est maintenant maintenant nous pouvons l'utiliser.
Et si nous nous débarrassons de tous ces appels de navigation ici afin que nous puissions les supprimer ou simplement les commenter pendant que je
le fais ici.
Nous nous débarrassons donc de toutes ces actions de navigation à la place.
Que se passe-t-il si nous revenons ici.
Eh bien, si nous revenons ici, l'exécution du dysfonctionnement arrête l'Indiana à droite.
Ça s'arrête.
Et ce que nous ne faisons certainement pas, c'est que nous n'envoyons certainement pas l'action.
Nous ne définissons donc absolument pas le jeton.
C'est toujours non.
Cela se produit toujours ici, sauf si nous arrivons au fond, auquel cas nous avons un jeton.
Nous nous avons expédiés et le jeton n'est pas nul.
Ils sont souvent dans notre magasin.
Donc, ce jeton que nous gérons avec redux est même maintenant ou il détient une valeur.
Maintenant, je veux ajuster un peu le magasin redux.
La partie off de celui-ci et vous tous pour l'utilisateur et je vais ajouter un nouveau morceau de
données à cet état et c'est la clé a tout essayé pour se connecter.
Vous pouvez le nommer comme vous le souhaitez et je le définirai initialement faux ici.
Je veux enregistrer si nous avons essayé de connecter l'utilisateur ou non.
Maintenant, si nous nous authentifions.
Donc, si nous envoyons une action avec cet identifiant, je définirai alors essayez de vous connecter automatiquement à true.
Je vais également ajouter une nouvelle action ici dans les actions désactivées et pour cela, j'ajouterai
un nouvel identifiant ici que je nommerai ensemble a essayé ou un L pour la connexion automatique ensemble a essayé un L et créer un créateur d'action
pour cela set a essayé un L qui ne prend aucun argument.
Et où je n'ai pas retourné mon objet d'action où taper est juste défini.
A essayé un l ..
Vous pouvez également le mettre en bas du fichier, peu importe.
Maintenant pourquoi je fais ça.
Vous verrez cela dans la seconde.
Revenons au réducteur de réduction et manipulons ce nouveau boîtier.
L'ensemble de cas a essayé un l.
Assurez-vous que vous importez également des actions de maintenant chaque année, nous renvoyons un nouvel état dans lequel je copie l'ancien
état et où j'ai dit avoir essayé de se connecter automatiquement à true afin que le jeton soit
toujours la connaissance.
Maintenant, mon idée est d'envoyer cette action ici dans l'écran de démarrage.
Dans tous les scénarios où nous étions auparavant allés à l'écran hors, donc où nous avons essayé de nous connecter mais
où nous n'avons pas réussi.
Alors oui, je vais expédier l'ensemble a essayé A. L. assurez-vous donc d'accéder à ceci sur vos actions désactivées comme
ceci et faites-le dans ces deux cas où nous avons précédemment navigué vers l'écran désactivé.
Alors maintenant, nous avons ce nouveau champ et redux et pourquoi je fais ça.
Pourquoi est-ce utile?
Eh bien, car avec Reaction Navigation 5, il n'y a plus de commutateur de navigation car nous n'en avons plus besoin
puisque nous gérons maintenant l'intégralité de la configuration de notre itinéraire.
Pourquoi les composants sont-ils que nous pouvons simplement rendre dynamiquement les composants pour qu'ils aient un effet ou
non les rendre ainsi dans le navigateur d'application où je rend le navigateur de mes produits.
Il est maintenant temps d'ajouter tous ces navigateurs à configurer, puis de décider quel navigateur doit être
rendu à partir du navigateur de la boutique.
Je veux maintenant importer ce navigateur
de boutique ici que j'exporterai à nouveau en tant que constante, puis ici un navigateur d'application J'importe le navigateur
de boutique.
C'est notre dessin d'un navigateur.
Gardez cela à l'esprit et c'est ce que je veux rendre ici.
Navigateur de boutique.
C'est donc essentiellement ce que je veux rendre si nous sommes verrouillés, c'est notre boutique juste auparavant, c'est ce que nous
avons mappé à cette clé de boutique dans le navigateur de commutateur.
Maintenant, nous avons tous besoin du navigateur off à l'écran de démarrage.
Voici donc un navigateur d'application.
Je vais importer le navigateur off et ce sont les deux seuls navigateurs que je dois importer ici.
Par conséquent, vous pouvez supprimer la déclaration d'exportation de tous les autres navigateurs ici dans notre fichier de navigateur de boutique, mais
ce qui devra également être importé dans le navigateur d'application est maintenant l'écran de démarrage.
Importons donc l'écran de démarrage à partir de l'écran de démarrage des écrans et maintenant nous avons le navigateur de la boutique.
Nous avons le navigateur hors tension comme alternative et nous avons également un écran de démarrage en profondeur maintenant, il ne rendra que
l'un des fichiers gratuits et.
Et c'est là que nous pouvons maintenant réutiliser redux.
Je vais copier le sélecteur d'utilisation, car les informations du site sur le jeton
m'intéressent également à en savoir plus sur le champ de connexion que j'ai ajouté à l'état désactivé ici.
Ce nouveau champ a ajouté que j'y ai maintenant accès ici dans mon fichier de navigateur d'application et stocké et j'ai
tout essayé pour me connecter constamment.
Maintenant, je sais que je veux rendre à la boutique si tout cela est vrai et c'est comment nous pouvons le faire si nous sommes authentifiés.
Je rend toujours au magasin je ne me soucie de rien d'autre.
Maintenant, je veux rendre le navigateur désactivé s'il est de ses défauts et nous avons essayé de nous connecter encore
parce que si nous n'avons pas essayé de se connecter automatiquement, je veux en fait afficher l'écran de démarrage, donc si
nous ne sommes pas authentifiés et nous l'avons fait essayez pas encore notre connexion automatique.
Eh bien, nous ne savons pas si l'utilisateur peut être un authentificateur ou non.
Donc, dans ce cas, je veux afficher l'écran de démarrage maintenant, je veux rapidement un point de vente là-bas et m'assurer que nous sommes tous
sur la même page et que nous comprenons tous pourquoi nous utilisons maintenant cela au lieu du navigateur de commutateur.
Maintenant, tout d'abord, il n'y a plus de commutateur de navigateur dans React Navigation 5.
Mais pourquoi a-t-il été supprimé.
Eh bien, puisque nous configurons maintenant tout avec des composants, nous pouvons utiliser des outils de réaction réguliers pour rendre
ou non un composant.
Si vous ne pensez pas à la navigation, mais à un écran normal où vous avez peut-être un
texte que vous ne souhaitez afficher que de manière conditionnelle, vous utiliserez un état, puis dans J est X, vous n'aurez que
parfois rendu un texte avec une expression ternaire par exemple .
Et nous faisons la même chose ici avec
notre configuration d'itinéraire avec nos configurations d'écran ici. écran
et réagir la navigation dans les coulisses poussiéreux soulevant interprétant notre
configuration et en s'assurant que le bon composant est
rendu à l'écran.
Maintenant, si nous utilisons est désactivé et que nous avons essayé la connexion automatique pour contrôler le navigateur qui peut réellement être rendu en réagissant en utilisant une
telle expression ternaire, nous nous assurons que si, par exemple, il est désactivé, ce n'est pas vrai, il n'y a aucun moyen que
les écrans du navigateur de la boutique puissent être porté à l'écran.
Pourquoi.
Parce que le composant de navigateur de magasin qui contient notre configuration racine liée à la boutique, notre
configuration d'écran, ce composant, n'est rendu que si c'est vrai.
Il n'y a donc aucun moyen de rendre un écran lié à la boutique à l'écran si si désactivé est faux.
Effectuez vraiment cette comparaison avec des éléments de texte normaux ou des zones normales sur un écran que vous restituez sous condition.
Nous faisons la même chose ici, mais pas avec des boîtes et du texte, mais plutôt avec l'ensemble de notre pile de navigation.
C'est ce que nous faisons ici et avec tout cela, si nous enregistrons cela et que nous
le réexécutons sur Android, nous nous retrouvons sur l'écran éteint et si je recharge cela et qu'il reconstruit, nous nous retrouvons à nouveau là-bas.
Maintenant, si j'essaie de me connecter ici,
j'ai un problème ici.
Je reçois une erreur indiquant que la navigation avec une charge utile de boutique n'a pas été bien gérée.
Cela a maintenant du sens si vous y réfléchissez.
Nous n'avons plus de commutateur de navigateur.
Au lieu de cela, nous contrôlons simplement le navigateur que nous voulons afficher dans quelles circonstances.
Alors pourquoi obtenons-nous cela.
Pouvez-vous le découvrir et le réparer vous-même.
Sinon, nous le ferons ensemble, nous le réparerons ensemble dans la prochaine conférence.