1 00:00:02,360 --> 00:00:08,330 Alors assurons-nous que nous pouvons aller à l'écran de modification du produit et pour cela 2 00:00:08,330 --> 00:00:17,550 bien sûr, je vais d'abord le remplir de vie en important React de React et ensuite aussi en important certaines choses de React Native et 3 00:00:17,850 --> 00:00:24,960 ces quelques choses pour le moment comprendra la vue et le texte et également une feuille de style 4 00:00:24,960 --> 00:00:26,610 dont nous aurons besoin 5 00:00:26,670 --> 00:00:34,980 plus tard, puis ici nous avons l'écran d'édition du produit où je vais obtenir des accessoires et je dois retourner du jsx. 6 00:00:34,980 --> 00:00:45,420 J'ai configuré mon objet de styles ici avec la feuille de style. créer comme ça, puis nous pouvons exporter l'écran de 7 00:00:45,450 --> 00:00:49,310 modification du produit par défaut. 8 00:00:49,390 --> 00:00:55,030 Maintenant, ici, dans le composant lui-même, pour le moment juste pour voir que cela 9 00:00:55,030 --> 00:01:01,990 fonctionne, nous pouvons sortir une vue avec un texte là-bas où nous disons que l'écran d'édition du produit 10 00:01:01,990 --> 00:01:07,210 et plus tard bien sûr, nous afficherons des choses plus utiles ici et 11 00:01:07,270 --> 00:01:12,120 maintenant pour y aller, encore une fois, nous devons l'enregistrer dans un 12 00:01:13,150 --> 00:01:18,940 navigateur, cela fait partie du navigateur d'administration, alors importons cet écran, importons l'écran de modification 13 00:01:18,940 --> 00:01:29,060 du produit à partir des écrans écran de modification du produit par l'utilisateur, puis ajoutez-le ici au navigateur d'administration, peut-être avec modifier le produit en tant 14 00:01:29,060 --> 00:01:32,330 qu'identifiant, pointez sur l'écran de modification du produit. 15 00:01:32,330 --> 00:01:37,250 Maintenant, nous devrions généralement pouvoir nous y déplacer, mais bien sûr, nous devons maintenant déclencher une action de navigation pour 16 00:01:37,250 --> 00:01:42,320 l'atteindre et c'est quelque chose que je veux faire depuis l'intérieur de l'écran du produit utilisateur lorsque nous le sélectionnons 17 00:01:42,560 --> 00:01:46,060 ou lorsque nous appuyons sur modifier, alors je veux faire la même chose. 18 00:01:46,220 --> 00:01:50,040 Je vais donc à nouveau créer une fonction ici afin 19 00:01:50,240 --> 00:02:00,170 de ne pas dupliquer mon code, sélectionner un produit ou modifier le gestionnaire de produit peut-être, c'est une fonction où je m'attends à obtenir l'ID que 20 00:02:00,200 --> 00:02:01,420 je veux 21 00:02:01,460 --> 00:02:11,630 éditer donc l'ID du produit que je veux pour modifier et ici, je veux utiliser la navigation des accessoires, accédez à l'écran de modification du produit, 22 00:02:11,780 --> 00:02:17,900 donc à l'écran avec cet identifiant que j'ai bien sûr parce que c'est l'identifiant que je 23 00:02:17,930 --> 00:02:19,330 viens d'enregistrer ici 24 00:02:21,370 --> 00:02:24,580 et je veux transmettre l'ID du produit ici. 25 00:02:25,730 --> 00:02:30,150 Ainsi, l'ID que j'obtiens comme argument ici dans la fonction est transmis en tant que paramètre de routage, maintenant 26 00:02:30,200 --> 00:02:33,960 le gestionnaire de produit d'édition est la fonction qui doit être exécutée ici lorsque nous 27 00:02:33,980 --> 00:02:40,850 cliquons sur le bouton d'édition, là je transfère itemData. article. id et je fais la même chose ici dans 28 00:02:40,850 --> 00:02:42,790 ce gestionnaire de sélection bien sûr. 29 00:02:45,360 --> 00:02:48,400 Si nous y jetons un coup d'œil, 30 00:02:48,510 --> 00:02:53,630 nous revenons ici, admin, cliquez ici, l'écran de modification du produit, également si je 31 00:02:53,640 --> 00:03:00,030 clique sur le bouton de modification, donc cela fonctionne. Maintenant, pour ajouter de nouveaux produits, je veux aller sur le même 32 00:03:00,080 --> 00:03:05,730 écran mais sans passer par un ID et cela nous permettra ensuite de savoir si nous sommes en mode édition ou ajout sur 33 00:03:05,730 --> 00:03:08,940 cet écran de produit en vérifiant si nous avons un ID ou pas. 34 00:03:08,940 --> 00:03:16,560 Donc, pour aller à cet écran d'ajout de produit, nous pouvons ajouter un élément d'action, donc un élément à la 35 00:03:16,560 --> 00:03:24,280 barre d'en-tête ici dans l'écran du produit utilisateur et qui devrait être à droite, donc je vais ajouter un en-tête ici. 36 00:03:25,290 --> 00:03:32,530 C'est finalement ce que nous avons configuré ici, donc je vais copier cela en utilisant des boutons d'en-tête, mais l'identifiant ici pourrait 37 00:03:32,530 --> 00:03:40,840 être ajouté et l'icône devrait être md create et ios create pour avoir cette icône qui signale que nous sommes sur le point de créer 38 00:03:40,840 --> 00:03:47,260 quelque chose et ici aussi, je ne bascule pas le tiroir mais à la place j'appelle naviguer et aller pour 39 00:03:47,260 --> 00:03:53,650 éditer le produit et maintenant comme je l'ai mentionné important, sans passer de paramètres ici parce que nous ajoutons 40 00:03:53,650 --> 00:03:57,910 un nouveau produit, nous ne passerons certainement pas tout ID existant ici. 41 00:03:58,970 --> 00:04:06,070 Et avec cela ajouté, par exemple sur Android pour mélanger les choses sur l'écran d'administration, nous pouvons maintenant appuyer sur cette 42 00:04:06,430 --> 00:04:09,540 icône de la barre d'action pour accéder à l'écran. 43 00:04:09,710 --> 00:04:14,540 Maintenant, bien sûr, ici l'en-tête est manquant et nous allons corriger cela, mais avant de le 44 00:04:14,540 --> 00:04:19,120 faire, il y a autre chose que je veux corriger, la tasse de café est 45 00:04:19,130 --> 00:04:25,220 en fait coupée ici sur iOS, vous voyez que le G est un peu coupé off et en plus de cela, 46 00:04:25,220 --> 00:04:30,680 vous avez peut-être remarqué plus tôt que lorsque j'avais des articles dans le panier et que je les retirais, 47 00:04:31,380 --> 00:04:37,490 qu'avant j'avais un moins ici, maintenant corrigeons les deux choses. Pour la tasse à café 48 00:04:37,490 --> 00:04:46,400 ou pour le texte coupé, la raison est simple. Dans le composant d'élément de produit ici, nous attribuons la hauteur à nos différents 49 00:04:46,400 --> 00:04:48,420 éléments, comme l'image avait 60% 50 00:04:48,550 --> 00:04:56,090 de hauteur, les détails en avaient 15, donnons ces 17 et déduisons donc deux points de pourcentage des actions pour que le titre 51 00:04:56,080 --> 00:05:00,440 ait un peu plus d'espace et cela garantit que la tasse de café 52 00:05:00,440 --> 00:05:02,540 est là, c'était une solution simple. 53 00:05:02,540 --> 00:05:05,560 Maintenant, pour le panier, le problème est simplement que 54 00:05:05,570 --> 00:05:07,910 dans les coulisses lorsque vous travaillez avec 55 00:05:07,910 --> 00:05:12,950 des nombres à virgule flottante, Javascript n'a pas la précision que vous voudriez peut-être qu'il 56 00:05:12,950 --> 00:05:14,630 ait et c'est 57 00:05:14,630 --> 00:05:16,800 ainsi que Javascript fonctionne et donc 58 00:05:17,000 --> 00:05:21,910 si vous ajoutez deux éléments, puis supprimez les deux, vous pouvez en fait vous 59 00:05:21,920 --> 00:05:29,580 retrouver avec une valeur qui, à une décimale, n'est pas 0. Maintenant, ce que vous pouvez faire pour résoudre ce 60 00:05:29,580 --> 00:05:39,550 problème dans l'écran du panier est ici lorsque vous sortez le montant avec à fixe, vous pouvez réellement utiliser les mathématiques qui sont intégrées dans Javascript, 61 00:05:39,610 --> 00:05:47,830 arrondir et enrouler cela à une valeur fixe ici et le multiplier par 100 et par la suite, divisez cela par 100. 62 00:05:47,850 --> 00:05:50,580 Cela garantira que vous ne vous retrouverez jamais avec 63 00:05:50,610 --> 00:05:56,420 ce moins, encore une fois cela a à voir avec la façon dont Javascript gère en interne ces nombres à virgule flottante. 64 00:05:56,440 --> 00:06:06,210 Alors maintenant, si nous ajoutons à nouveau quelques articles ici et les ajoutons au panier, cela semble généralement bon, donc notre logique fonctionne toujours, mais maintenant si 65 00:06:06,210 --> 00:06:07,700 nous supprimons des articles 66 00:06:07,710 --> 00:06:13,170 ici, nous devrions toujours nous retrouver avec un zéro comme celui-ci, jamais avec un moins 67 00:06:13,170 --> 00:06:13,740 devant. 68 00:06:13,800 --> 00:06:20,070 Donc, ce n'est qu'une petite amélioration concernant la façon dont nous produisons cela et avec ces ajustements visuels à l'écart, 69 00:06:20,070 --> 00:06:25,470 revenons aux produits utilisateur et assurons-nous que maintenant que nous pouvons atteindre l'écran d'édition et d'ajout qui 70 00:06:25,470 --> 00:06:27,480 est un seul et même 71 00:06:27,480 --> 00:06:34,940 écran de Bien sûr, nous y montrons également quelques entrées et nous chargeons des données pour un produit qui devraient être modifiées si nécessaire.