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
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
en ligne, mais pour avoir un code un peu plus structuré où j'ai mon gestionnaire de suppression.
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 à
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
le titre du
message
êtes-vous sûr, voulez-vous vraiment supprimer cet élément, puis un tableau
avec tous les boutons que nous
voulons présenter où le bouton numéro un a un texte non et un style par défaut.
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
sur ce premier bouton.
Le deuxième bouton a oui, là, je veux
avoir un style destructeur pour marquer cela car
cela supprimera quelque chose et le gestionnaire onPress ici est alors à la fin tenant une fonction qui
enverra vraiment l'action de suppression.
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
mauvais composant que je viens de voir.
Coupons cela, ce n'est
pas à l'intérieur de l'écran de modification
du produit, nous n'avons pas besoin
d'importer l'alerte là-bas, c'est l'écran des produits utilisateur dont je parle. Là, nous devons importer l'alerte, nous devons
ajouter ce gestionnaire et maintenant le gestionnaire de suppression doit être affecté à ce bouton de
suppression ici, donc ici nous pouvons simplement pointer sur le gestionnaire de suppression et cette fonction anonyme peut
être coupée de là-bas et peut être déplacé ici et remplacer ce gestionnaire onPress pour ce bouton et maintenant avec
cela, nous devrions obtenir cette fenêtre contextuelle, cette boîte de dialogue de confirmation avant de supprimer réellement quelque chose.
Donc, si je clique sur supprimer, maintenant je demande, si
j'appuie
sur non, rien ne se passe,
seulement si je clique sur oui, nous supprimons cela. La petite erreur est bien sûr que les
données sur les articles dont nous avons
besoin doivent être disponibles.
Donc, ici, nous transmettons l'ID que nous voulons supprimer, donc en
fait pour le gestionnaire de suppression, nous avons besoin de l'ID du produit auquel nous appliquons ce gestionnaire
afin qu'ici, j'ai cet ID disponible et cela signifie que lorsque le gestionnaire de suppression est appelé
là-bas, nous devons nous assurer qu'il obtient l'ID.
Il y a donc deux façons de le faire, une fonction
anonyme dans laquelle nous exécutons le gestionnaire de suppression manuellement et transmettons itemData. article. id ou alternative
à cela, en passant le gestionnaire de suppression comme ceci, mais utilisez bind pour préconfigurer tous les arguments
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,
cela n'a pas d'importance mais le deuxième argument est
maintenant le premier argument que le gestionnaire de suppression obtiendra, alors
ici nous passons itemData. article. id. Maintenant, avec cela, nous nous
assurons que nous pouvons réellement appuyer sur oui et cela fonctionnera, si nous revenons maintenant ici à l'administrateur, cliquez sur supprimer, appuyez sur
oui, cela fonctionne vraiment et si nous appuyez sur non, rien ne se passe, oui le supprime.
C'est donc la première
chose et pour nous assurer de revenir en arrière, si nous l'enregistrons, nous devons maintenant aller à l'écran
de modification du produit et là dans notre gestionnaire de soumission, peu importe si nous envoyons la mise à jour ou créons une action
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
d'administration et que je soumets pour l'instant un produit vide, je reçois bien sûr
un avertissement mais cela fonctionne généralement, cela revient et si je modifie un produit, cela
fonctionne également.
Alors maintenant, avec cela, nous avons terminé concernant toute cette gestion des entrées, la dernière
chose que je veux faire avant de terminer tout cela, c'est maintenant que je veux optimiser un
peu plus le produit et la
façon dont nous ' réutiliser notre carte, regardez ici avec l'ombre et ainsi de suite parce que nous l'utilisons
dans plusieurs composants
et si vous vous retrouvez à utiliser quelque chose dans plusieurs composants, vous voudrez peut-être toujours vous demander
si vous pouvez l'optimiser un peu
plus et en fait ici , nous avons un potentiel d'optimisation.
Alors, comment pouvons-nous optimiser cela?
Eh bien, nous pourrions créer un composant distinct ici dans notre dossier UI du dossier des
composants que nous nommons panier. js, où nous venons de stocker ce look panier. Un composant de chariot
peut être un composant très simple à la fin. Nous importons React de React ici parce que nous devons créer un composant
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,
retournons du jsx et exportons ce composant dans le À la fin, bien que nous devions également configurer un style,
car c'est l'idée centrale de ce
composant, il s'agit de nous donner des styles préconfigurés. Je vais donc également ajouter mes styles constants avec
Stylesheet. créer
là-bas et maintenant, quel est le code jsx que je veux retourner ici?
Eh bien, c'est une vue, une vue qui encapsulera tout ce que nous passerons là-bas,
donc entre les balises de mon composant, donc juste des accessoires pour les enfants là-dedans,
mais maintenant cette vue peut obtenir un style par défaut ici que je nommerai cart et qui devrait être les
styles avec lesquels je copie autrement.
Donc, ici, mon style de panier dans ce composant du panier est exactement ce que j'ai ici, l'article de produit,
c'est ce truc
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
panier ici.
Maintenant, pour pouvoir encore configurer cela un peu, je vais en fait améliorer cela
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.
Alors maintenant, nous pouvons même définir un accessoire de style lorsque nous utilisons notre panier
et passer dans nos propres styles qui seront fusionnés avec ces styles de carte par défaut, car cela
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
panier et remplacer
cette vue ici, cette vue extérieure
par la carte et bien sûr aussi remplacer la balise de fermeture et toujours passer dans mes spécifications
de produit ici, donc cette hauteur et la marge .
Cela sera fusionné avec les autres looks de la carte et tout entre
les balises d'ouverture et de fermeture de la carte fonctionnera, je passe cela dans ma
carte ici avec l'aide d'accessoires pour enfants. Maintenant, la même chose pour l'article
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
la carte à la place de cette vue, cette vue extérieure
ici, de la remplacer par une carte et de se débarrasser de ces styles de carte
ici, le truc d'ombre, l'élévation, le rayon de la bordure et la couleur d'arrière-plan et ne
gardent que les styles spéciaux dans lesquels vous souhaitez fusionner. Et maintenant la dernière chose, le dernier endroit où nous pouvons utiliser
c'est l'écran du panier, là j'ai aussi mon résumé qui utilise ces styles de cartes.
Eh bien, encore une fois, nous pouvons importer le composant de la carte à partir du dossier des composants, le
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
vue à l'endroit où nous voulons
ces styles de carte, donc ici ce serait la vue qui avait les styles
de résumé, je vais remplacer cela par la carte. Et dans les styles de résumé, nous conservons tout
ce qui est spécifique à cet écran ou à ce composant, mais nous pouvons nous débarrasser de la couleur de l'ombre,
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.
Maintenant, sauvegardons cela et vous verrez que bien sûr l'application fonctionne toujours et ressemble à
ce qu'elle faisait
avant si j'ajoute ceci au panier par exemple et que je commande ceci et que je regarde mes commandes, tout
cela ressemble à la comme avant, mais maintenant il le fait avec un peu de code plus optimal où nous réutilisons réellement
nos styles et avons un composant de présentation séparé pour eux afin que nos
autres composants puissent être un peu plus légers et nous ne nous répétons pas comme souvent
lors de la configuration de ce look de chariot. Un autre avantage est que nous ne pouvons pas mal saisir, si
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.
Nous évitons cela en ayant certains composants centrés sur le style qui configurent ces styles de base que nous utilisons ensuite
dans d'autres composants comme nous le faisons ici.