1
00:00:02,430 --> 00:00:04,130
Nous progressons donc bien.

2
00:00:04,140 --> 00:00:08,190
Nous avons migré tous nos navigateurs ou presque tous.

3
00:00:08,190 --> 00:00:12,930
Maintenant, qu'en est-il du commutateur de navigateur vide de navigateur ICI.

4
00:00:12,930 --> 00:00:15,210
BIEN NOUS VOUS AVONS ARRÊTÉ Navigateur à coup sûr.

5
00:00:15,240 --> 00:00:21,300
C'est un navigateur de pile qui est responsable de l'écran hors tension et nous.

6
00:00:21,540 --> 00:00:23,610
Et le navigateur de commutateur.

7
00:00:23,610 --> 00:00:26,490
Eh bien, nous n'aurons plus besoin de changer de navigateur.

8
00:00:26,520 --> 00:00:31,600
Il n'y a pas de paquet de commutateurs de navigation slash at react ou quelque chose comme ça.

9
00:00:31,800 --> 00:00:33,810
Mais j'y reviendrai quand nous en aurons besoin.

10
00:00:33,960 --> 00:00:42,960
Donc pour l'instant, créons notre navigateur off ou notre navigateur off stack ici en appelant navigateur.

11
00:00:42,970 --> 00:00:52,410
En appelant create stack navigator et exportez notre constante off navigator year qui est à nouveau un composant

12
00:00:52,410 --> 00:00:59,480
react juste comme avant lorsque nous revenons de stack navigator dot navigator.

13
00:00:59,550 --> 00:01:05,850
Et là-bas, nous avons notre écran à points de navigateur de bureau et le nom de l'écran est éteint.

14
00:01:05,850 --> 00:01:12,470
Comme nous l'avons ici et que le composant dont nous avons besoin est hors écran, c'est tout.

15
00:01:12,490 --> 00:01:14,680
Maintenant, nous avons les options diable NAF ici.

16
00:01:14,680 --> 00:01:22,170
Les options d'écran du navigateur doivent donc être les options de sieste par défaut et 40 options spécifiques à l'écran.

17
00:01:22,180 --> 00:01:30,160
Jetons un coup d'œil à l'écran hors tension et si nous faisons défiler vers le bas, nous avons également quelques options ici.

18
00:01:30,190 --> 00:01:36,240
Exportons donc nos options d'écran ici comme nous l'avons fait auparavant.

19
00:01:36,280 --> 00:01:42,980
Exportons-le, puis allons dans le navigateur de la boutique ici et sur cet écran.

20
00:01:42,980 --> 00:01:50,960
Définissons les options deux options hors écran que nous devons maintenant également ajouter en

21
00:01:51,440 --> 00:02:01,210
tant qu'importation en haut de l'écran, nous importons les options d'écran en tant qu'options hors écran, c'est tout.

22
00:02:01,220 --> 00:02:07,400
Maintenant, nous avons également ces écrans de démarrage, mais si nous regardons de plus près dans le passé, nous

23
00:02:07,460 --> 00:02:13,470
venons de le signaler directement depuis notre navigateur de commutateur, ce qui nous laisse une seule question.

24
00:02:13,730 --> 00:02:16,950
Qu'en est-il de ce navigateur de commutateur.

25
00:02:17,300 --> 00:02:23,040
Dans le passé, cela aurait été le premier écran que vous voyez une fois la pomme chargée, car c'est

26
00:02:23,280 --> 00:02:26,420
le premier écran le plus haut de cette configuration.

27
00:02:26,420 --> 00:02:33,590
Et puis nous avions une logique dans cet ancien conteneur de navigation que nous avons construit plus tôt, où nous vérifions

28
00:02:33,590 --> 00:02:39,800
si nous sommes authentifiés et si ce n'est pas vrai si nous ne sommes pas authentifiés, nous redirigerons

29
00:02:39,800 --> 00:02:41,420
l'utilisateur vers cet écran.

30
00:02:41,420 --> 00:02:44,470
Maintenant, quand pourrions-nous atteindre l'écran du magasin.

31
00:02:44,480 --> 00:02:46,880
Eh bien, jetons un œil à l'écran de démarrage.

32
00:02:47,060 --> 00:02:54,350
Là, nous voyons que nous avons essayé de nous authentifier et ici, nous irions à l'écran des magasins éventuellement lorsque la

33
00:02:54,350 --> 00:02:55,900
connexion automatique nous réussirait.

34
00:02:55,910 --> 00:02:58,410
C'est la logique que nous avons écrite là-bas.

