Alors assurons-nous que nous pouvons aller à l'écran de modification du produit et pour cela
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
ces quelques choses pour le moment comprendra la vue et le texte et également une feuille de style
dont nous aurons besoin
plus tard, puis ici nous avons l'écran d'édition du produit où je vais obtenir des accessoires et je dois retourner du jsx.
J'ai configuré mon objet de styles ici avec la feuille de style. créer comme ça, puis nous pouvons exporter l'écran de
modification du produit par défaut.
Maintenant, ici, dans le composant lui-même, pour le moment juste pour voir que cela
fonctionne, nous pouvons sortir une vue avec un texte là-bas où nous disons que l'écran d'édition du produit
et plus tard bien sûr, nous afficherons des choses plus utiles ici et
maintenant pour y aller, encore une fois, nous devons l'enregistrer dans un
navigateur, cela fait partie du navigateur d'administration, alors importons cet écran, importons l'écran de modification
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
qu'identifiant, pointez sur l'écran de modification du produit.
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
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
ou lorsque nous appuyons sur modifier, alors je veux faire la même chose.
Je vais donc à nouveau créer une fonction ici afin
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
je veux
é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,
donc à l'écran avec cet identifiant que j'ai bien sûr parce que c'est l'identifiant que je
viens d'enregistrer ici
et je veux transmettre l'ID du produit ici.
Ainsi, l'ID que j'obtiens comme argument ici dans la fonction est transmis en tant que paramètre de routage, maintenant
le gestionnaire de produit d'édition est la fonction qui doit être exécutée ici lorsque nous
cliquons sur le bouton d'édition, là je transfère itemData. article. id et je fais la même chose ici dans
ce gestionnaire de sélection bien sûr.
Si nous y jetons un coup d'œil,
nous revenons ici, admin, cliquez ici, l'écran de modification du produit, également si je
clique sur le bouton de modification, donc cela fonctionne. Maintenant, pour ajouter de nouveaux produits, je veux aller sur le même
écran mais sans passer par un ID et cela nous permettra ensuite de savoir si nous sommes en mode édition ou ajout sur
cet écran de produit en vérifiant si nous avons un ID ou pas.
Donc, pour aller à cet écran d'ajout de produit, nous pouvons ajouter un élément d'action, donc un élément à la
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.
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
ê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
quelque chose et ici aussi, je ne bascule pas le tiroir mais à la place j'appelle naviguer et aller pour
éditer le produit et maintenant comme je l'ai mentionné important, sans passer de paramètres ici parce que nous ajoutons
un nouveau produit, nous ne passerons certainement pas tout ID existant ici.
Et avec cela ajouté, par exemple sur Android pour mélanger les choses sur l'écran d'administration, nous pouvons maintenant appuyer sur cette
icône de la barre d'action pour accéder à l'écran.
Maintenant, bien sûr, ici l'en-tête est manquant et nous allons corriger cela, mais avant de le
faire, il y a autre chose que je veux corriger, la tasse de café est
en fait coupée ici sur iOS, vous voyez que le G est un peu coupé off et en plus de cela,
vous avez peut-être remarqué plus tôt que lorsque j'avais des articles dans le panier et que je les retirais,
qu'avant j'avais un moins ici, maintenant corrigeons les deux choses. Pour la tasse à café
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
éléments, comme l'image avait 60%
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
ait un peu plus d'espace et cela garantit que la tasse de café
est là, c'était une solution simple.
Maintenant, pour le panier, le problème est simplement que
dans les coulisses lorsque vous travaillez avec
des nombres à virgule flottante, Javascript n'a pas la précision que vous voudriez peut-être qu'il
ait et c'est
ainsi que Javascript fonctionne et donc
si vous ajoutez deux éléments, puis supprimez les deux, vous pouvez en fait vous
retrouver avec une valeur qui, à une décimale, n'est pas 0. Maintenant, ce que vous pouvez faire pour résoudre ce
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,
arrondir et enrouler cela à une valeur fixe ici et le multiplier par 100 et par la suite, divisez cela par 100.
Cela garantira que vous ne vous retrouverez jamais avec
ce moins, encore une fois cela a à voir avec la façon dont Javascript gère en interne ces nombres à virgule flottante.
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
nous supprimons des articles
ici, nous devrions toujours nous retrouver avec un zéro comme celui-ci, jamais avec un moins
devant.
Donc, ce n'est qu'une petite amélioration concernant la façon dont nous produisons cela et avec ces ajustements visuels à l'écart,
revenons aux produits utilisateur et assurons-nous que maintenant que nous pouvons atteindre l'écran d'édition et d'ajout qui
est un seul et même
é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.