1 00:00:02,190 --> 00:00:05,630 Travaillons sur l'écran des commandes avant d'ajouter la navigation, nous n'avons pas besoin de 2 00:00:05,670 --> 00:00:07,920 la terminer mais je veux pouvoir la visualiser. 3 00:00:08,700 --> 00:00:15,300 Donc là-dedans, j'importe React à partir de React pour pouvoir créer un composant React valide, importer quelque chose à partir de React Native 4 00:00:15,300 --> 00:00:20,060 comme toujours et que quelque chose est aussi ce à quoi nous sommes assez habitués, non? 5 00:00:20,060 --> 00:00:21,810 Ce n'est jamais si surprenant. 6 00:00:21,840 --> 00:00:23,050 Nous aurons 7 00:00:23,370 --> 00:00:32,880 besoin d'une vue, nous aurons probablement besoin d'une liste plate car nous aurons potentiellement plusieurs commandes, un 8 00:00:32,880 --> 00:00:43,670 montant infini et je veux pouvoir le rendre et avec cela ici, nous pouvons construire notre écran de commandes comme ça. 9 00:00:43,790 --> 00:00:53,710 Je vais également exporter cela bien sûr et le style ne devrait pas vraiment être requis ici, en fait, nous ne devrions même pas avoir besoin de la vue 10 00:00:53,770 --> 00:01:01,570 ici parce que je veux simplement afficher ma liste de commandes. Donc, bien sûr, les données dont nous avons besoin 11 00:01:01,720 --> 00:01:04,350 ici proviendront de Redux, nous devons 12 00:01:04,360 --> 00:01:10,600 donc importer le sélecteur d'utilisation de React Redux qui nous permet d'accéder à la boutique Redux. 13 00:01:11,350 --> 00:01:19,330 Donc ici, nous pouvons obtenir nos commandes à l'aide du sélecteur d'utilisation et le sélecteur d'utilisation pointe maintenant sur l'état. commandes et c'est bien sûr l'identifiant que j'ai attribué ici 14 00:01:19,390 --> 00:01:25,740 dans les commandes de réducteurs combinés ici, cela nous donne accès à la tranche d'état gérée par 15 00:01:25,810 --> 00:01:29,680 le réducteur de commandes et là, nous avons une 16 00:01:29,680 --> 00:01:34,040 autre propriété de commandes qui contient le tableau réel des commandes. 17 00:01:34,060 --> 00:01:37,860 Alors là, je dois accéder à l'état. ordres. commandes à la 18 00:01:37,870 --> 00:01:41,070 fin, cela me donne mes commandes qui sont stockées dans Redux. 19 00:01:41,110 --> 00:01:48,640 Maintenant, ici, nous avons juste besoin de retourner notre liste plate et celle-ci reçoit les commandes qui 20 00:01:48,640 --> 00:01:56,640 devraient être un tableau et qui sont des données. Désormais, un extracteur de clé n'est plus requis dans les nouvelles versions de React Native 21 00:01:56,640 --> 00:02:01,520 car chaque commande si vous regardez le modèle a un ID et les versions plus récentes de React 22 00:02:02,010 --> 00:02:09,780 devraient le rechercher, mais pour être sûr, je vais l'ajouter ici et le rendre l'élément devrait maintenant bien sûr contenir une fonction qui reçoit les données de l'élément et qui, 23 00:02:09,780 --> 00:02:16,440 à la fin, retourne tout ce que nous voulons rendre par commande. Maintenant, un article de commande sera plus complexe à l'avenir, pour l'instant 24 00:02:16,440 --> 00:02:17,010 je 25 00:02:17,010 --> 00:02:21,990 vais simplement sortir du texte, encore une fois afin que nous ayons rapidement quelque chose à l'écran que 26 00:02:21,990 --> 00:02:23,670 nous puissions voir avant d'affiner cela. 27 00:02:24,000 --> 00:02:27,650 Le texte ici pour l'article donné pourrait être et maintenant regardons 28 00:02:27,660 --> 00:02:32,590 la commande, nous avons l'ID, nous avons les articles qui sont encore une autre liste, 29 00:02:32,580 --> 00:02:32,990 donc 30 00:02:33,000 --> 00:02:40,150 la chose la plus simple à afficher est simplement le montant. Alors ici, je vais juste sortir le montant total 31 00:02:41,050 --> 00:02:44,380 de la propriété que ma commande a ici. 32 00:02:44,430 --> 00:02:46,050 C'est ce que je produis 33 00:02:46,050 --> 00:02:48,360 dans la liste plate, nous avons maintenant un écran 34 00:02:48,360 --> 00:02:55,550 de commandes de base, bien sûr, nous devons maintenant être en mesure d'atteindre cela. Alors, allons dans le navigateur de la boutique et importons 35 00:02:55,610 --> 00:03:04,740 l'écran des commandes ici, l'écran des commandes du dossier screens, de l'écran des commandes de la boutique et maintenant la chose importante est que je ne 36 00:03:05,180 --> 00:03:11,630 veux pas l'ajouter à ce navigateur de pile car cela ne fait pas partie de cela pile, au lieu 37 00:03:11,630 --> 00:03:12,590 de cela, 38 00:03:12,590 --> 00:03:16,490 je veux y accéder avec un menu, avec un menu latéral. 39 00:03:16,730 --> 00:03:19,840 Nous devrons donc créer un navigateur de tiroir. 40 00:03:19,910 --> 00:03:24,430 Bien sûr, vous pouvez également travailler avec des onglets si vous préférez cela, mais je veux travailler avec un tiroir ici, 41 00:03:24,500 --> 00:03:26,720 nous avons donc besoin de ce navigateur de tiroir. 42 00:03:26,750 --> 00:03:31,760 Maintenant, l'écran des commandes, même si ce sera le seul élément, il devrait être dans sa propre pile, 43 00:03:31,850 --> 00:03:34,490 de sorte que nous ayons également un en-tête. 44 00:03:34,490 --> 00:03:45,550 Par conséquent, je vais créer un nouveau navigateur de commandes ici où je crée un autre navigateur de pile et là, le seul mappage dont j'ai besoin est les commandes qui pointent 45 00:03:45,550 --> 00:03:53,740 vers l'écran des commandes, le deuxième argument ici devrait toujours configurer des options de navigation par défaut et j'utiliserai les mêmes options que je 46 00:03:53,740 --> 00:03:57,640 fais ici, donc je vais en fait saisir cet objet, le 47 00:03:57,970 --> 00:04:04,660 couper d'ici et le stocker dans une constante séparée, des options de navigation par défaut, comme ceci, c'est un modèle 48 00:04:04,700 --> 00:04:07,170 que j'ai également déjà utilisé dans 49 00:04:08,550 --> 00:04:13,590 le module de navigation parce que maintenant, nous pouvons utiliser cette constante ici dans le 50 00:04:13,590 --> 00:04:19,830 navigateur de produits pour les options de navigation par défaut et aussi ici dans le navigateur de commandes. 51 00:04:19,830 --> 00:04:26,760 Maintenant, bien sûr, l'objectif est de créer un navigateur de tiroir que je nommerai globalement navigateur de magasin car il combine 52 00:04:26,760 --> 00:04:29,160 différentes fonctionnalités de la boutique que vous 53 00:04:29,160 --> 00:04:36,260 pourriez dire à l'aide de la création de navigateur de tiroir. Là, je veux maintenant fusionner ces deux 54 00:04:36,270 --> 00:04:40,410 piles, le navigateur de produits et le navigateur de commandes, 55 00:04:40,410 --> 00:04:48,300 donc ici nous avons besoin des produits avec le navigateur de produits et les commandes pointant sur le 56 00:04:48,330 --> 00:04:56,160 navigateur de commandes, donc sur ces navigateurs de pile. Je veux également configurer mes options de contenu dans 57 00:04:56,160 --> 00:05:02,280 le tiroir, cela me permet par exemple de définir la couleur de teinte des éléments lorsqu'ils sont 58 00:05:02,280 --> 00:05:11,680 sélectionnés et là, je veux définir la couleur de teinte active sur Couleurs. primaire afin qu'ils soient colorés avec la couleur primaire s'ils sont sélectionnés. 59 00:05:11,710 --> 00:05:17,710 Maintenant, c'est le navigateur de la boutique qui doit être renvoyé ici. Cela ne suffira pas à lui seul, mais c'est une 60 00:05:17,710 --> 00:05:18,680 première étape, maintenant 61 00:05:18,730 --> 00:05:25,870 avant d'ajouter le bouton de menu, allons à l'écran des commandes et ajoutez-y un titre, donc j'y ajouterai des options de navigation, définissez-le sur 62 00:05:25,900 --> 00:05:28,630 un objet, en ce moment, nous n'avons pas besoin 63 00:05:28,630 --> 00:05:29,940 d'options dynamiques ici parce 64 00:05:29,950 --> 00:05:35,680 que je veux simplement définir le titre de l'en-tête de vos commandes et maintenant que j'y pense, nous devrions 65 00:05:35,680 --> 00:05:36,290 également 66 00:05:37,060 --> 00:05:38,620 l'ajouter sur l'écran du panier 67 00:05:38,710 --> 00:05:42,670 où je ne le fais pas encore. Là, je veux 68 00:05:42,670 --> 00:05:48,520 également définir cela sur l'écran du panier, définir cela sur votre panier. 69 00:05:48,520 --> 00:05:51,200 Donc, c'est maintenant dans les options de navigation de l'écran 70 00:05:51,220 --> 00:05:57,270 du panier, c'est dans l'écran des commandes ou ce navigateur est configuré. Avec tout cela mis en place, nous devons ajouter 71 00:05:57,280 --> 00:06:04,000 ce bouton de menu, cette icône de hamburger par exemple sur l'écran de présentation des produits où je veux pouvoir ouvrir 72 00:06:04,000 --> 00:06:09,220 le tiroir et aller à mes commandes. Maintenant, pour l'ajouter ici, allons aux options 73 00:06:09,220 --> 00:06:13,780 de navigation de l'écran de présentation du produit qui est déjà dynamique, ce 74 00:06:13,780 --> 00:06:14,550 qui 75 00:06:14,860 --> 00:06:21,070 est bien, puis en plus d'ajouter le droit d'en-tête pour cette icône de panier, ajoutons headerLeft et 76 00:06:21,070 --> 00:06:29,100 headerLeft devraient également contenir des boutons d'en-tête bien sûr, mais là , ce seront mes éléments de menu, donc je vais le nommer 77 00:06:29,220 --> 00:06:37,170 tel et là, je veux utiliser le menu md ou le menu ios en fonction de la plate-forme sur laquelle nous fonctionnons 78 00:06:37,170 --> 00:06:38,910 et je veux bien sûr 79 00:06:38,920 --> 00:06:46,150 naviguer nulle part, plutôt avec la navigation accessoire ici pour ainsi dire, je veux appeler le tiroir à bascule qui 80 00:06:46,160 --> 00:06:48,950 ouvrira le tiroir latéral. Maintenant, cette même 81 00:06:48,950 --> 00:06:54,920 configuration est également requise dans l'écran des commandes afin que nous puissions quitter cet écran. 82 00:06:55,700 --> 00:07:01,820 Donc en fait ici, nous aurons besoin de cette configuration dynamique des options de navigation où nous 83 00:07:01,820 --> 00:07:09,020 avons ici une fonction dans laquelle nous retournons notre objet de configuration afin que là-dedans, nous puissions également ajouter headerLeft avec 84 00:07:09,020 --> 00:07:15,170 les boutons d'en-tête, avec notre menu qui bascule le tiroir qui s'appuie sur les données de navigation ici 85 00:07:15,170 --> 00:07:22,910 et bien sûr pour cela, nous devons importer les boutons d'en-tête, le bouton d'en-tête et l'article, donc à la fin sur l'écran 86 00:07:22,910 --> 00:07:25,700 de présentation du produit, je dois importer 87 00:07:25,700 --> 00:07:30,860 ces choses ici, ces deux lignes doivent être ajoutées à l'écran des commandes également. 88 00:07:30,860 --> 00:07:32,700 Alors là, permettez-moi de 89 00:07:32,840 --> 00:07:39,020 l'ajouter, en ajoutant les boutons d'en-tête et l'importation d'articles à partir des boutons d'en-tête de navigation React 90 00:07:39,020 --> 00:07:45,300 et l'importation du bouton d'en-tête de notre composant personnalisé. Maintenant, avec cela, si nous enregistrons cela, nous devrions avoir un 91 00:07:45,300 --> 00:07:52,410 bouton de menu ici et nous le faisons, il ouvre le tiroir, nous pouvons aller aux commandes et je reçois une erreur ici parce 92 00:07:52,890 --> 00:07:55,560 que dans l'écran de commande, bien sûr j'utilise 93 00:07:55,560 --> 00:07:58,400 la plate-forme API, nous devons donc l'importer là-bas, faisons 94 00:07:58,400 --> 00:08:08,170 cela, ajoutons une plate-forme et maintenant, si nous revenons en arrière, nous pouvons passer aux commandes et là, nous pouvons également revenir en arrière et la même chose est le cas sur Android. 95 00:08:10,060 --> 00:08:12,160 Maintenant, avec cela, nous avons ajouté le tiroir. 96 00:08:12,160 --> 00:08:15,400 Il y a une chose que je veux ajouter au 97 00:08:15,400 --> 00:08:21,940 tiroir mais que je n'ai pas fait avant avant de continuer à travailler sur ma liste de commandes, nous ne sortons 98 00:08:22,240 --> 00:08:28,570 encore rien parce que nous n'ajoutons pas vraiment de commandes, nous n'avons pas connecté ceci bouton commander maintenant, nous ne 99 00:08:28,570 --> 00:08:33,180 voyons rien qui change si nous ajoutons quelque chose au panier, cliquez sur commander maintenant 100 00:08:33,280 --> 00:08:37,810 une fois, en cliquant plusieurs fois dessus, vous obtiendrez une erreur maintenant et nous 101 00:08:37,860 --> 00:08:41,140 verrons cette commande ici. Maintenant, nous devons vider le panier, 102 00:08:41,140 --> 00:08:45,940 c'est une autre chose que nous devons faire, mais avant de le faire, dans le tiroir, je veux également 103 00:08:46,030 --> 00:08:51,340 avoir des icônes à côté de mes entrées ici et ajouter ces icônes est en fait très simple, havre ' t fait 104 00:08:51,340 --> 00:08:57,640 cela dans le module de navigation, mais nous allons le faire maintenant. Pour ajouter des icônes, il vous suffit d'accéder aux écrans dans 105 00:08:57,640 --> 00:08:59,920 lesquels vous naviguez et dans notre cas, 106 00:08:59,920 --> 00:09:04,990 ce sont bien sûr ces deux navigateurs, donc ce ne sont pas des écrans mais ces deux navigateurs 107 00:09:05,440 --> 00:09:11,200 et sur ces navigateurs ou si c'étaient des écrans , sur ces écrans, vous pouvez définir des options de navigation 108 00:09:11,200 --> 00:09:17,230 et avec cela, je ne parle pas des options de navigation par défaut que vous définissez pour tous les écrans de 109 00:09:17,230 --> 00:09:23,080 ce navigateur, mais vous définissez pour ce navigateur s'il est utilisé à l'intérieur d'un autre navigateur comme c'est le cas ici. 110 00:09:23,080 --> 00:09:25,020 Nous pouvons donc ajouter des 111 00:09:25,030 --> 00:09:29,320 options de navigation ici, encore une fois cela ne sera pas appliqué aux 112 00:09:29,320 --> 00:09:32,550 écrans de ce navigateur mais à la place, cela 113 00:09:32,740 --> 00:09:39,700 configurera ce navigateur s'il s'agit d'un écran d'un autre navigateur et ici le navigateur des commandes est un écran du navigateur 114 00:09:39,700 --> 00:09:50,140 de la boutique à la fin et là, dans ces options de navigation, nous pouvons ajouter une entrée d'icône de tiroir qui peut être une fonction qui obtient disons la configuration de 115 00:09:51,150 --> 00:09:56,890 tiroir, cette fonction est appelée pour vous par React navigation et elle vous donne cette configuration de 116 00:09:56,890 --> 00:10:03,870 tiroir qui vous dit le plus important par exemple quelle est votre couleur de teinte car ici vous pouvez maintenant retourner 117 00:10:03,880 --> 00:10:10,630 un composant, comme un composant Ionicons pour rendre une icône. Pour cela, vous devez simplement vous assurer que vous importez 118 00:10:11,200 --> 00:10:12,780 des Ionicons à partir 119 00:10:12,790 --> 00:10:16,650 de @ expo / vector-icons, vous devez donc ajouter cette importation dans 120 00:10:16,780 --> 00:10:23,770 le fichier de navigation de la boutique et maintenant avec cela ajouté, si nous descendons ici, je renvoie mon Ionicon, maintenant 121 00:10:23,770 --> 00:10:24,640 je peux 122 00:10:24,850 --> 00:10:30,720 le configurer comme je l'ai toujours fait et pour cela, nous pouvons utiliser l'API de la plateforme que 123 00:10:30,730 --> 00:10:39,340 nous importons déjà ici, si vous ne l'êtes pas, assurez-vous de le faire. Nous pouvons l'utiliser pour vérifier le système d'exploitation et s'il est 124 00:10:39,790 --> 00:10:43,820 égal à Android, alors ici, je rendrai md create 125 00:10:43,820 --> 00:10:49,820 sous forme d'icône, sinon iOS create et ce n'est qu'une icône que j'ai choisie à l'avance. 126 00:10:49,850 --> 00:10:56,640 Maintenant, bien sûr, nous pouvons également configurer la taille ici et je m'en tiendrai à mon bon vieux 23 et en plus de cela, définissez 127 00:10:56,760 --> 00:11:02,130 une couleur si vous le souhaitez et maintenant bien sûr, cela ne devrait pas être des couleurs primaires 128 00:11:02,190 --> 00:11:07,620 car alors cette icône serait ayez toujours cette couleur, à la place cette couleur devrait être assignée par le tiroir 129 00:11:07,710 --> 00:11:13,310 qui est la chose qui sait si l'article est sélectionné ou non et qui changera la couleur de manière appropriée. 130 00:11:13,380 --> 00:11:16,570 Alors ici, vous devriez accéder à la configuration du tiroir. TintColor et cela vous 131 00:11:16,680 --> 00:11:22,110 indique quelle couleur cela devrait avoir pour le moment et cette couleur de teinte changera selon 132 00:11:22,110 --> 00:11:24,330 qu'elle est actuellement sélectionnée ou non. 133 00:11:25,370 --> 00:11:29,350 Maintenant, c'est le cas pour mes commandes, excusez-moi, l'icône 134 00:11:29,540 --> 00:11:30,470 ici devrait 135 00:11:30,580 --> 00:11:39,080 être la liste md et la liste iOS, pas créer. Voilà donc ma configuration de commande maintenant avec les icônes de liste et bien sûr, cette 136 00:11:39,440 --> 00:11:46,130 même chose peut être faite ici en la copiant sur le navigateur de produits et là, je veux utiliser md cart ou iOS cart, donc 137 00:11:46,130 --> 00:11:54,490 cette icône de panier à nouveau et maintenant c'est presque prêt à être utilisé. Une chose que vous devez faire cependant est que vous 138 00:11:54,490 --> 00:11:59,500 devez importer React de React maintenant dans ce fichier de navigateur car vous 139 00:11:59,500 --> 00:12:06,610 utilisez maintenant des composants avec cette syntaxe jsx. Comme vous le savez, jsx 140 00:12:06,610 --> 00:12:14,260 est compilé ou converti en React. createElement à la fin et vous devez donc importer React pour 141 00:12:14,260 --> 00:12:16,190 que cette syntaxe fonctionne ici. 142 00:12:16,510 --> 00:12:21,850 Maintenant, si vous revenez en arrière, vous avez ces belles icônes ici à côté de vos articles 143 00:12:21,850 --> 00:12:23,230 et elles sont 144 00:12:23,230 --> 00:12:26,020 également colorées correctement, également ici sur Android bien sûr. 145 00:12:26,020 --> 00:12:32,110 Alors maintenant que le tiroir latéral est terminé, nous pouvons également accéder à l'écran des commandes et même y voir 146 00:12:32,110 --> 00:12:32,920 une commande. 147 00:12:32,920 --> 00:12:37,450 Cependant, en ce moment, le panier n'est pas effacé et donc si vous cliquez dessus plusieurs 148 00:12:37,450 --> 00:12:42,520 fois, vous obtiendrez en fait un avertissement, car ce que vous faites, c'est que vous cliquez dessus trop rapidement 149 00:12:42,790 --> 00:12:48,700 et que vous créez donc plusieurs commandes avec le même pseudo-identifiant unique où nous à la fin, utilisez l'horodatage actuel, si vous 150 00:12:48,700 --> 00:12:50,770 cliquez plusieurs fois trop vite, c'est le 151 00:12:50,860 --> 00:12:56,110 même horodatage, c'est pourquoi cet avertissement arrive et je voudrais quand même effacer le panier après avoir passé une commande. 152 00:12:56,860 --> 00:13:02,050 Donc, assurons-nous de vider le panier après avoir passé une commande, puis bien sûr, assurons-nous de sortir les commandes 153 00:13:02,110 --> 00:13:04,930 d'une manière plus agréable que ce que nous faisons actuellement.