1 00:00:02,160 --> 00:00:07,040 Travaillons donc maintenant sur l'écran des commandes et sortons plus que ce texte ennuyeux. 2 00:00:07,040 --> 00:00:12,390 Maintenant, tout comme pour l'écran du panier et l'écran de présentation des produits, je veux un article de commande plus complexe 3 00:00:12,390 --> 00:00:17,970 et je vais donc créer un composant d'article de commande séparé dans le dossier des composants et là dans un dossier de magasin. 4 00:00:18,000 --> 00:00:20,550 Comme toujours, c'est à vous de décider si 5 00:00:20,550 --> 00:00:26,420 vous le faites aussi mais comme ce ne sera pas un super petit composant, je préfère l'avoir dans un fichier séparé. 6 00:00:26,550 --> 00:00:32,880 Je vais donc importer React à partir de React ici et sans surprise, bien sûr, importer un tas de choses à partir 7 00:00:32,880 --> 00:00:39,660 de React Native et ce serait la vue, le texte, la feuille de style puisque nous allons certainement mettre en place certains styles ainsi 8 00:00:39,990 --> 00:00:47,100 qu'un bouton parce que moi aussi veulent pouvoir développer une commande afin que nous ne voyions pas toujours tous les articles qui font partie de 9 00:00:47,100 --> 00:00:54,200 la commande mais que nous puissions les voir si nous le souhaitons. Maintenant, avec cela, nous pouvons créer notre constante d'article de commande 10 00:00:54,290 --> 00:01:00,710 ici, de sorte que ce sera le composant lui-même qui recevra les accessoires, puis à la fin aura son corps ici et renverra 11 00:01:00,740 --> 00:01:08,460 du code jsx et nous avons besoin d'un objet de styles ici avec Stylesheet. créer comme ceci et 12 00:01:08,520 --> 00:01:13,990 également exporter l'article de commande par défaut. 13 00:01:14,070 --> 00:01:16,460 Maintenant, à quoi devrait ressembler un article de commande? 14 00:01:16,470 --> 00:01:23,280 Maintenant comme toujours, c'est à vous mais je vais travailler avec une vue ici et mon idée est que je montre toujours comme le montant 15 00:01:23,280 --> 00:01:29,880 total de cette commande et la date et ensuite un bouton afficher les détails sur lequel nous pouvons appuyer pour voir les articles individuels 16 00:01:29,880 --> 00:01:35,130 qui font partie de la commande et pour ces articles, j'utiliserai en fait le composant d'article du panier ici 17 00:01:35,130 --> 00:01:39,620 parce que je veux rendre exactement les mêmes articles que ceux que j'affiche dans un panier. 18 00:01:39,690 --> 00:01:46,190 Je vais donc réellement importer l'article du panier à partir du composant de l'article du panier et le réutiliser ici. 19 00:01:46,380 --> 00:01:48,400 Maintenant, revenons à ce code jsx, 20 00:01:48,540 --> 00:01:54,110 donc nous avons une vue d'habillage autour de notre objet de commande entier, notre entrée de commande entière ici. 21 00:01:54,270 --> 00:01:58,980 Maintenant, là-dedans, je veux avoir une première ligne et donc je vais utiliser une autre 22 00:01:58,980 --> 00:02:06,660 vue afin que nous puissions styliser cela de manière appropriée qui devrait contenir du texte qui affiche notre total, donc la somme de cet ordre disons 23 00:02:06,660 --> 00:02:13,470 et un autre texte où je montre la date et cela devrait être dans la même ligne avec un espace entre eux. 24 00:02:14,370 --> 00:02:20,660 En dessous d'eux comme je l'ai mentionné devrait être un bouton sur lequel nous pouvons appuyer pour afficher les détails qui montrent ensuite tous 25 00:02:20,660 --> 00:02:25,440 les articles qui font partie de cette commande. Maintenant, avec cette configuration, 26 00:02:25,470 --> 00:02:32,040 il est clair que le montant ici doit être reçu à l'aide d'accessoires. 27 00:02:32,040 --> 00:02:38,100 Donc là, je m'attends à obtenir un montant prop et je vais appeler fixe 2 pour sortir le nombre 28 00:02:38,100 --> 00:02:40,350 approprié de décimales. Maintenant, pour la date, 29 00:02:40,350 --> 00:02:49,360 je veux sortir la date des accessoires ici afin que nous ayons une date que nous pouvons sortir. Pour le style, dans l'ensemble ici, je veux avoir une affectation de 30 00:02:49,380 --> 00:02:55,860 style d'élément de commande afin que nous puissions styliser toute la commande, puis là, nous avons besoin, 31 00:02:55,860 --> 00:03:00,380 disons, d'un résumé des styles pour pouvoir styliser cette ligne et en 32 00:03:00,450 --> 00:03:09,240 ce qui concerne le texte ici, cela devrait avoir un style de disons montant total, comme toujours ces identifiants de style sont à vous, 33 00:03:09,300 --> 00:03:10,290 ici je 34 00:03:10,290 --> 00:03:12,720 veux avoir un style de date. 35 00:03:16,000 --> 00:03:21,640 Le bouton devrait également avoir sa propre couleur que j'obtiendrai de la constante des couleurs, donc cette importation 36 00:03:21,640 --> 00:03:22,830 doit être ajoutée 37 00:03:22,840 --> 00:03:26,130 et là, j'utiliserai ma couleur principale. D'accord, c'est tout pour le 38 00:03:26,610 --> 00:03:27,430 moment, je 39 00:03:27,450 --> 00:03:29,160 reviens aux détails dans une seconde, 40 00:03:29,160 --> 00:03:36,380 maintenant appliquons un style ici pour que nous puissions voir quelque chose. Pour l'article de commande lui-même, je vais à nouveau réutiliser ce 41 00:03:36,480 --> 00:03:43,050 look de panier que j'ai déjà dans l'article de produit, je vais donc copier tous ces paramètres ici à partir de 42 00:03:43,050 --> 00:03:46,770 l'article de produit et les déplacer vers l'article de commande afin qu'une 43 00:03:46,770 --> 00:03:51,770 ombre soit appliquée , une couleur d'arrière-plan, un rayon de bordure, tout cela devrait être appliqué. 44 00:03:52,010 --> 00:03:57,210 De plus, j'ajouterai une marge de 20 dans toutes les directions afin que chaque article de la commande soit espacé. 45 00:03:58,790 --> 00:04:03,830 À l'intérieur de l'article de commande, je veux également avoir un rembourrage de 10 afin que le contenu ne 46 00:04:03,830 --> 00:04:10,800 se trouve pas directement sur les bords de la bordure environnante, etc. Maintenant, pour le résumé qui est cette vue qui contient les 47 00:04:10,800 --> 00:04:13,700 deux morceaux de texte, le style devrait en fait 48 00:04:13,770 --> 00:04:17,940 être que nous avons une direction flexible de la ligne car les éléments 49 00:04:17,940 --> 00:04:22,590 doivent être assis côte à côte. Justifier le contenu doit être 50 00:04:22,590 --> 00:04:31,230 un espace entre et en plus de cela, aligner les éléments doit être au centre, de sorte que sur l'axe transversal qui 51 00:04:31,230 --> 00:04:34,280 est ici l'axe vertical, les éléments sont centrés. 52 00:04:34,290 --> 00:04:40,160 Je veux également m'assurer que nous prenons ici toute la largeur disponible pour distribuer le texte. Maintenant, pour le montant total qui est le 53 00:04:40,180 --> 00:04:47,620 style appliqué à cette première partie de texte qui génère le montant, là comme toujours, vous pouvez le styler comme vous le 54 00:04:47,830 --> 00:04:53,350 souhaitez, mais je définirai une famille de polices open sans bold pour utiliser cette version en 55 00:04:53,350 --> 00:05:01,180 gras de ma police et donnez-lui une taille de police de 16 disons, puis pour la date qui est mon style, j'ai appliqué 56 00:05:01,180 --> 00:05:04,630 à ce texte de date ici, là, à la fin, 57 00:05:04,630 --> 00:05:10,840 je veux également utiliser une taille de police de 16 mais la famille de polices sera juste ouverte sans, 58 00:05:10,840 --> 00:05:12,010 sans la version 59 00:05:12,040 --> 00:05:20,800 audacieuse et en plus, nous pouvons également réutiliser cette couleur grisâtre foncé ici. Maintenant, essayons et utilisons cet article de 60 00:05:20,810 --> 00:05:24,080 commande dans l'écran des commandes. 61 00:05:24,080 --> 00:05:29,480 Donc, là-dedans, nous devons d'abord importer l'article de commande, puis bien sûr aller dans le dossier des composants, 62 00:05:29,480 --> 00:05:34,970 dans le dossier de la boutique, puis importer l'article de commande à partir de ce fichier d'article de 63 00:05:34,970 --> 00:05:36,520 commande et ici au 64 00:05:36,710 --> 00:05:42,800 lieu de rendre ce texte, nous rendons maintenant cet élément de commande ici en tant que balise à fermeture automatique 65 00:05:42,800 --> 00:05:44,710 et bien sûr, nous devons le configurer. 66 00:05:44,720 --> 00:05:50,780 Cela nous oblige à passer le montant et la date et plus tard également les articles de détail, donc les 67 00:05:50,780 --> 00:05:52,160 articles de la commande 68 00:05:52,190 --> 00:05:54,400 mais cela viendra dans une deuxième étape. 69 00:05:54,410 --> 00:06:02,120 Donc pour l'instant ici, nous devons passer le montant et cela bien sûr est simplement itemData. article qui est une seule commande, n'oubliez pas que nous parcourons toutes 70 00:06:02,120 --> 00:06:03,290 les commandes 71 00:06:03,290 --> 00:06:07,020 ici, qui est un tableau de commandes, donc c'est une seule 72 00:06:07,040 --> 00:06:08,260 commande et là-dedans, le 73 00:06:08,720 --> 00:06:15,030 montant si nous regardons notre modèle de commande est stocké dans un champ montant total, la date est ensuite 74 00:06:15,030 --> 00:06:16,830 stockée dans le champ date. 75 00:06:16,850 --> 00:06:21,980 Donc, ici, nous accédons au champ du montant total et pour l'accessoire de date que nous devons également transmettre, 76 00:06:21,980 --> 00:06:28,070 nous pouvons accéder à itemData. article. Date. Si nous enregistrons maintenant 77 00:06:28,070 --> 00:06:37,940 ceci et que nous y jetons un coup d'œil, ajoutons du contenu ici, commandons ceci et ensuite allons à notre écran de commandes et nous obtenons cette erreur. 78 00:06:38,030 --> 00:06:42,980 Maintenant, cela fait référence à des objets qui ne sont pas valides comme React devrait et nous 79 00:06:42,980 --> 00:06:50,010 montre qu'en fin de compte, c'est l'objet d'état avec lequel il a un problème et cela a du sens parce que la date dans notre 80 00:06:50,010 --> 00:06:54,540 commande lorsque nous le créons ici dans notre boutique Redux est une date Javascript objet. 81 00:06:54,650 --> 00:06:58,150 Maintenant, nous ne pouvons pas afficher cela sous forme de texte comme ça. Pour le sortir, nous pouvons 82 00:06:58,160 --> 00:07:03,230 aller à notre modèle mais ici, qui est finalement le plan que nous utilisons pour créer les commandes 83 00:07:03,820 --> 00:07:09,830 et dans le modèle de commande, nous pouvons faire quelque chose que nous n'avons pas fait auparavant, nous pouvons ajouter une 84 00:07:10,070 --> 00:07:15,650 méthode à cela modèle ou pour être précis, un getter qui est une fonctionnalité Javascript par défaut du Javascript moderne. 85 00:07:15,650 --> 00:07:21,200 Donc ici, nous pouvons utiliser le mot-clé get puis n'importe quel nom de votre choix comme date lisible qui est 86 00:07:21,200 --> 00:07:26,330 comme une fonction mais pas une fonction que vous appelez comme une fonction mais à laquelle vous accédez 87 00:07:26,330 --> 00:07:32,600 comme une propriété à la fin qui retourne une valeur calculée et là Je veux renvoyer cette date, donc l'objet date qui est 88 00:07:32,600 --> 00:07:40,100 stocké pour cet objet mais nous pouvons ensuite appeler la chaîne de date locale qui est une méthode Javascript intégrée que nous pouvons utiliser sur les objets 89 00:07:40,130 --> 00:07:46,790 date pour convertir cet objet en une date lisible par l'homme. Là on passe dans le langage pour lequel on 90 00:07:46,790 --> 00:07:52,190 veut l'optimiser comme ça par exemple et maintenant on peut le configurer avec un 91 00:07:52,220 --> 00:07:58,100 deuxième argument qui est un objet Javascript. Là, vous pouvez définir comment 92 00:07:58,100 --> 00:08:03,260 l'année doit être configurée et attachée, vous trouverez les documents détaillés 93 00:08:03,260 --> 00:08:11,020 pour cette méthode si vous voulez tout savoir et par exemple, nous pouvons définir l'année en numérique, 94 00:08:14,470 --> 00:08:22,980 le mois en long, le jour en numérique, l'heure à deux chiffres et la minute également à deux chiffres. 95 00:08:23,160 --> 00:08:28,650 Maintenant, nous avons cette propriété de date lisible à laquelle nous pouvons accéder sur n'importe quel article de commande 96 00:08:29,190 --> 00:08:34,960 et là pour l'instant dans l'écran des commandes, au lieu de passer l'objet de données comme ceci, j'accède à une 97 00:08:35,010 --> 00:08:41,520 date lisible qui est maintenant cette nouvelle propriété getter que nous avons ajoutée et maintenant quoi vous verrez que si je passe à 98 00:08:41,520 --> 00:08:48,960 nouveau cette commande ici en cliquant sur commander maintenant et que je passe maintenant à mes commandes, vous voyez maintenant le montant total et cette date 99 00:08:48,960 --> 00:08:55,320 correctement formatée et maintenant si je fais la même chose sur Android et que je passe une commande ici et je vais 100 00:08:55,320 --> 00:09:02,130 à l'écran de mes commandes, vous voyez la même chose là-bas. Maintenant là, je veux juste ajuster un peu ce bouton, en général 101 00:09:02,130 --> 00:09:09,840 aussi sur iOS, il ne devrait pas être aussi large, pas aussi large ici. Donc, dans le composant d'élément de commande où j'ai ce bouton, à la 102 00:09:09,840 --> 00:09:21,750 fin ce que nous pouvons faire est sur cette vue ici, nous pouvons ajouter aligner les éléments au centre pour centrer le contenu le long de l'axe transversal qui est de gauche à droite et donc maintenant si j'essaie ceci à 103 00:09:21,750 --> 00:09:28,550 nouveau et je passe cette commande et je passe aux commandes, vous voyez que ce n'est plus pressable là-bas et c'est encore plus 104 00:09:28,550 --> 00:09:32,760 clair sur Android si nous le rechargeons là-bas et je passe cette commande très rapidement 105 00:09:35,950 --> 00:09:43,060 ici, allez à l'écran des commandes, maintenant nous avons ce bouton. Maintenant, bien sûr, l'objectif est que lorsque nous 106 00:09:43,060 --> 00:09:50,530 appuyez sur ce bouton, cet ordre se développe ici. Au fait, vous remarquerez sur Android que cette date 107 00:09:50,530 --> 00:09:53,460 ne s'affiche pas correctement, c'est 108 00:09:53,470 --> 00:09:56,970 donc une autre chose que nous devons corriger. 109 00:09:57,050 --> 00:10:02,240 Maintenant, la raison pour laquelle cela ne s'affiche pas correctement est la façon dont React Native fonctionne en interne, 110 00:10:02,300 --> 00:10:08,810 quel moteur Javascript qu'il utilise en interne et celui qu'il utilise pour Android là-bas ou sur les plates-formes Android ne prend tout simplement 111 00:10:08,810 --> 00:10:13,980 pas en charge cette méthode de chaîne de date agréable aux paramètres régionaux que j'utilise ici . 112 00:10:14,180 --> 00:10:17,500 Le moteur utilisé sur iOS le fait mais sur 113 00:10:17,510 --> 00:10:23,030 Android, ce n'est pas le cas, ce qui est bien sûr gênant et pas terrible. 114 00:10:23,030 --> 00:10:26,030 Alors, que pouvons-nous faire sur Android pour résoudre ce problème? 115 00:10:26,030 --> 00:10:34,610 La solution consiste à installer une bibliothèque distincte qui s'appelle moment. js, nous avons installé avec npm install 116 00:10:34,610 --> 00:10:36,440 --save moment. 117 00:10:36,740 --> 00:10:39,580 Il s'agit d'une bibliothèque tierce qui fonctionnera sur 118 00:10:39,590 --> 00:10:43,830 les deux plates-formes, ce qui rend le formatage des dates également très simple. 119 00:10:44,420 --> 00:10:47,000 Attendons donc la fin de cette installation. 120 00:10:47,090 --> 00:10:53,400 Maintenant que celui-ci est installé, vous importez tout sous forme d'instant en instant et à partir de la bibliothèque que vous venez 121 00:10:53,570 --> 00:10:56,530 d'installer et vous pouvez maintenant l'utiliser dans ce fichier ici. 122 00:10:56,540 --> 00:11:03,950 Maintenant, nous pouvons commenter ceci ici et retourner à la place moment, exécuté comme une fonction et passer 123 00:11:03,950 --> 00:11:05,030 ici. date, 124 00:11:05,050 --> 00:11:12,800 donc l'objet date que nous voulons formater et appeler le format. Maintenant, le format prend une chaîne où vous pouvez configurer comment formater cela 125 00:11:12,800 --> 00:11:16,880 et attaché, vous trouverez également un lien vers les documents officiels où vous pouvez tout 126 00:11:16,880 --> 00:11:19,330 savoir sur les possibilités que vous avez là-bas. 127 00:11:19,360 --> 00:11:26,760 Maintenant, voici un exemple, une façon de formater ceci, disons un long mois que vous faites avec 128 00:11:26,770 --> 00:11:34,570 4 Ms majuscules, puis le o pour avoir une date bien formatée dans ce mois, une sortie 129 00:11:34,570 --> 00:11:44,730 jour par mois, une année représentée par quatre chiffres et puis une heure toujours représentée avec deux chiffres et les minutes et maintenant 130 00:11:45,180 --> 00:11:47,160 si nous l'enregistrons et 131 00:11:47,180 --> 00:11:56,250 nous l'essayons, commencez sur iOS, ajoutez ceci ici au panier, allez dans le panier et commandez ceci et maintenant allez dans 132 00:11:56,250 --> 00:11:57,840 les commandes, cela ressemble 133 00:11:57,840 --> 00:11:58,870 bien. 134 00:11:59,040 --> 00:12:02,440 Et maintenant, si nous essayons également sur Android, nous 135 00:12:02,730 --> 00:12:06,860 commandons cela et ensuite nous passons aux commandes, cela semble également bien là-bas. 136 00:12:06,960 --> 00:12:10,610 Maintenant, c'est un petit correctif, travaillons maintenant sur le bouton 137 00:12:10,740 --> 00:12:17,220 et lui donnons un peu d'espacement en plus de réduire sa taille et cela peut être fait en allant au résumé 138 00:12:17,220 --> 00:12:22,260 ici qui est le style appliqué à la vue qui contient les deux morceaux de texte, 139 00:12:22,260 --> 00:12:29,190 là nous pouvons simplement ajouter une marge au bas de disons 15 afin d'avoir un certain espacement entre cette ligne de résumé qui 140 00:12:29,190 --> 00:12:36,540 est cette ligne de texte en haut et le bouton en dessous. Je vais donc ajouter ceci à mon panier ici, commander ceci, puis revenir ici, aller aux commandes, maintenant 141 00:12:36,690 --> 00:12:37,750 ça a l'air bien. 142 00:12:37,770 --> 00:12:39,300 Maintenant, assurons-nous que le bouton 143 00:12:39,300 --> 00:12:41,000 Afficher les détails fait aussi quelque chose.