1 00:00:02,380 --> 00:00:07,300 Travaillons donc à porter toute notre logique ici dans le navigateur d'application. 2 00:00:07,300 --> 00:00:13,870 Nous avons commencé avec cette pile factice ici et c'est bien mais finalement pas ce dont nous avons besoin. 3 00:00:13,900 --> 00:00:19,390 Maintenant, c'est à vous de décider où vous effectuez cette configuration, mais puisque nous l'avons fait essentiellement dans le fichier de navigation 4 00:00:19,390 --> 00:00:20,560 de la boutique auparavant. 5 00:00:20,560 --> 00:00:22,330 Je vais également continuer de le faire là-bas. 6 00:00:22,360 --> 00:00:24,370 Même avec cette nouvelle logique. 7 00:00:24,370 --> 00:00:26,560 Donc, ce que je vais faire, c'est un navigateur d'application. 8 00:00:26,560 --> 00:00:34,190 Je vais en fait me débarrasser de ma pile ici et je vais me débarrasser de cette importation et je m'en 9 00:00:34,190 --> 00:00:41,290 débarrasserai ici Je laisserai le conteneur de navigation et je réinitialiserai cette importation, mais en fin de compte, cela 10 00:00:41,290 --> 00:00:42,760 changera un peu. 11 00:00:42,760 --> 00:00:49,420 Mais maintenant, passons au navigateur de magasin, tout d'abord, nous pouvons supprimer cette importation de React Navigation, vous n'en 12 00:00:49,540 --> 00:00:50,990 aurez pas besoin. 13 00:00:51,100 --> 00:00:59,140 Laissons le reste pour le moment, mais au lieu de cette importation supprimée, nous pouvons importer à partir de la pile de 14 00:00:59,350 --> 00:01:08,870 navigation React et tout est déjà à partir du tirage et de la pile d'annonces, nous importons créer le navigateur de pile à partir du tirage 15 00:01:08,870 --> 00:01:12,600 barre oblique, nous importons créer le navigateur de dessin. 16 00:01:12,760 --> 00:01:17,050 Maintenant, nous pouvons faire défiler vers le bas et laisser les options de navigation par défaut ici en fait. 17 00:01:17,080 --> 00:01:24,070 Heureusement, le nom sonne et comment vous configurez généralement les choses et ce que vous pouvez configurer n'a pas 18 00:01:24,070 --> 00:01:30,490 vraiment changé la façon dont vous appliquez la configuration modifiée et donc ce qui doit absolument changer 19 00:01:30,880 --> 00:01:40,770 est cette partie ici notre premier navigateur de pile je vais pour l'instant dupliqué puis supprimé ou commenté pour avoir une comparaison côte à côte, je vais 20 00:01:40,770 --> 00:01:47,940 créer une nouvelle constante que je nommerai navigateur de pile de produits juste pour que nous n'ayons pas de 21 00:01:48,420 --> 00:01:53,130 conflit de noms et qu'il soit vraiment évident que cela contiendra une 22 00:01:53,130 --> 00:02:00,780 pile de pages une pile de écrans et nous le faisons avec create stack navigateur avec cette fonction ce que je 23 00:02:00,780 --> 00:02:09,770 vous ai montré avant que cette fonction ne prenne plus de paramètres à la place je vais créer une nouvelle constante ici les produits 24 00:02:09,890 --> 00:02:10,670 Navigator. 25 00:02:10,670 --> 00:02:14,750 Alors maintenant, nous avons un conflit de noms, mais cela sera supprimé de toute façon. 26 00:02:14,870 --> 00:02:20,420 Et ceci est maintenant un composant réactif du composant fonctionnel et nous pourrions descendre pour tous les stockés 27 00:02:20,420 --> 00:02:26,210 dans un fichier séparé juste pour cette comparaison côte à côte et parce que nous avions tout dans ce 28 00:02:26,420 --> 00:02:32,390 fichier avant je vais maintenant configurer tous ces composants de navigateur avec notre navigation la configuration ici dans ce 29 00:02:32,390 --> 00:02:36,480 fractionnement de fichier unique, c'est certainement quelque chose que vous pourriez envisager. 30 00:02:36,590 --> 00:02:44,450 Voici donc notre navigateur de produits et là, je vais maintenant retourner la pile de produits Navigator Dot Navigator comme vous 31 00:02:44,450 --> 00:02:52,910 l'avez appris et dans leur écran de points de navigateur de pile de produits et nous avions trois écrans auparavant, donc je vais 32 00:02:52,910 --> 00:02:54,860 reproduire cela deux fois. 33 00:02:54,860 --> 00:02:57,580 Nous avions donc trois écrans là-dedans. 34 00:02:57,710 --> 00:03:03,730 Maintenant, nous pouvons les configurer, attribuons un nom au premier écran et ce sera l'aperçu des produits. 35 00:03:03,980 --> 00:03:09,180 Maintenant, le composant qui doit être chargé est notre composant d'écran de présentation des produits. 36 00:03:09,200 --> 00:03:19,130 Donc, fondamentalement, ce que nous avons cartographié auparavant et maintenant pour le deuxième écran, le nom est le détail du produit. 37 00:03:19,130 --> 00:03:24,530 Donc, ce que nous avions ici et assurez-vous de conserver ces noms afin que 38 00:03:24,530 --> 00:03:31,400 toute la logique de navigation que vous avez dans votre application, car cela ne doive pas être modifiée pour que 39 00:03:31,670 --> 00:03:37,660 cela fonctionne toujours et ici le composant qui devrait être chargé lorsque nous voulons atteindre cet écran 40 00:03:37,660 --> 00:03:45,770 est le composant d'écran détaillé du produit, tout comme nous en avions un là-bas, reformons-le et pour le dernier écran, le nom est chariot. 41 00:03:45,860 --> 00:03:52,630 Ce que nous avions ici et nous voulons aller à l'écran cardiaque comme ça. 42 00:03:52,670 --> 00:03:57,920 Alors maintenant, nous avons configuré cette pile de navigation avec cette nouvelle logique basée sur les composants. 43 00:03:58,010 --> 00:04:03,620 Maintenant, nous pouvons importer dans le navigateur d'application et pour papa, nous devons simplement 44 00:04:03,620 --> 00:04:11,510 ajouter un mot-clé d'exportation en face de lui afin que cette constante ce composant soit exporté ici dans ce fichier 45 00:04:11,510 --> 00:04:21,980 et dans le navigateur d'application, nous n'importons pas maintenant le navigateur de la boutique mais nous importons le navigateur de produits nouvellement exporté que nous importons ici 46 00:04:22,310 --> 00:04:29,910 et dans notre conteneur de navigation, nous pouvons maintenant ajouter le navigateur de produit comme ceci et nous pouvons 47 00:04:29,910 --> 00:04:33,720 nous débarrasser de l'importation d'écran de présentation du produit. 48 00:04:33,840 --> 00:04:35,790 Revenons maintenant au navigateur de la boutique. 49 00:04:36,030 --> 00:04:38,840 Jetons un œil à ces options. 50 00:04:38,840 --> 00:04:42,360 Ensuite, les options de navigation que nous avions ici sur cette pile. 51 00:04:42,360 --> 00:04:45,160 Que faisons-nous avec ça. 52 00:04:45,160 --> 00:04:52,600 Eh bien, nous avons en fait deux options ici sur notre navigateur de produits sur l'ancien navigateur avec 53 00:04:53,230 --> 00:04:55,370 l'ancienne icône de la logique. 54 00:04:55,480 --> 00:05:02,800 Cette pile devrait avoir dans le tiroir que nous ajouterons plus tard la seconde sont nos options de navigation par défaut qui 55 00:05:03,010 --> 00:05:07,660 devraient être appliquées à tous les écrans qui font partie de ce navigateur. 56 00:05:07,660 --> 00:05:12,250 Et en fait, il y a aussi un troisième endroit où nous configurons les choses dans le passé. 57 00:05:12,280 --> 00:05:14,150 Et c'était sur certains écrans. 58 00:05:14,320 --> 00:05:21,680 Jetons un œil à notre écran de présentation des produits qui se trouve dans le dossier de la boutique si nous faisons défiler vers le bas. 59 00:05:21,760 --> 00:05:28,870 Nous avions cette propriété d'options de navigation que nous avons ajoutée à l'objet fonctionnel de l'écran de vue d'ensemble des produits et c'était une 60 00:05:28,870 --> 00:05:33,850 fonction où nous configurons des choses comme le titre de l'en-tête mais aussi ce qui se trouve 61 00:05:33,850 --> 00:05:37,630 à gauche et à droite de l'en-tête maintenant avec cette nouvelle logique. 62 00:05:37,670 --> 00:05:40,650 Vous ne faites plus ça comme ça. 63 00:05:40,650 --> 00:05:46,940 Au lieu de cela, nous pouvons copier l'ensemble de cette configuration ici. 64 00:05:47,170 --> 00:05:48,740 Donc, tout cela, nous pouvons le copier. 65 00:05:48,820 --> 00:05:54,680 Nous pouvons le commenter ici dans le composant écran et aller au composant navigateur d'application. 66 00:05:54,820 --> 00:06:00,640 Excusez-moi de magasiner le composant navigateur où nous avons configuré notre navigation de pile et maintenant 67 00:06:00,640 --> 00:06:08,830 sur l'écran où nous voulons avoir ces options, nous pouvons ajouter un troisième accessoire et c'est la propriété de options et deux options. 68 00:06:08,830 --> 00:06:16,360 Vous pouvez analyser exactement ce que vous aviez dans le composant avant, donc vous passez de la fonction à une fonction 69 00:06:16,440 --> 00:06:16,990 correcte. 70 00:06:17,050 --> 00:06:18,640 Qui reçoit le paramètre 71 00:06:21,330 --> 00:06:27,900 de données NAF qui renvoie ensuite un objet de configuration, la valeur concrète de ce paramètre sera alimentée par 72 00:06:27,900 --> 00:06:34,950 Reaction Navigation et les noms de configuration que nous pouvons définir ici, les choses que nous pouvons configurer n'ont pas 73 00:06:34,950 --> 00:06:35,540 changé. 74 00:06:35,670 --> 00:06:38,550 Nous pouvons donc toujours définir un titre d'en-tête avant ou à gauche. 75 00:06:38,550 --> 00:06:41,330 Donc, tout cela est exactement le même que vous avez appris. 76 00:06:41,340 --> 00:06:43,290 Cela fonctionne exactement de la même manière. 77 00:06:43,350 --> 00:06:47,760 Heureusement, nous pouvons le faire ici et naviguer dans le navigateur. 78 00:06:47,760 --> 00:06:55,200 Mais bien sûr, cela deviendrait rapidement très très important si nous avions toutes les différentes configurations 79 00:06:55,440 --> 00:06:57,630 spécifiques à l'écran ici. 80 00:06:57,630 --> 00:07:00,390 Ce n'est donc pas ce que je vais faire ici. 81 00:07:00,450 --> 00:07:03,150 Au lieu de cela, je vois deux options. 82 00:07:03,150 --> 00:07:10,170 La première est que nous faisons notre configuration à partir de l'écran de navigation de la pile de produits dans le composant d'écran. 83 00:07:10,170 --> 00:07:14,250 La deuxième est que nous ne conservons que nos options et c'est l'approche que je suivrai. 84 00:07:14,730 --> 00:07:23,850 Donc, de retour dans l'aperçu du produit, je commenterai cela, mais maintenant, ici, nous ne définissons plus le fonctionnement comme 85 00:07:23,900 --> 00:07:33,110 une valeur pour les options de navigation, mais nous l'exportons simplement comme une constante une constante à laquelle nous devons donner 86 00:07:33,110 --> 00:07:42,360 un nom et je '' ll nommera ces options d'écran aucune option d'écran ne détient cette fonction et nous l'exportons par 87 00:07:42,360 --> 00:07:43,670 son nom. 88 00:07:43,850 --> 00:07:49,360 Il ne se heurte pas à l'exportation des composants car nous le faisons ici avec la valeur par défaut. 89 00:07:49,390 --> 00:07:57,340 Alors maintenant, nous exportons est une fonction de configuration, puis le navigateur de la boutique, nous pouvons donc l'importer.En 90 00:07:57,340 --> 00:08:03,940 plus d'importer l'écran de présentation des produits à partir de ce fichier, nous pouvons maintenant 91 00:08:03,970 --> 00:08:12,940 combiner cela avec une importation nommée où nous importons dans la fonction d'options d'écran, puis ici deux options sur cet écran. 92 00:08:13,020 --> 00:08:17,840 Je passe juste un pointeur sur cette fonction, ne l'exécute pas, je la pointe. 93 00:08:17,910 --> 00:08:24,580 Réagissons la navigation exécutée pour vous afin qu'elle puisse tenir dans la valeur 94 00:08:24,610 --> 00:08:32,780 concrète de cette fonction de paramètres de données NAF une fois et avec cela cet écran est configuré. 95 00:08:32,890 --> 00:08:36,490 Maintenant, si nous enregistrons cette annonce, elle se heurte parce que nous avons ce nom en bas. 96 00:08:36,910 --> 00:08:41,470 Donc, pour résoudre ce problème, assurons-nous que nous prenons tous en charge les autres options. 97 00:08:41,470 --> 00:08:47,560 Maintenant, l'option de dessin spécifique est quelque chose que j'examinerai plus tard une fois que nous aurons ajouté un tirage pour les options 98 00:08:47,560 --> 00:08:48,850 de navigation par défaut. 99 00:08:48,850 --> 00:08:54,220 La bonne nouvelle est que nous pouvons toujours appliquer ceux que nous n'avons pas besoin de tout configurer au niveau de l'écran. 100 00:08:54,220 --> 00:08:58,980 Si nous avons une configuration partagée qui affecte tous les écrans d'un navigateur. 101 00:08:59,080 --> 00:09:05,320 Et comment pensez-vous que nous pouvons configurer de telles options générales pour tous ces écrans gratuits ici. 102 00:09:05,320 --> 00:09:09,200 Eh bien, nous les avons installés directement sur le navigateur là-bas. 103 00:09:09,310 --> 00:09:15,520 Nous avons également une petite propriété d'options d'écran, donc pas d'options nommées mais d'options d'écran. 104 00:09:15,610 --> 00:09:21,280 Mais ce sont les options qui seront appliquées à chaque écran ici et les options spécifiques à 105 00:09:21,310 --> 00:09:25,820 l'écran seront fusionnées avec ces options générales comme précédemment dans le cours. 106 00:09:25,830 --> 00:09:29,740 Maintenant, nous passons notre objet d'options de navigation par défaut. 107 00:09:29,850 --> 00:09:36,360 Donc, cet objet là-haut, je viens de nourrir cela comme une valeur pour les options d'écran et c'est tout. 108 00:09:36,360 --> 00:09:41,280 Maintenant, nous pouvons commenter en tant que navigateur de produits ici et tout enregistrer. 109 00:09:41,360 --> 00:09:48,440 Maintenant, une fois que nous faisons cela, nous ne pouvons toujours pas voir le résultat car dans ce fichier de navigateur de boutique, 110 00:09:48,440 --> 00:09:55,370 nous avons toujours beaucoup de code qui utilise l'ancien navigateur ou cette ancienne logique de navigateur et qui pose problème ici. 111 00:09:55,400 --> 00:10:03,090 Maintenant, afin de voir un résultat, je vais temporairement commenter tout cela temporairement et enregistrer à 112 00:10:03,090 --> 00:10:03,710 nouveau. 113 00:10:03,750 --> 00:10:08,660 Pour que cela se reconstruise et que vous voyez, nous obtenons maintenant une erreur. 114 00:10:08,720 --> 00:10:14,300 Eh bien, il y a une chose que nous devons réellement ajuster et le composant de présentation du produit 115 00:10:14,300 --> 00:10:16,800 dans notre option d'écran orienter l'en-tête à gauche. 116 00:10:16,880 --> 00:10:25,060 Cela doit maintenant être la fonction ici qui renvoie notre balisage de marque JSA X et la même chose pour l'en-tête à droite. 117 00:10:25,070 --> 00:10:30,260 Nous devons donc convertir les deux en fonctions et vous pouvez simplement le faire en ajoutant une liste de paramètres vide 118 00:10:30,410 --> 00:10:31,580 puis la flèche ici. 119 00:10:31,670 --> 00:10:38,090 Note latérale, vous pouvez accepter le paramètre ici si vous le souhaitez et ce serait des accessoires, car il s'agit 120 00:10:38,090 --> 00:10:43,910 en fait d'un oiseau réactif qui trouve ici une valeur concrète pour les accessoires sera alimentée 121 00:10:43,910 --> 00:10:50,240 et par la navigation de réaction et les valeurs que vous pouvez obtenir à partir de là peuvent être 122 00:10:50,240 --> 00:10:58,660 trouvé dans les documents officiels avec cet ajustement fait si nous sommes maintenant en sécurité, il redémarre maintenant ici et nous voyons à nouveau cet écran. 123 00:10:58,660 --> 00:11:01,830 Reprenant définitivement notre configuration. 124 00:11:01,840 --> 00:11:09,360 Gardez à l'esprit que le tirage au sort ne fonctionnera pas parce que nous n'avons pas encore ajouté le dessin 125 00:11:09,360 --> 00:11:17,140 et la navigation, donc avec tout cela, nous avons appris comment configurer nos composants nos écrans et le navigateur de pile global 126 00:11:17,140 --> 00:11:19,930 avec cette nouvelle logique avec cela fait. 127 00:11:19,930 --> 00:11:26,020 Il est temps de continuer le portage. N'hésitez pas à faire les prochaines étapes par vous-même et un port 128 00:11:26,020 --> 00:11:32,620 pour filtrer les options spécifiques pour les détails du produit et l'écran de la carte, puis nous passerons à la prochaine 129 00:11:32,620 --> 00:11:33,090 pile. 130 00:11:33,190 --> 00:11:35,230 Et puis bien sûr aussi poursuivre le tirage au sort.