35
00:02:58,430 --> 00:03:03,400
Maintenant, c'est encore une logique qui a beaucoup de sens.

36
00:03:03,450 --> 00:03:11,100
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

37
00:03:11,100 --> 00:03:19,390
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 à

38
00:03:19,420 --> 00:03:20,830
la page off.

39
00:03:20,830 --> 00:03:26,260
Si nous constatons que les données sur le jeton sont expirées ou non, nous allons à la page off.

40
00:03:26,260 --> 00:03:34,750
Si nous réussissons avec tout et que nous avons un jeton valide, nous allons à la place à la page de

41
00:03:35,110 --> 00:03:41,110
la boutique et nous envoyons une action où nous authentifions l'utilisateur qui change d'état

42
00:03:41,110 --> 00:03:49,750
et notre magasin redux qui définit initialement les jetons sur ce jeton dans notre magasin est maintenant maintenant nous pouvons l'utiliser.

43
00:03:49,760 --> 00:03:58,250
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

44
00:03:58,340 --> 00:03:59,430
le fais ici.

45
00:03:59,480 --> 00:04:03,920
Nous nous débarrassons donc de toutes ces actions de navigation à la place.

46
00:04:04,460 --> 00:04:06,890
Que se passe-t-il si nous revenons ici.

47
00:04:06,890 --> 00:04:11,840
Eh bien, si nous revenons ici, l'exécution du dysfonctionnement arrête l'Indiana à droite.

48
00:04:11,840 --> 00:04:12,730
Ça s'arrête.

49
00:04:12,830 --> 00:04:17,270
Et ce que nous ne faisons certainement pas, c'est que nous n'envoyons certainement pas l'action.

50
00:04:17,270 --> 00:04:20,240
Nous ne définissons donc absolument pas le jeton.

51
00:04:20,240 --> 00:04:22,270
C'est toujours non.

52
00:04:22,640 --> 00:04:27,800
Cela se produit toujours ici, sauf si nous arrivons au fond, auquel cas nous avons un jeton.

53
00:04:27,890 --> 00:04:30,810
Nous nous avons expédiés et le jeton n'est pas nul.

54
00:04:30,830 --> 00:04:32,750
Ils sont souvent dans notre magasin.

55
00:04:32,840 --> 00:04:38,770
Donc, ce jeton que nous gérons avec redux est même maintenant ou il détient une valeur.

56
00:04:38,840 --> 00:04:41,990
Maintenant, je veux ajuster un peu le magasin redux.

57
00:04:42,140 --> 00:04:48,500
La partie off de celui-ci et vous tous pour l'utilisateur et je vais ajouter un nouveau morceau de

58
00:04:48,530 --> 00:04:54,070
données à cet état et c'est la clé a tout essayé pour se connecter.

59
00:04:54,090 --> 00:04:58,300
Vous pouvez le nommer comme vous le souhaitez et je le définirai initialement faux ici.

60
00:04:58,300 --> 00:05:02,290
Je veux enregistrer si nous avons essayé de connecter l'utilisateur ou non.

61
00:05:02,290 --> 00:05:04,150
Maintenant, si nous nous authentifions.

62
00:05:04,150 --> 00:05:11,850
Donc, si nous envoyons une action avec cet identifiant, je définirai alors essayez de vous connecter automatiquement à true.

63
00:05:11,890 --> 00:05:19,240
Je vais également ajouter une nouvelle action ici dans les actions désactivées et pour cela, j'ajouterai

64
00:05:19,240 --> 00:05:31,820
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

65
00:05:31,910 --> 00:05:38,070
pour cela set a essayé un L qui ne prend aucun argument.

66
00:05:38,070 --> 00:05:44,040
Et où je n'ai pas retourné mon objet d'action où taper est juste défini.

67
00:05:44,060 --> 00:05:45,200
A essayé un l ..

68
00:05:45,230 --> 00:05:49,020
Vous pouvez également le mettre en bas du fichier, peu importe.

69
00:05:49,020 --> 00:05:50,330
Maintenant pourquoi je fais ça.

70
00:05:50,390 --> 00:05:51,460
Vous verrez cela dans la seconde.

71
00:05:51,530 --> 00:05:55,820
Revenons au réducteur de réduction et manipulons ce nouveau boîtier.

72
00:05:55,820 --> 00:05:58,960
L'ensemble de cas a essayé un l.

73
00:05:59,000 --> 00:06:06,620
Assurez-vous que vous importez également des actions de maintenant chaque année, nous renvoyons un nouvel état dans lequel je copie l'ancien

