1 00:00:02,210 --> 00:00:04,450 Sur les articles du panier. 2 00:00:04,730 --> 00:00:08,030 Encore une fois, je vais créer un composant distinct pour chaque article du panier 3 00:00:08,030 --> 00:00:09,240 que je veux afficher ici. 4 00:00:09,260 --> 00:00:15,200 Je pourrais le faire ici, mais encore une fois, ce sera un composant un peu plus long et je ne veux pas gonfler ce 5 00:00:15,200 --> 00:00:19,500 fichier avec lui et je vais aussi l'utiliser plus tard ailleurs, ce qui peut sembler étrange étant 6 00:00:19,610 --> 00:00:23,930 donné que nous n'avons que un écran de panier, mais vous verrez où d'autre nous pouvons utiliser 7 00:00:23,930 --> 00:00:25,750 un article de panier plus tard. 8 00:00:25,760 --> 00:00:30,890 Donc, pour cela, revenons dans le dossier des composants et peut-être dans le dossier de la boutique 9 00:00:30,920 --> 00:00:33,680 et ajoutons un CartItem. Fichier js à côté de l'article du produit. 10 00:00:33,710 --> 00:00:37,480 Maintenant, bien sûr, nous avons un composant React normal, donc vous connaissez le jeu, 11 00:00:37,490 --> 00:00:38,850 comment ceux-ci sont créés. 12 00:00:39,080 --> 00:00:44,630 Nous importons React de React, puis ici puisque c'est le composant qui devrait produire quelque chose, nous importerons 13 00:00:44,630 --> 00:00:50,170 un tas de composants de React Native, les principales primitives avec lesquelles nous avons construit l'interface utilisateur. 14 00:00:50,300 --> 00:00:57,990 J'aurai besoin d'une vue, j'aurai besoin d'un texte, j'aurai besoin d'une feuille de style ici à coup sûr et ensuite j'ajouterai ma constante ici, l'article du panier 15 00:00:57,990 --> 00:01:06,210 qui reçoit les accessoires et puis à la fin ici retourne du code jsx. J'ajouterai mon objet de styles ici avec 16 00:01:06,210 --> 00:01:09,340 la création de feuille de 17 00:01:09,480 --> 00:01:16,050 style et je l'exporterai en tant qu'article de panier par défaut. 18 00:01:16,170 --> 00:01:21,540 Maintenant, le code jsx qui doit être renvoyé ici est bien sûr toujours à vous, mais j'aurai une 19 00:01:21,540 --> 00:01:28,070 vue ici et dans cette vue, je veux afficher la quantité et le titre bien sûr, ainsi que le montant total de cet 20 00:01:28,290 --> 00:01:34,080 article du panier au cas où nous en avons ajouté plus d'un, alors ce n'est pas seulement le prix d'un 21 00:01:34,080 --> 00:01:39,780 seul article mais bien sûr le prix multiplié par la quantité et je veux également avoir un bouton qui 22 00:01:39,780 --> 00:01:41,730 me permette de supprimer cet article du 23 00:01:41,730 --> 00:01:43,460 panier, une icône de corbeille. 24 00:01:44,070 --> 00:01:53,180 Donc à la fin, j'aurai une ligne ici avec un texte et ce texte aura la quantité et le titre, donc là 25 00:01:53,420 --> 00:02:02,850 j'aurai la quantité et le titre et en fait cela devrait être stylé différemment, donc je vais envelopper le quantité ici dans un nœud 26 00:02:02,850 --> 00:02:09,540 de texte séparé et faites de même pour le titre, de sorte que j'ai deux nœuds 27 00:02:10,650 --> 00:02:21,600 de texte séparés ici à la fin, puis après ce bloc de texte ici, il devrait y avoir une vue pour regrouper deux autres éléments ensemble, un autre 28 00:02:21,600 --> 00:02:28,060 morceau de texte qui est le montant total pour cet article ici, donc montant et 29 00:02:28,110 --> 00:02:35,280 à côté de cela, un bouton ou en fait pas un bouton mais en fait une icône pressable. 30 00:02:35,280 --> 00:02:40,740 Donc, je vais construire ma propre chose touchable avec une opacité touchante et bien sûr, vous 31 00:02:40,740 --> 00:02:46,650 pouvez à nouveau faire cette différenciation de plate-forme pour l'effet d'entraînement, mais je vais opacité ici sur 32 00:02:47,370 --> 00:02:54,090 les deux plates-formes et j'importe des Ionicons de @ expo / vector-icons que nous avons déjà ajouté plus tôt parce 33 00:02:54,090 --> 00:02:55,110 que je 34 00:02:55,110 --> 00:03:00,480 veux avoir juste une icône ici sur laquelle nous pouvons appuyer, donc ici je veux 35 00:03:00,470 --> 00:03:07,040 avoir une opacité tactile et enrouler cela autour d'une icône que nous pouvons ajouter avec des Ionicons comme vous 36 00:03:07,100 --> 00:03:13,340 l'avez ajouté plus tôt dans ce cours, avec ceci comme un composant ici et ensuite simplement utiliser un 37 00:03:13,340 --> 00:03:19,190 nom qui devrait en fait différer par plate-forme parce que le nom est l'identifiant de l'icône et 38 00:03:19,190 --> 00:03:29,670 là, nous pouvons vérifier le système d'exploitation de la plate-forme et si c'est Android, l'icône qui devrait être utilisée aura un nom de md trash et sinon, ce sera la corbeille 39 00:03:29,670 --> 00:03:37,410 iOS qui rend une belle icône de corbeille et nous pouvons également donner à cette icône une taille de disons 23 qui devrait 40 00:03:37,410 --> 00:03:43,890 encore être assez belle et une couleur et ici, je vais utiliser du rouge parce qu'il supprime cela élément 41 00:03:43,890 --> 00:03:52,490 de sorte qu'il devrait avoir comme un warni de couleur je dirais. L'opacité tactile lorsqu'elle est pressée devrait faire quelque chose et elle devrait transmettre l'événement de 42 00:03:52,490 --> 00:03:54,520 presse au composant qui utilise le 43 00:03:54,520 --> 00:04:00,460 composant d'élément de panier, donc je m'attends à obtenir un accessoire de suppression, ce nom, comme toujours, dépend de vous 44 00:04:00,460 --> 00:04:11,170 qui détient une fonction qui se trouve dans le fin exécuté ensuite et nous pouvons également ajouter un style ici, un style très simple où je pointe sur le bouton Supprimer par exemple et c'est une 45 00:04:11,170 --> 00:04:14,360 déclaration de style que nous pouvons ajouter par la suite. 46 00:04:14,380 --> 00:04:17,120 En parlant de styles, il y a bien 47 00:04:17,260 --> 00:04:22,420 sûr plus de styles à ajouter, par exemple sur la vue la plus haute ici, je 48 00:04:22,420 --> 00:04:25,390 vais donner à ce style un élément de panier, 49 00:04:27,910 --> 00:04:29,410 ce texte ici recevra 50 00:04:29,410 --> 00:04:37,060 alors un style de données d'article peut-être. Ce texte avec la quantité peut recevoir un style que l'on peut nommer des styles. quantité, encore une fois, tous 51 00:04:37,060 --> 00:04:40,720 ces identificateurs de style sont toujours à vous. 52 00:04:41,020 --> 00:04:43,600 Ici sur le titre, j'ai un style 53 00:04:44,970 --> 00:04:53,970 de titre, puis ici sur cette vue, je vais à nouveau ajouter un style de données d'article, donc je vais réutiliser ce style parce que je 54 00:04:53,970 --> 00:05:05,760 veux avoir le même ensemble ici et ce montant ici sera obtenez également un style de montant. Donc, un tas de styles à ajouter, descendons à la feuille de 55 00:05:05,760 --> 00:05:09,230 style et là-bas, ajoutez l'article du panier 56 00:05:09,450 --> 00:05:13,640 qui est notre style racine, puis les données et 57 00:05:13,970 --> 00:05:16,620 la quantité de l'article, donc 58 00:05:16,850 --> 00:05:18,500 la quantité de 59 00:05:20,780 --> 00:05:21,890 données 60 00:05:23,500 --> 00:05:33,140 de l'article, puis le titre ici et le montant et le dernier mais pas au moins, le bouton Supprimer. 61 00:05:33,140 --> 00:05:38,490 C'est aussi quelque chose que nous devons ajouter ici. Maintenant, sur le bouton Supprimer, c'est simple, je 62 00:05:38,500 --> 00:05:39,100 vais juste 63 00:05:39,100 --> 00:05:46,930 ajouter une marge à gauche de 20 pour avoir un peu d'espacement entre l'icône et le texte qui se trouve à côté et avec 64 00:05:46,930 --> 00:05:47,470 cela, 65 00:05:48,750 --> 00:05:52,070 passons à l'article du panier. Là, je veux avoir un 66 00:05:52,110 --> 00:05:57,010 remplissage de 10, une couleur de fond de blanc, je n'utiliserai pas mon look de 67 00:05:57,010 --> 00:06:01,930 carte ici, je n'ajouterai pas d'ombre ici, vous pourriez le faire mais je préfère un look 68 00:06:01,930 --> 00:06:02,420 différent. 69 00:06:02,560 --> 00:06:06,700 La ligne de direction flexible est importante pour que tous les éléments de cette vue, de sorte que ce 70 00:06:06,700 --> 00:06:13,330 texte et cette vue soient assis côte à côte sur une seule et même ligne. Justifier le contenu doit être un espace entre afin 71 00:06:13,330 --> 00:06:21,720 que tous les espaces vides entre ces deux blocs de contenu et j'ajouterai également une marge dans le sens horizontal de 20 afin 72 00:06:22,380 --> 00:06:24,660 qu'il y ait un certain 73 00:06:24,880 --> 00:06:29,250 espacement à gauche et à droite autour de mes articles de panier. 74 00:06:29,880 --> 00:06:36,000 Maintenant, les données d'élément, c'est le style que nous répétons autour de la quantité et du titre et 75 00:06:36,630 --> 00:06:46,360 du montant et le bouton Supprimer, les données d'élément doivent avoir une ligne de direction flexible pour m'assurer que les éléments qu'ils contiennent sont positionnés sur une ligne et 76 00:06:46,360 --> 00:06:55,370 je définirai ici les éléments d'alignement centre pour centrer verticalement tout le contenu. Maintenant, pour la quantité ici, je veux définir une famille de polices 77 00:06:55,370 --> 00:07:05,440 open-sans, en passant, nous pouvons également utiliser une vue ici au lieu d'un texte autour de ces deux nœuds de texte car je ne définis aucun style 78 00:07:05,440 --> 00:07:10,220 spécifique au texte ici , prenons donc une vue à la place, mais 79 00:07:10,360 --> 00:07:15,430 avec cela, revenons à la quantité. Nous pouvons donner à cette 80 00:07:15,430 --> 00:07:22,240 famille de polices open-sans, une couleur de peut-être cette couleur grisâtre foncé que nous avons utilisée 81 00:07:22,240 --> 00:07:27,820 auparavant pour les prix, maintenant pour la quantité et une taille de police de 82 00:07:27,820 --> 00:07:35,740 16 peut-être, puis ici pour le titre, je définirai un famille de polices de open sans bold pour le rendre 83 00:07:35,740 --> 00:07:43,760 gras, donnez-lui aussi une taille de police de 16 et sur le montant ici, je ferai exactement la même chose. 84 00:07:46,090 --> 00:07:52,960 Par conséquent, bien sûr, nous pourrions également fusionner cela en un seul et même style, peut-être nommer ce texte principal ou quelque chose comme 85 00:07:52,960 --> 00:07:53,820 ça, se 86 00:07:53,830 --> 00:08:00,010 débarrasser du montant car nous avons exactement les mêmes définitions de style et maintenant utiliser le texte principal ici au lieu du 87 00:08:00,010 --> 00:08:02,350 titre et ici à la place du montant. 88 00:08:05,070 --> 00:08:05,710 D'accord. 89 00:08:05,730 --> 00:08:06,840 Il s'agit d'un 90 00:08:06,840 --> 00:08:08,900 élément du panier, utilisons-le maintenant dans 91 00:08:08,970 --> 00:08:11,040 l'écran du panier à l'aide d'une 92 00:08:11,280 --> 00:08:16,080 liste plate, car pour le moment nous ne produisons aucun élément sur l'écran du panier. 93 00:08:16,380 --> 00:08:19,740 Donc, cette vue ici peut être remplacée par une liste 94 00:08:19,740 --> 00:08:27,080 plate maintenant et les données que nous nous trouvons ici devraient être un tableau d'articles de panier et c'est exactement ce que 95 00:08:27,080 --> 00:08:29,030 nous avons ici dans la 96 00:08:29,150 --> 00:08:31,700 constante des articles de panier, alors utilisons-la ici. 97 00:08:31,700 --> 00:08:32,240 Maintenant, 98 00:08:32,240 --> 00:08:37,550 ici, j'ajouterai également un extracteur de clés et ici vous devez absolument l'ajouter pour que React Native sache 99 00:08:37,550 --> 00:08:43,100 où se trouve votre clé car chaque élément ici à la fin est de ce format et cela n'a 100 00:08:43,190 --> 00:08:48,650 ni clé ni ID, mais nous savons que l'ID du produit peut être utilisé comme clé, car il sera 101 00:08:48,650 --> 00:08:49,910 unique pour chaque article. 102 00:08:49,910 --> 00:08:54,920 Alors ici, je pointe sur le point. productId à la fin et maintenant 103 00:08:54,920 --> 00:09:00,030 pour l'élément de rendu, je veux utiliser cet élément du panier que nous venons d'ajouter. 104 00:09:00,140 --> 00:09:10,400 Donc, ici, nous devons importer l'article du panier à partir du dossier des composants, du dossier de la boutique et là, de l'article du panier, puis d'utiliser ce 105 00:09:11,060 --> 00:09:17,850 composant de l'article du panier là-bas dans notre fonction de rendu où nous obtenons nos données d'article à la 106 00:09:17,850 --> 00:09:26,040 fin et où nous retournons ensuite notre article du panier comme celui-ci et maintenant sur l'article du panier, nous devons transmettre certaines 107 00:09:26,040 --> 00:09:28,240 données, non? Dans l'article du 108 00:09:28,250 --> 00:09:34,350 panier, j'ai actuellement des espaces réservés factices, bien sûr ici, je m'attends à obtenir ma quantité disons sur une quantité 109 00:09:34,350 --> 00:09:42,080 nommée accessoire, je m'attends à obtenir mon titre sur peut-être un titre nommé accessoire et le montant sur un montant nommé accessoire et là, je vais 110 00:09:42,090 --> 00:09:47,640 appeler fixed à 2 pour m'assurer que nous avons toujours deux décimales là-bas et que nous avons également l'hélice 111 00:09:47,660 --> 00:09:49,910 on remove que nous attendons à droite. 112 00:09:49,920 --> 00:09:53,830 Nous avons donc obtenu la quantité, le titre, le montant et la suppression, donc de retour dans l'écran du panier, 113 00:09:53,830 --> 00:10:01,780 c'est ce que nous devons ajouter, la quantité est bien sûr itemData. article. quantité car un seul article 114 00:10:01,780 --> 00:10:06,740 ici est bien sûr un tel article et donc nous 115 00:10:06,940 --> 00:10:15,180 aurons une quantité à conserver et en plus de la quantité, nous devons passer le titre, le 116 00:10:15,330 --> 00:10:16,930 montant et supprimer. 117 00:10:17,010 --> 00:10:22,860 Le titre est donc bien sûr itemData. article. produit. title, c'est le nom que j'ai 118 00:10:22,890 --> 00:10:30,810 choisi ici, pour le montant que nous pouvons transmettre dans itemData. article. si nous regardons comment nous 119 00:10:30,810 --> 00:10:38,550 définissons nos données, ce serait la somme, c'est le montant pour un article, peu importe la quantité que nous 120 00:10:38,790 --> 00:10:42,840 avons là-dedans ou respectant la quantité que nous avons réellement. 121 00:10:43,110 --> 00:10:49,770 Et puis enfin et surtout pour supprimer, nous devrions pointer sur une fonction et pour le moment, nous n'avons pas de logique pour cela, donc je vais 122 00:10:49,770 --> 00:10:50,600 pointer sur une 123 00:10:50,640 --> 00:10:57,370 fonction vide et c'est maintenant un élément du panier que je veux rendre il. 124 00:10:57,400 --> 00:11:07,540 Essayons ceci. Ajoutons deux chemises rouges et un tapis bleu, allons dans le panier et 125 00:11:07,540 --> 00:11:14,940 maintenant j'ai des chaînes de texte qui doivent être rendues dans un composant de texte et il pointe vers l'élément 126 00:11:14,950 --> 00:11:17,290 du panier, ligne 14, alors regardons 127 00:11:17,380 --> 00:11:23,590 ça, oui c'est ici que mon IDE a ajouté automatiquement, cet espace que je veux avoir ici 128 00:11:23,650 --> 00:11:26,270 après ma quantité. Je veux en effet l'avoir 129 00:11:26,440 --> 00:11:32,810 ici, donc je vais juste ajouter un espace supplémentaire ici avant de fermer mon texte. Maintenant avec ça, essayons encore, deux 130 00:11:32,830 --> 00:11:35,530 chemises rouges, un tapis bleu. 131 00:11:35,580 --> 00:11:36,920 Voir le montant ici, 132 00:11:36,950 --> 00:11:38,470 voir le titre ici voir 133 00:11:38,560 --> 00:11:41,990 la somme et cela s'ajoute bien sûr à cette somme totale. 134 00:11:43,580 --> 00:11:45,730 Il est maintenant temps de faire fonctionner ce bouton de suppression.