1 00:00:02,380 --> 00:00:08,420 Commençons par la boîte de dialogue de confirmation ici dans l'écran d'édition du produit. Nous pouvons simplement importer l'API d'alerte à partir 2 00:00:08,450 --> 00:00:16,490 de React Native, ce qui nous permet d'afficher une belle alerte, puis d'ajouter une nouvelle méthode ici peut-être, nous pourrions tous le faire 3 00:00:16,490 --> 00:00:22,830 en ligne, mais pour avoir un code un peu plus structuré où j'ai mon gestionnaire de suppression. 4 00:00:23,020 --> 00:00:28,600 Soit dit en passant, la façon dont vous nommez vos fonctions dépend entièrement de vous, j'aime ce nom de gestionnaire ici si j'attribue cela à 5 00:00:28,600 --> 00:00:35,950 mes émetteurs d'événements dans le code jsx pour ainsi dire et là-bas, nous pouvons appeler alert. alerte pour afficher une alerte avec 6 00:00:35,980 --> 00:00:37,690 le titre du 7 00:00:37,720 --> 00:00:38,960 message 8 00:00:39,880 --> 00:00:45,670 êtes-vous sûr, voulez-vous vraiment supprimer cet élément, puis un tableau 9 00:00:45,670 --> 00:00:48,940 avec tous les boutons que nous 10 00:00:48,940 --> 00:00:58,020 voulons présenter où le bouton numéro un a un texte non et un style par défaut. 11 00:00:58,060 --> 00:01:02,800 Il n'y a que trois styles par défaut ou styles préconfigurés parmi lesquels vous pouvez choisir et aucun gestionnaire spécial 12 00:01:02,800 --> 00:01:03,930 sur ce premier bouton. 13 00:01:04,030 --> 00:01:07,180 Le deuxième bouton a oui, là, je veux 14 00:01:07,190 --> 00:01:10,640 avoir un style destructeur pour marquer cela car 15 00:01:10,640 --> 00:01:17,900 cela supprimera quelque chose et le gestionnaire onPress ici est alors à la fin tenant une fonction qui 16 00:01:17,900 --> 00:01:20,540 enverra vraiment l'action de suppression. 17 00:01:20,610 --> 00:01:28,110 Alors maintenant, c'est le gestionnaire de suppression que je veux exécuter lorsque nous cliquons sur ce bouton de suppression et, par conséquent, bien sûr, je suis dans le 18 00:01:28,110 --> 00:01:30,080 mauvais composant que je viens de voir. 19 00:01:30,210 --> 00:01:31,610 Coupons cela, ce n'est 20 00:01:31,800 --> 00:01:33,740 pas à l'intérieur de l'écran de modification 21 00:01:33,750 --> 00:01:35,440 du produit, nous n'avons pas besoin 22 00:01:35,460 --> 00:01:41,310 d'importer l'alerte là-bas, c'est l'écran des produits utilisateur dont je parle. Là, nous devons importer l'alerte, nous devons 23 00:01:41,700 --> 00:01:47,380 ajouter ce gestionnaire et maintenant le gestionnaire de suppression doit être affecté à ce bouton de 24 00:01:47,400 --> 00:01:53,730 suppression ici, donc ici nous pouvons simplement pointer sur le gestionnaire de suppression et cette fonction anonyme peut 25 00:01:53,980 --> 00:02:00,790 être coupée de là-bas et peut être déplacé ici et remplacer ce gestionnaire onPress pour ce bouton et maintenant avec 26 00:02:00,790 --> 00:02:07,320 cela, nous devrions obtenir cette fenêtre contextuelle, cette boîte de dialogue de confirmation avant de supprimer réellement quelque chose. 27 00:02:07,330 --> 00:02:09,790 Donc, si je clique sur supprimer, maintenant je demande, si 28 00:02:09,790 --> 00:02:10,210 j'appuie 29 00:02:10,210 --> 00:02:11,640 sur non, rien ne se passe, 30 00:02:11,650 --> 00:02:16,060 seulement si je clique sur oui, nous supprimons cela. La petite erreur est bien sûr que les 31 00:02:16,060 --> 00:02:17,920 données sur les articles dont nous avons 32 00:02:20,570 --> 00:02:21,790 besoin doivent être disponibles. 33 00:02:21,830 --> 00:02:24,920 Donc, ici, nous transmettons l'ID que nous voulons supprimer, donc en 34 00:02:24,920 --> 00:02:30,180 fait pour le gestionnaire de suppression, nous avons besoin de l'ID du produit auquel nous appliquons ce gestionnaire 35 00:02:30,410 --> 00:02:35,360 afin qu'ici, j'ai cet ID disponible et cela signifie que lorsque le gestionnaire de suppression est appelé 36 00:02:35,360 --> 00:02:37,980 là-bas, nous devons nous assurer qu'il obtient l'ID. 37 00:02:38,510 --> 00:02:40,150 Il y a donc deux façons de le faire, une fonction 38 00:02:40,400 --> 00:02:46,100 anonyme dans laquelle nous exécutons le gestionnaire de suppression manuellement et transmettons itemData. article. id ou alternative 39 00:02:46,100 --> 00:02:55,000 à cela, en passant le gestionnaire de suppression comme ceci, mais utilisez bind pour préconfigurer tous les arguments 40 00:02:55,000 --> 00:03:01,150 que cette fonction obtiendra. Bind a toujours besoin de valeur pour le mot-clé this à l'intérieur de la fonction qu'il exécutera. Là, nous pouvons simplement passer ceci, 41 00:03:01,150 --> 00:03:04,170 cela n'a pas d'importance mais le deuxième argument est 42 00:03:04,360 --> 00:03:08,290 maintenant le premier argument que le gestionnaire de suppression obtiendra, alors 43 00:03:08,620 --> 00:03:15,640 ici nous passons itemData. article. id. Maintenant, avec cela, nous nous 44 00:03:15,640 --> 00:03:22,530 assurons que nous pouvons réellement appuyer sur oui et cela fonctionnera, si nous revenons maintenant ici à l'administrateur, cliquez sur supprimer, appuyez sur 45 00:03:22,600 --> 00:03:27,700 oui, cela fonctionne vraiment et si nous appuyez sur non, rien ne se passe, oui le supprime. 46 00:03:27,700 --> 00:03:29,020 C'est donc la première 47 00:03:29,230 --> 00:03:34,450 chose et pour nous assurer de revenir en arrière, si nous l'enregistrons, nous devons maintenant aller à l'écran 48 00:03:34,750 --> 00:03:41,680 de modification du produit et là dans notre gestionnaire de soumission, peu importe si nous envoyons la mise à jour ou créons une action 49 00:03:41,680 --> 00:03:51,870 de produit, dans le Je souhaite également appeler la navigation des accessoires pour revenir à l'écran précédent. Et si nous enregistrons maintenant cela et que nous allons à l'écran 50 00:03:53,430 --> 00:03:58,920 d'administration et que je soumets pour l'instant un produit vide, je reçois bien sûr 51 00:04:01,990 --> 00:04:07,750 un avertissement mais cela fonctionne généralement, cela revient et si je modifie un produit, cela 52 00:04:07,750 --> 00:04:08,890 fonctionne également. 53 00:04:08,950 --> 00:04:13,470 Alors maintenant, avec cela, nous avons terminé concernant toute cette gestion des entrées, la dernière 54 00:04:13,510 --> 00:04:18,920 chose que je veux faire avant de terminer tout cela, c'est maintenant que je veux optimiser un 55 00:04:18,920 --> 00:04:20,850 peu plus le produit et la 56 00:04:21,040 --> 00:04:26,800 façon dont nous ' réutiliser notre carte, regardez ici avec l'ombre et ainsi de suite parce que nous l'utilisons 57 00:04:27,040 --> 00:04:28,270 dans plusieurs composants 58 00:04:28,270 --> 00:04:33,940 et si vous vous retrouvez à utiliser quelque chose dans plusieurs composants, vous voudrez peut-être toujours vous demander 59 00:04:33,940 --> 00:04:35,920 si vous pouvez l'optimiser un peu 60 00:04:35,980 --> 00:04:39,370 plus et en fait ici , nous avons un potentiel d'optimisation. 61 00:04:39,490 --> 00:04:42,600 Alors, comment pouvons-nous optimiser cela? 62 00:04:42,720 --> 00:04:48,720 Eh bien, nous pourrions créer un composant distinct ici dans notre dossier UI du dossier des 63 00:04:49,080 --> 00:04:55,800 composants que nous nommons panier. js, où nous venons de stocker ce look panier. Un composant de chariot 64 00:04:55,800 --> 00:05:05,140 peut être un composant très simple à la fin. Nous importons React de React ici parce que nous devons créer un composant 65 00:05:05,260 --> 00:05:13,990 et nous importons une vue de React Native, juste comme ça et maintenant ici, nous créons notre composant panier où nous obtenons simplement nos accessoires, 66 00:05:14,030 --> 00:05:21,000 retournons du jsx et exportons ce composant dans le À la fin, bien que nous devions également configurer un style, 67 00:05:21,000 --> 00:05:23,390 car c'est l'idée centrale de ce 68 00:05:23,400 --> 00:05:30,370 composant, il s'agit de nous donner des styles préconfigurés. Je vais donc également ajouter mes styles constants avec 69 00:05:30,680 --> 00:05:31,750 Stylesheet. créer 70 00:05:31,770 --> 00:05:36,710 là-bas et maintenant, quel est le code jsx que je veux retourner ici? 71 00:05:36,760 --> 00:05:41,920 Eh bien, c'est une vue, une vue qui encapsulera tout ce que nous passerons là-bas, 72 00:05:41,950 --> 00:05:46,870 donc entre les balises de mon composant, donc juste des accessoires pour les enfants là-dedans, 73 00:05:46,930 --> 00:05:53,690 mais maintenant cette vue peut obtenir un style par défaut ici que je nommerai cart et qui devrait être les 74 00:05:53,690 --> 00:05:56,090 styles avec lesquels je copie autrement. 75 00:05:56,110 --> 00:06:01,780 Donc, ici, mon style de panier dans ce composant du panier est exactement ce que j'ai ici, l'article de produit, 76 00:06:01,780 --> 00:06:02,880 c'est ce truc 77 00:06:02,900 --> 00:06:09,540 d'ombres ici, l'élévation, le rayon de la bordure et la couleur d'arrière-plan. Vous pouvez couper tout cela et le déplacer dans le 78 00:06:09,540 --> 00:06:10,260 panier ici. 79 00:06:11,580 --> 00:06:16,890 Maintenant, pour pouvoir encore configurer cela un peu, je vais en fait améliorer cela 80 00:06:16,890 --> 00:06:27,540 et définir le style sur un objet où je fusionne dans mes valeurs de panier de styles et toutes les valeurs que j'obtiens sur l'accessoire de style ici, comme ceci. 81 00:06:27,540 --> 00:06:32,970 Alors maintenant, nous pouvons même définir un accessoire de style lorsque nous utilisons notre panier 82 00:06:32,970 --> 00:06:39,240 et passer dans nos propres styles qui seront fusionnés avec ces styles de carte par défaut, car cela 83 00:06:39,300 --> 00:06:50,780 me permet désormais d'utiliser le panier ici dans l'article du produit, par exemple en important le panier depuis , et maintenant monter d'un niveau dans le dossier UI, dans le fichier du 84 00:06:51,000 --> 00:06:52,460 panier et remplacer 85 00:06:52,500 --> 00:06:54,830 cette vue ici, cette vue extérieure 86 00:06:54,860 --> 00:07:01,410 par la carte et bien sûr aussi remplacer la balise de fermeture et toujours passer dans mes spécifications 87 00:07:01,410 --> 00:07:08,360 de produit ici, donc cette hauteur et la marge . 88 00:07:08,360 --> 00:07:11,570 Cela sera fusionné avec les autres looks de la carte et tout entre 89 00:07:11,570 --> 00:07:15,030 les balises d'ouverture et de fermeture de la carte fonctionnera, je passe cela dans ma 90 00:07:15,020 --> 00:07:18,820 carte ici avec l'aide d'accessoires pour enfants. Maintenant, la même chose pour l'article 91 00:07:18,830 --> 00:07:25,280 de commande, il nous suffit d'importer la carte et maintenant d'aller dans le dossier UI, de la carte ici et ensuite d'utiliser 92 00:07:26,240 --> 00:07:29,690 la carte à la place de cette vue, cette vue extérieure 93 00:07:29,700 --> 00:07:34,570 ici, de la remplacer par une carte et de se débarrasser de ces styles de carte 94 00:07:34,590 --> 00:07:39,330 ici, le truc d'ombre, l'élévation, le rayon de la bordure et la couleur d'arrière-plan et ne 95 00:07:39,330 --> 00:07:45,640 gardent que les styles spéciaux dans lesquels vous souhaitez fusionner. Et maintenant la dernière chose, le dernier endroit où nous pouvons utiliser 96 00:07:45,660 --> 00:07:49,440 c'est l'écran du panier, là j'ai aussi mon résumé qui utilise ces styles de cartes. 97 00:07:49,770 --> 00:07:56,870 Eh bien, encore une fois, nous pouvons importer le composant de la carte à partir du dossier des composants, le 98 00:07:56,920 --> 00:08:04,930 dossier de l'interface utilisateur ici et là, à partir du panier. fichier js et maintenant utiliser le composant de la carte au lieu de la 99 00:08:05,320 --> 00:08:07,290 vue à l'endroit où nous voulons 100 00:08:07,300 --> 00:08:11,380 ces styles de carte, donc ici ce serait la vue qui avait les styles 101 00:08:11,380 --> 00:08:16,590 de résumé, je vais remplacer cela par la carte. Et dans les styles de résumé, nous conservons tout 102 00:08:16,650 --> 00:08:22,170 ce qui est spécifique à cet écran ou à ce composant, mais nous pouvons nous débarrasser de la couleur de l'ombre, 103 00:08:22,170 --> 00:08:27,260 du rayon de l'ombre, de l'élévation, de la couleur d'arrière-plan du rayon de la bordure, qui peuvent tous être supprimés. 104 00:08:27,290 --> 00:08:32,480 Maintenant, sauvegardons cela et vous verrez que bien sûr l'application fonctionne toujours et ressemble à 105 00:08:32,480 --> 00:08:33,800 ce qu'elle faisait 106 00:08:34,630 --> 00:08:41,320 avant si j'ajoute ceci au panier par exemple et que je commande ceci et que je regarde mes commandes, tout 107 00:08:41,320 --> 00:08:48,760 cela ressemble à la comme avant, mais maintenant il le fait avec un peu de code plus optimal où nous réutilisons réellement 108 00:08:48,760 --> 00:08:53,610 nos styles et avons un composant de présentation séparé pour eux afin que nos 109 00:08:53,650 --> 00:08:59,170 autres composants puissent être un peu plus légers et nous ne nous répétons pas comme souvent 110 00:08:59,170 --> 00:09:05,710 lors de la configuration de ce look de chariot. Un autre avantage est que nous ne pouvons pas mal saisir, si 111 00:09:05,710 --> 00:09:11,220 nous définissons le rayon d'ombre à 8 dans un composant et 10 dans un autre, alors notre application peut sembler légèrement incohérente. 112 00:09:11,260 --> 00:09:17,830 Nous évitons cela en ayant certains composants centrés sur le style qui configurent ces styles de base que nous utilisons ensuite 113 00:09:17,830 --> 00:09:20,410 dans d'autres composants comme nous le faisons ici.