74
00:06:06,620 --> 00:06:13,250
état et où j'ai dit avoir essayé de se connecter automatiquement à true afin que le jeton soit

75
00:06:13,250 --> 00:06:14,750
toujours la connaissance.

76
00:06:14,750 --> 00:06:19,490
Maintenant, mon idée est d'envoyer cette action ici dans l'écran de démarrage.

77
00:06:19,610 --> 00:06:25,790
Dans tous les scénarios où nous étions auparavant allés à l'écran hors, donc où nous avons essayé de nous connecter mais

78
00:06:25,790 --> 00:06:27,280
où nous n'avons pas réussi.

79
00:06:27,380 --> 00:06:38,650
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

80
00:06:39,040 --> 00:06:44,270
ceci et faites-le dans ces deux cas où nous avons précédemment navigué vers l'écran désactivé.

81
00:06:44,320 --> 00:06:48,160
Alors maintenant, nous avons ce nouveau champ et redux et pourquoi je fais ça.

82
00:06:48,160 --> 00:06:49,840
Pourquoi est-ce utile?

83
00:06:49,840 --> 00:06:55,480
Eh bien, car avec Reaction Navigation 5, il n'y a plus de commutateur de navigation car nous n'en avons plus besoin

84
00:06:55,810 --> 00:06:58,900
puisque nous gérons maintenant l'intégralité de la configuration de notre itinéraire.

85
00:06:59,010 --> 00:07:06,920
Pourquoi les composants sont-ils que nous pouvons simplement rendre dynamiquement les composants pour qu'ils aient un effet ou

86
00:07:06,920 --> 00:07:14,240
non les rendre ainsi dans le navigateur d'application où je rend le navigateur de mes produits.

87
00:07:14,260 --> 00:07:20,820
Il est maintenant temps d'ajouter tous ces navigateurs à configurer, puis de décider quel navigateur doit être

88
00:07:20,830 --> 00:07:24,230
rendu à partir du navigateur de la boutique.

89
00:07:24,330 --> 00:07:27,300
Je veux maintenant importer ce navigateur

90
00:07:31,660 --> 00:07:40,180
de boutique ici que j'exporterai à nouveau en tant que constante, puis ici un navigateur d'application J'importe le navigateur

91
00:07:40,270 --> 00:07:41,320
de boutique.

92
00:07:41,320 --> 00:07:42,850
C'est notre dessin d'un navigateur.

93
00:07:42,850 --> 00:07:45,990
Gardez cela à l'esprit et c'est ce que je veux rendre ici.

94
00:07:46,090 --> 00:07:48,090
Navigateur de boutique.

95
00:07:48,240 --> 00:07:55,020
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

96
00:07:55,020 --> 00:07:59,070
avons mappé à cette clé de boutique dans le navigateur de commutateur.

97
00:07:59,070 --> 00:08:02,350
Maintenant, nous avons tous besoin du navigateur off à l'écran de démarrage.

98
00:08:02,400 --> 00:08:04,190
Voici donc un navigateur d'application.

99
00:08:04,290 --> 00:08:09,290
Je vais importer le navigateur off et ce sont les deux seuls navigateurs que je dois importer ici.

100
00:08:09,330 --> 00:08:15,060
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

101
00:08:16,080 --> 00:08:20,300
ce qui devra également être importé dans le navigateur d'application est maintenant l'écran de démarrage.

102
00:08:20,520 --> 00:08:30,520
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.

103
00:08:30,520 --> 00:08:40,010
Nous avons le navigateur hors tension comme alternative et nous avons également un écran de démarrage en profondeur maintenant, il ne rendra que

104
00:08:40,010 --> 00:08:42,430
l'un des fichiers gratuits et.

105
00:08:42,540 --> 00:08:45,410
Et c'est là que nous pouvons maintenant réutiliser redux.

106
00:08:45,480 --> 00:08:51,000
Je vais copier le sélecteur d'utilisation, car les informations du site sur le jeton

107
00:08:51,000 --> 00:08:57,770
m'intéressent également à en savoir plus sur le champ de connexion que j'ai ajouté à l'état désactivé ici.

108
00:08:57,780 --> 00:09:05,770
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

109
00:09:05,810 --> 00:09:08,280
tout essayé pour me connecter constamment.

110
00:09:08,280 --> 00:09:15,710
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.

111
00:09:15,720 --> 00:09:20,000
Je rend toujours au magasin je ne me soucie de rien d'autre.

112
00:09:20,160 --> 00:09:28,290
Maintenant, je veux rendre le navigateur désactivé s'il est de ses défauts et nous avons essayé de nous connecter encore

