1 00:00:02,410 --> 00:00:05,910 La majorité de nos fichiers n'ont pas besoin d'être modifiés. 2 00:00:06,040 --> 00:00:12,220 Ce que nous devons changer, c'est ce qui se passe dans les fichiers de navigation et le dossier 3 00:00:13,000 --> 00:00:19,540 de navigation dans l'application J. S. vous vous souvenez peut-être de rendre 4 00:00:19,570 --> 00:00:25,510 le conteneur de navigation ici et le conteneur de navigation n'est qu'un composant personnalisé ici où nous avons finalement 5 00:00:25,580 --> 00:00:31,330 notre logique pour vérifier si l'utilisateur est authentifié, puis nous rendons un navigateur de boutique qui est notre 6 00:00:31,330 --> 00:00:36,550 navigateur d'itinéraire créé ici avec React Navigation et c'est là que les choses doivent changer maintenant. 7 00:00:36,550 --> 00:00:39,410 Commençons maintenant avec le conteneur de navigation. 8 00:00:39,430 --> 00:00:45,640 Nous n'aurons plus besoin de ce code ici où nous naviguerons manuellement ailleurs si l'utilisateur est authentifié, car vous 9 00:00:46,150 --> 00:00:52,090 verrez plus tard que cela sera désormais géré différemment avec cette configuration basée sur les composants afin que vous 10 00:00:52,780 --> 00:00:55,040 puissiez supprimer utiliser le fait ici. 11 00:00:55,150 --> 00:01:02,920 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 12 00:01:02,920 --> 00:01:09,620 importations ici, nous n'avons plus besoin de deux crochets ici et nous n'avons plus besoin de cette importation. 13 00:01:09,760 --> 00:01:17,020 Il nous reste donc le navigateur de la boutique et ce n'est plus vraiment quelque chose dont nous avons besoin ici. 14 00:01:17,110 --> 00:01:24,040 Nous n'ajoutons pas un navigateur de boutique en tant que composant comme celui-ci, où nous nous référons ensuite 15 00:01:24,040 --> 00:01:30,760 à la configuration globale du fichier de navigateur de boutique, car cette configuration globale est bien sûr entièrement 16 00:01:30,760 --> 00:01:38,080 configurée avec cette vieille logique d'avoir cette configuration de type registre global qui est simplement ne fonctionne plus avec react 17 00:01:38,080 --> 00:01:39,140 navigation 5. 18 00:01:39,790 --> 00:01:46,990 Au lieu de cela, nous devons maintenant migrer tout cela vers la nouvelle approche de cette approche basée sur les composants et 19 00:01:46,990 --> 00:01:47,950 le faire. 20 00:01:48,130 --> 00:01:51,980 Je veux commencer assez simplement dans le conteneur de navigation. 21 00:01:52,090 --> 00:01:57,970 Je vais configurer un nouveau navigateur de pile qui n'est pour l'instant qu'un navigateur factice. 22 00:01:57,970 --> 00:02:04,240 Alors avez-vous vu comment cela fonctionne généralement avant que nous n'appliquions plus tard cela 23 00:02:04,240 --> 00:02:07,270 à notre application réelle pour cela. 24 00:02:07,410 --> 00:02:10,000 Ajoutons l'importation ici à partir de réagir. 25 00:02:10,020 --> 00:02:13,020 Navigation slash native. 26 00:02:13,020 --> 00:02:19,070 Et à partir de là, nous devons importer la navigation dans le conteneur de navigation. 27 00:02:19,080 --> 00:02:24,460 Cela peut être déroutant car notre propre composant ici est tout le conteneur de navigation nommé. 28 00:02:24,600 --> 00:02:31,890 Donc, pour éviter toute confusion ici, je renommerai notre propre composant ici en navigateur d'application ou comme vous voulez le nommer, 29 00:02:31,890 --> 00:02:37,260 donc je le renommerai ici et tout cela pour éviter toute confusion même s'il n'est 30 00:02:37,920 --> 00:02:45,330 pas techniquement requis dans le composant d'application dans l'application oui je le ferai importé en tant que navigateur d'application Je renommerai 31 00:02:45,420 --> 00:02:53,220 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 32 00:02:53,460 --> 00:02:55,680 ce nouveau nom de fichier. 33 00:02:55,680 --> 00:02:59,030 Et puis ici, je rend le navigateur d'application. 34 00:02:59,070 --> 00:03:02,430 Maintenant, je viens de faire ces changements de nom pour éviter toute confusion. 35 00:03:02,490 --> 00:03:09,300 La partie la plus importante se produit à l'intérieur de cette application Navigator, qui était auparavant notre conteneur de navigation. 36 00:03:09,300 --> 00:03:12,120 Maintenant, nous importons un conteneur de navigation à partir de React Native. 37 00:03:12,120 --> 00:03:15,450 Mais papa sera un composant différent de ce que nous avons construit dans le passé. 38 00:03:15,480 --> 00:03:21,690 Il vient de partager le même nom, c'est pourquoi je l'ai renommé plus important que ce conteneur de navigation. 39 00:03:21,690 --> 00:03:26,910 Pour l'instant, nous importons quelque chose de la pile de slash de navigation ad react. 40 00:03:27,120 --> 00:03:31,500 Et c'est maintenant un paquet qui n'existe pas et que nous n'avons pas encore installé. 41 00:03:32,280 --> 00:03:34,440 Arrêtons donc à nouveau ce processus. 42 00:03:34,500 --> 00:03:43,020 Et avec npm install dash dash safe, installons-le dans la pile de slash de navigation de sorte que NPM installe Ashutosh safe dans 43 00:03:43,020 --> 00:03:46,010 la pile de slash de navigation de react. 44 00:03:46,170 --> 00:03:51,840 Cela installera aux États-Unis la logique de navigation de la pile et nous pouvons tous déjà installer un 45 00:03:51,840 --> 00:03:58,380 certain nombre de paquets car nous en aurons besoin plus tard et c'est au niveau de réagir à la navigation slash 46 00:03:58,380 --> 00:04:06,760 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 47 00:04:06,930 --> 00:04:14,190 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. 48 00:04:14,190 --> 00:04:19,500 Nous pouvons en importer quelque chose et c'est quelque chose comme D create navigateur de pile. 49 00:04:19,650 --> 00:04:26,490 Maintenant, créer un navigateur de pile est une fonction que nous connaissons déjà dans la boutique Navigator qui utilise toujours l'ancienne 50 00:04:26,490 --> 00:04:33,210 navigation React dans laquelle nous importons également pour créer un navigateur de pile à partir de Reaction Navigation ou si vous 51 00:04:33,210 --> 00:04:36,990 utilisiez le travail pour ce package à partir d'un package séparé. 52 00:04:37,200 --> 00:04:43,770 Mais nous avons également dû créer un navigateur de pile et créer des navigateurs de dessin. 53 00:04:43,880 --> 00:04:53,870 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 54 00:04:53,990 --> 00:04:58,760 l'aperçu des produits et les détails de l'écran de la carte que 55 00:04:58,760 --> 00:05:05,000 nous avons regroupés en une seule pile, puis nous avons eu plusieurs de ces piles de les composer 56 00:05:05,000 --> 00:05:12,070 pour rassembler dans notre tirage Navigateur que nous avons finalement combiné avec l'écran hors tension dans le navigateur de commutateur. 57 00:05:12,090 --> 00:05:16,710 Maintenant, revenons à notre navigateur d'application, que faisons-nous avec créer un navigateur de pile ici. 58 00:05:16,740 --> 00:05:18,560 Cela fonctionne désormais différemment. 59 00:05:18,870 --> 00:05:25,260 Maintenant, nous l'utilisons pour créer un nouveau composant avec lui et je vais l'appeler ma pile. 60 00:05:25,260 --> 00:05:31,440 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é. 61 00:05:31,440 --> 00:05:33,810 Et c'est maintenant un énorme changement. 62 00:05:33,960 --> 00:05:39,120 Vous ne passez maintenant aucun objet pour créer un navigateur de pile pour le configurer. 63 00:05:39,170 --> 00:05:42,900 Au lieu de cela, c'est une fonction qui ne veut pas d'objet. 64 00:05:42,900 --> 00:05:48,490 C'est une fonction qui n'a besoin d'aucun objet alors que fait-elle alors. 65 00:05:48,490 --> 00:05:57,720 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 66 00:05:57,720 --> 00:05:58,490 précis. 67 00:05:58,500 --> 00:06:04,890 Nous devons encapsuler toute la logique de navigation avec le composant de conteneur de navigation que nous 68 00:06:04,890 --> 00:06:06,800 importons depuis React Navigation Native. 69 00:06:06,870 --> 00:06:14,730 Vous pouvez considérer ce composant de conteneur de navigation comme la version du composant du conteneur d'application que nous 70 00:06:15,270 --> 00:06:19,080 avons créé avec create container d'application dans l'ancienne configuration. 71 00:06:19,080 --> 00:06:24,830 Là, nous avons dû envelopper notre navigateur fini avec le conteneur de création d'applications. 72 00:06:24,840 --> 00:06:31,680 Maintenant, nous devons envelopper notre configuration de navigation basée sur les composants à faire avec le conteneur de navigation. 73 00:06:32,310 --> 00:06:39,800 Donc, ici, nous configurons maintenant notre logique en ce qui concerne les pages que nous voulons pouvoir charger. 74 00:06:39,870 --> 00:06:45,640 Et ici, nous utilisons maintenant ma pile comme composant de réaction, mais pas comme ça. 75 00:06:45,690 --> 00:06:50,050 Mais ici, nous avons besoin du composant de navigation DOT. 76 00:06:50,130 --> 00:06:58,620 Donc, ma pile est en fait un objet avec une propriété de navigateur et les valeurs stockées 77 00:06:58,620 --> 00:07:02,520 dans cette propriété sont maintenant un composant. 78 00:07:02,530 --> 00:07:08,110 Alors maintenant, nous pouvons créer ce composant et entre la taxe d'ouverture et de clôture de ce 79 00:07:08,110 --> 00:07:13,550 composant, nous mettons maintenant essentiellement les différents écrans que nous voulons faire partie de cette pile. 80 00:07:13,570 --> 00:07:20,800 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 81 00:07:21,070 --> 00:07:24,790 navigateur de pile cette carte des composants d'écran et leurs noms. 82 00:07:24,850 --> 00:07:30,140 C'est ce que nous mettons en place ici entre cette balise d'ouverture et de fermeture. 83 00:07:30,190 --> 00:07:36,900 Vous pourriez donc penser que ce que nous faisons, c'est que nous ajoutons le composant d'écran de présentation du produit à droite. 84 00:07:36,910 --> 00:07:41,680 C'est l'un de nos composants, nous ajouterions une importation que nous n'avons pas faite ici parce que 85 00:07:41,980 --> 00:07:45,440 c'est faux mais vous pourriez penser que nous le faisons presque bien. 86 00:07:45,790 --> 00:07:51,430 Ce serait certainement l'écran que nous voulons avoir dans le cadre de ce navigateur, mais il n'aurait pas 87 00:07:51,430 --> 00:07:52,410 de nom. 88 00:07:52,450 --> 00:07:58,210 Maintenant, nous avons besoin d'un nom pour pouvoir y naviguer par exemple afin de pouvoir déclencher une navigation quelque part 89 00:07:58,210 --> 00:07:59,350 dans notre application. 90 00:07:59,350 --> 00:08:03,570 C'est pourquoi nous avons également un nom ici sur l'ancienne configuration. 91 00:08:03,700 --> 00:08:05,530 Au lieu de cela, nous faisons quelque chose de différent. 92 00:08:05,530 --> 00:08:13,090 Nous utilisons à nouveau ma pile cet objet là-haut et maintenant une deuxième propriété dont il a la propriété screen tout 93 00:08:13,570 --> 00:08:19,930 comme la propriété navigateur, la propriété screen contient également un composant react et donc nous pouvons le 94 00:08:19,930 --> 00:08:21,160 rendre comme ceci. 95 00:08:21,160 --> 00:08:27,820 C'est maintenant un composant qui nous permet de définir un écran qui devrait faire partie de ce navigateur de pile 96 00:08:27,820 --> 00:08:35,620 ici et nous le configurons à l'aide d'accessoires maintenant parce que nous travaillons avec un composant ici, donc la configuration fonctionne avec les 97 00:08:35,620 --> 00:08:42,430 accessoires comme c'est toujours le cas où nous travaillons avec des composants pour donner un nom à cet écran, nous 98 00:08:42,460 --> 00:08:50,350 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 99 00:08:50,860 --> 00:08:57,370 nom et laisser réagir la navigation savoir quel composant charger lorsque nous ciblons ce nom lorsque nous faisons cela 100 00:08:57,370 --> 00:09:04,690 avec une action d'immigration par exemple, nous ajoutons un deuxième accessoire le composant prop et cela devrait contenir un pointeur sur le 101 00:09:05,050 --> 00:09:10,770 composant que nous voulons charger lorsque nous voulons aller à cet écran avec ce nom. 102 00:09:10,900 --> 00:09:22,080 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 103 00:09:22,080 --> 00:09:23,750 présentation des produits. 104 00:09:23,940 --> 00:09:27,910 Alors maintenant nous en avons besoin et je suis passé ici. 105 00:09:28,020 --> 00:09:30,780 Maintenant, il est important de ne pas créer le composant ici. 106 00:09:30,810 --> 00:09:36,960 Nous indiquons simplement que nous utilisons simplement son nom qui est exporté à partir de ce fichier. 107 00:09:36,960 --> 00:09:42,750 Et avec cela, nous avons maintenant notre première petite pile installée ici. 108 00:09:42,780 --> 00:09:46,240 Maintenant, commentons cette importation depuis le navigateur de la boutique. 109 00:09:46,260 --> 00:09:48,360 Nous n'en avons plus besoin pour le moment. 110 00:09:48,360 --> 00:09:52,670 Enregistrons tout et avons lancé son sur Android disons. 111 00:09:52,830 --> 00:09:58,250 Et lorsque vous faites cela, il crée le bundle javascript et s'ouvre sur l'appareil Android. 112 00:09:58,260 --> 00:10:01,470 Et ce que vous verrez est notre écran de présentation des produits. 113 00:10:01,470 --> 00:10:02,790 Bien sûr, cela semble un peu différent. 114 00:10:02,790 --> 00:10:04,770 Bien sûr, il manque les boutons d'en-tête. 115 00:10:04,800 --> 00:10:07,330 Il manque toute la configuration de l'en-tête. 116 00:10:07,350 --> 00:10:13,740 Le titre est tout faux, mais cela a du sens parce que nous n'utilisons plus l'ancien navigateur 117 00:10:13,740 --> 00:10:21,500 où nous avions toute cette configuration mais la nouvelle et c'est juste une preuve que cela fonctionne et comment cela fonctionne. 118 00:10:21,600 --> 00:10:30,240 Maintenant, avec cette connaissance à l'esprit, laissons maintenant ce petit exemple ici et portons en fait notre navigation entière configurée 119 00:10:30,240 --> 00:10:32,910 ici vers cette nouvelle logique.