1 00:00:02,170 --> 00:00:04,210 Nous travaillons donc avec le navigateur de pile. 2 00:00:04,210 --> 00:00:06,080 Et le tirage au sort. 3 00:00:06,100 --> 00:00:08,950 La logique est exactement la même. 4 00:00:08,950 --> 00:00:18,780 Nous créons notre année navigateur de dessin d'atelier en appelant créer navigateur de dessin et tout comme le navigateur de pile. 5 00:00:18,780 --> 00:00:21,470 Cette fonction ne veut aucun argument. 6 00:00:21,480 --> 00:00:28,980 Au lieu de cela, nous allons configurer notre navigation de dessin dans une approche basée sur les composants ou papa, je vais créer un navigateur de boutique 7 00:00:28,980 --> 00:00:31,500 ici et ce sera un composant de réaction. 8 00:00:31,500 --> 00:00:33,850 Encore une fois, vous pourriez avoir cela dans un fichier séparé. 9 00:00:33,870 --> 00:00:42,210 Je vais tout garder dans un seul fichier pour l'avoir côte à côte avec l'ancien code et dans leur retour, nous retournons la 10 00:00:42,210 --> 00:00:44,160 boutique draw navigator dot navigator. 11 00:00:44,160 --> 00:00:48,170 Même logique qu'auparavant Peu importe que ce soit un match nul. 12 00:00:48,210 --> 00:00:53,460 Et là-dedans, nous avons maintenant deux écrans différents qui peuvent être chargés, le navigateur et réagir 13 00:00:53,460 --> 00:00:59,880 à la navigation s'assurera automatiquement qu'un navigateur est créé pour que nous puissions l'ouvrir avec le même code que 14 00:00:59,880 --> 00:01:03,360 nous avons utilisé auparavant, sans avoir à ajuster cela. 15 00:01:03,360 --> 00:01:10,920 Donc, ici, nous avons maintenant notre écran de point de navigateur de dessin d'atelier et la justice avant de donner un nom à cet écran. 16 00:01:10,920 --> 00:01:13,190 Ici, nous avons deux produits par exemple. 17 00:01:13,440 --> 00:01:17,580 Et ce nom sera alors automatiquement utilisé à l'intérieur du navigateur de dessin. 18 00:01:17,580 --> 00:01:24,110 Bien que vous puissiez également remplacer tout cela si vous le souhaitez et nous avons besoin d'un composant qui est chargé lorsque nous 19 00:01:24,110 --> 00:01:26,450 cliquons sur ce lien dans le navigateur. 20 00:01:26,450 --> 00:01:29,270 Et ici, c'est toujours le navigateur du produit. 21 00:01:29,330 --> 00:01:36,660 Donc, tout comme auparavant, nous pouvons utiliser nos navigateurs de pile même s'ils utilisent maintenant cette approche basée sur les composants en 22 00:01:36,660 --> 00:01:43,770 tant que composants qui devraient être créés dans le cadre d'un autre navigateur dans ce cas, dans le cadre du 23 00:01:43,770 --> 00:01:44,920 navigateur de dessin. 24 00:01:44,940 --> 00:01:51,380 Nous pouvons toujours pointer nos navigateurs de pile en tant que composants ici car ce sont des composants cette année. 25 00:01:51,390 --> 00:01:55,710 Il s'agit d'un composant et il en va de même pour tous nos navigateurs. 26 00:01:55,710 --> 00:02:02,130 Nous créons ici ce sont tous des composants réactifs qui contiennent leurs composants spécifiques de logique de navigation 27 00:02:03,130 --> 00:02:09,670 demandés et les composants globaux comme le navigateur de produits ici peuvent être utilisés dans un navigateur de dessin, 28 00:02:09,670 --> 00:02:18,940 donc je vais le reproduire deux fois afin que nous puissions également ajouter nos commandes ici avec le navigateur de commandes et l'administrateur ici avec le navigateur 29 00:02:19,450 --> 00:02:25,870 d'administration et assurez-vous que vous n'avez aucune erreur dans vos noms car nous les utilisons partout dans l'application 30 00:02:25,870 --> 00:02:28,820 et cette logique n'aura pas besoin d'être ajustée. 31 00:02:28,840 --> 00:02:34,080 Donc, si vous gâchez les noms ici, d'autres parties de l'application ne fonctionneront pas correctement. 32 00:02:34,120 --> 00:02:39,710 Alors maintenant, nous avons mis en place ce navigateur de dessin et maintenant la configuration. 33 00:02:39,730 --> 00:02:42,030 Il y a maintenant deux choses que nous devons considérer. 34 00:02:42,100 --> 00:02:46,560 D'une part, nous devons configurer ici pour le contenu du tirage. 35 00:02:46,570 --> 00:02:52,660 Et deuxièmement, nous voulons configurer nos différents écrans comme le navigateur du produit ou le navigateur de la commande 36 00:02:52,750 --> 00:02:55,510 pour avoir vos propres icônes dans le tiroir. 37 00:02:55,510 --> 00:02:57,100 Commençons par les icônes. 38 00:02:57,160 --> 00:03:02,230 Auparavant, nous avons mis en place que je peux directement dans la configuration du navigateur de pile 39 00:03:02,230 --> 00:03:06,930 que nous voulions utiliser dans un dessin maintenant avec l'approche basée sur les composants. 40 00:03:06,930 --> 00:03:08,420 Nous ne faisons plus ça. 41 00:03:08,430 --> 00:03:17,450 Au lieu de cela, nous pouvons simplement saisir cette partie ici, nous sommes en fait tout cet objet que nous avons précédemment configuré 42 00:03:17,450 --> 00:03:21,440 sur le navigateur de pile et descendre à notre dessin. 43 00:03:21,510 --> 00:03:23,870 Et maintenant ici sur cet écran auquel il appartient. 44 00:03:23,870 --> 00:03:26,180 Dans ce cas, il appartient donc au navigateur d'administration. 45 00:03:26,180 --> 00:03:34,630 Donc, ici, sur l'écran d'administration, nous passons à nouveau nos options comme nous l'avons fait une seconde, je vais sur le navigateur de la pile. 46 00:03:34,790 --> 00:03:42,230 Donc, ici, nous passons maintenant les options pour cet écran et cela pourrait être un composant normal ou comme c'est dans ce cas un 47 00:03:42,230 --> 00:03:48,760 composant avec notre logique de navigation de pile et deux options nous passons un objet et là nous pouvons réutiliser 48 00:03:48,770 --> 00:03:51,170 cet objet que nous avons utilisé auparavant. 49 00:03:51,200 --> 00:03:56,060 Donc, un objet avec un tirage au sort, je peux saisir où nous en avons l'œil et ainsi de suite. 50 00:03:56,060 --> 00:04:04,140 Donc, tout cela fonctionne bien avant un petit ajustement, mais nous obtenons maintenant des accessoires ici également alimentés par la navigation de réaction 51 00:04:04,140 --> 00:04:12,660 et ces accessoires auront une clé de couleur au lieu de dessiner la couleur de teinte active et la couleur sera toujours la bonne 52 00:04:12,800 --> 00:04:18,470 couleur parce que la navigation réagit derrière le Les scènes contrôleront où cela se fait 53 00:04:18,480 --> 00:04:24,200 sur l'écran actuellement actif ou non et ajusteront les valeurs stockées dans cet accessoire de couleur. 54 00:04:24,240 --> 00:04:26,920 J'ai déjà mis en évidence une couleur déjà mise en évidence. 55 00:04:27,000 --> 00:04:33,250 C'est donc un petit ajustement que nous devons faire ici bien et avec lequel nous pouvons copier 56 00:04:33,250 --> 00:04:39,250 la logique des autres navigateurs ainsi que du navigateur de l'ordre, prenons cet objet 57 00:04:39,250 --> 00:04:48,100 ici que nous avions et ses options de navigation descendent au tirage aux commandes l'écran ajoute la clé d'options et est un objet et 58 00:04:48,100 --> 00:04:57,170 un commentaire il est de retour et il est important que nous obtenions maintenant des accessoires qui auront cette clé de couleur comme ça 59 00:04:57,380 --> 00:05:03,470 et enfin, mais bien sûr, faisons cela pour l'écran des produits pour le navigateur de produits. 60 00:05:03,470 --> 00:05:09,200 Ici, nous avons cet objet, saisissons-le, descendons dans notre dessin, 61 00:05:12,050 --> 00:05:18,440 notre navigateur et voici notre écran de produit, configurez la clé d'options ici. 62 00:05:18,570 --> 00:05:23,520 Je l'ai passé et ajusté comme je viens de le montrer. 63 00:05:23,520 --> 00:05:27,840 Alors maintenant, nous avons ici notre configuration spécifique à l'écran. 64 00:05:27,840 --> 00:05:35,700 Vous pouvez maintenant dire qu'en est-il du tirage global, car auparavant dans l'application avec l'ancienne navigation 65 00:05:35,740 --> 00:05:45,450 React dans laquelle nous avions réellement notre tirage et nous configurons la couleur de teinte active ainsi que le contenu 66 00:05:45,450 --> 00:05:46,640 du tirage. 67 00:05:46,680 --> 00:05:50,160 Eh bien, vous pouvez toujours le faire avec cette nouvelle approche. 68 00:05:50,340 --> 00:05:58,640 Nous allons à notre navigateur de dessin, où nous configurons le navigateur global et nous le configurons via des accessoires comme 69 00:05:58,640 --> 00:05:59,310 auparavant. 70 00:05:59,340 --> 00:06:06,030 Il s'agit de composants et d'accessoires, donc ici, nous avons maintenant un nom différent, nous n'avons plus d'options 71 00:06:06,030 --> 00:06:09,960 de contenu et de composant de contenu à la place. 72 00:06:10,020 --> 00:06:11,910 Et vous pouvez le trouver dans les documents officiels. 73 00:06:11,970 --> 00:06:17,190 Nous avons maintenant des options de dessin de contenu et de dessin. 74 00:06:17,190 --> 00:06:20,540 Cependant, les valeurs sont exactement les mêmes à la fin. 75 00:06:20,700 --> 00:06:24,750 Nous pouvons donc saisir notre objet d'options de contenu 76 00:06:28,600 --> 00:06:37,820 ici et passé comme pour dessiner une option de contenu ici et le commenter dans et avant pour dessiner un contenu. 77 00:06:37,900 --> 00:06:40,180 C'est aussi presque la même chose. 78 00:06:40,180 --> 00:06:42,760 Nous emballons simplement ce composant 79 00:06:51,270 --> 00:06:52,880 ici jusqu'à ici. 80 00:06:53,010 --> 00:06:53,970 Copiez-le 81 00:06:57,260 --> 00:07:03,070 et transférez-le ici dans le contenu du dessin et commentez-le. 82 00:07:03,080 --> 00:07:07,400 Cependant maintenant deux choses importantes utilisent ce patch n'est pas autorisé ici. 83 00:07:07,400 --> 00:07:09,490 Vous devriez le faire en dehors d'ici. 84 00:07:09,500 --> 00:07:15,980 Ainsi, par exemple, ici, dans le navigateur de la boutique, le composant est imbriqué. 85 00:07:15,980 --> 00:07:27,910 De plus, il ne s'agit plus de dessiner des éléments, mais de dessiner une liste d'éléments que nous devons également importer en 86 00:07:32,940 --> 00:07:35,730 haut du tirage de réactivation. 87 00:07:35,730 --> 00:07:37,890 Nous importons donc ici la liste des éléments de dessin 88 00:07:40,580 --> 00:07:41,030 avec. 89 00:07:41,030 --> 00:07:49,630 Cependant, si je fais défiler vers le bas, cela devrait maintenant fonctionner à nouveau et cela devrait maintenant 90 00:07:49,630 --> 00:07:56,830 être notre tirage au sort, nous avons donc le navigateur de la boutique, nous avons 91 00:07:56,830 --> 00:08:05,440 tous ces navigateurs de pile. écran ou l'écran de la boutique ou faites vos piles de navigation respectives, 92 00:08:05,440 --> 00:08:07,450 je dois dire. 93 00:08:07,750 --> 00:08:09,940 Eh bien, c'est ce que nous allons travailler ensuite.