113
00:09:28,290 --> 00:09:36,540
parce que si nous n'avons pas essayé de se connecter automatiquement, je veux en fait afficher l'écran de démarrage, donc si

114
00:09:36,540 --> 00:09:42,700
nous ne sommes pas authentifiés et nous l'avons fait essayez pas encore notre connexion automatique.

115
00:09:43,100 --> 00:09:47,180
Eh bien, nous ne savons pas si l'utilisateur peut être un authentificateur ou non.

116
00:09:47,180 --> 00:09:54,580
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

117
00:09:54,700 --> 00:10:00,820
sur la même page et que nous comprenons tous pourquoi nous utilisons maintenant cela au lieu du navigateur de commutateur.

118
00:10:00,830 --> 00:10:05,550
Maintenant, tout d'abord, il n'y a plus de commutateur de navigateur dans React Navigation 5.

119
00:10:05,710 --> 00:10:07,720
Mais pourquoi a-t-il été supprimé.

120
00:10:07,720 --> 00:10:15,010
Eh bien, puisque nous configurons maintenant tout avec des composants, nous pouvons utiliser des outils de réaction réguliers pour rendre

121
00:10:15,010 --> 00:10:16,540
ou non un composant.

122
00:10:16,540 --> 00:10:21,850
Si vous ne pensez pas à la navigation, mais à un écran normal où vous avez peut-être un

123
00:10:21,850 --> 00:10:28,420
texte que vous ne souhaitez afficher que de manière conditionnelle, vous utiliserez un état, puis dans J est X, vous n'aurez que

124
00:10:28,600 --> 00:10:31,990
parfois rendu un texte avec une expression ternaire par exemple .

125
00:10:32,110 --> 00:10:37,660
Et nous faisons la même chose ici avec

126
00:10:37,660 --> 00:10:43,700
notre configuration d'itinéraire avec nos configurations d'écran ici. écran

127
00:10:43,750 --> 00:10:50,770
et réagir la navigation dans les coulisses poussiéreux soulevant interprétant notre

128
00:10:50,800 --> 00:10:56,830
configuration et en s'assurant que le bon composant est

129
00:10:56,830 --> 00:10:59,440
rendu à l'écran.

130
00:10:59,440 --> 00:11:09,210
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

131
00:11:09,220 --> 00:11:17,230
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

132
00:11:17,230 --> 00:11:21,610
les écrans du navigateur de la boutique puissent être porté à l'écran.

133
00:11:21,610 --> 00:11:22,230
Pourquoi.

134
00:11:22,270 --> 00:11:28,840
Parce que le composant de navigateur de magasin qui contient notre configuration racine liée à la boutique, notre

135
00:11:29,260 --> 00:11:33,400
configuration d'écran, ce composant, n'est rendu que si c'est vrai.

136
00:11:33,400 --> 00:11:39,840
Il n'y a donc aucun moyen de rendre un écran lié à la boutique à l'écran si si désactivé est faux.

137
00:11:40,090 --> 00:11:47,560
Effectuez vraiment cette comparaison avec des éléments de texte normaux ou des zones normales sur un écran que vous restituez sous condition.

138
00:11:47,560 --> 00:11:54,000
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.

139
00:11:54,040 --> 00:12:00,170
C'est ce que nous faisons ici et avec tout cela, si nous enregistrons cela et que nous

140
00:12:04,210 --> 00:12:12,860
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.

141
00:12:13,630 --> 00:12:16,450
Maintenant, si j'essaie de me connecter ici,

142
00:12:21,790 --> 00:12:23,930
j'ai un problème ici.

143
00:12:24,100 --> 00:12:30,530
Je reçois une erreur indiquant que la navigation avec une charge utile de boutique n'a pas été bien gérée.

144
00:12:30,540 --> 00:12:32,960
Cela a maintenant du sens si vous y réfléchissez.

145
00:12:32,970 --> 00:12:35,440
Nous n'avons plus de commutateur de navigateur.

146
00:12:35,490 --> 00:12:40,170
Au lieu de cela, nous contrôlons simplement le navigateur que nous voulons afficher dans quelles circonstances.

147
00:12:40,350 --> 00:12:42,410
Alors pourquoi obtenons-nous cela.

148
00:12:42,420 --> 00:12:44,490
Pouvez-vous le découvrir et le réparer vous-même.

149
00:12:44,580 --> 00:12:48,330
Sinon, nous le ferons ensemble, nous le réparerons ensemble dans la prochaine conférence.