Sur les articles du panier.
Encore une fois, je vais créer un composant distinct pour chaque article du panier
que je veux afficher ici.
Je pourrais le faire ici, mais encore une fois, ce sera un composant un peu plus long et je ne veux pas gonfler ce
fichier avec lui et je vais aussi l'utiliser plus tard ailleurs, ce qui peut sembler étrange étant
donné que nous n'avons que un écran de panier, mais vous verrez où d'autre nous pouvons utiliser
un article de panier plus tard.
Donc, pour cela, revenons dans le dossier des composants et peut-être dans le dossier de la boutique
et ajoutons un CartItem. Fichier js à côté de l'article du produit.
Maintenant, bien sûr, nous avons un composant React normal, donc vous connaissez le jeu,
comment ceux-ci sont créés.
Nous importons React de React, puis ici puisque c'est le composant qui devrait produire quelque chose, nous importerons
un tas de composants de React Native, les principales primitives avec lesquelles nous avons construit l'interface utilisateur.
J'aurai besoin d'une vue, j'aurai besoin d'un texte, j'aurai besoin d'une feuille de style ici à coup sûr et ensuite j'ajouterai ma constante ici, l'article du panier
qui reçoit les accessoires et puis à la fin ici retourne du code jsx. J'ajouterai mon objet de styles ici avec
la création de feuille de
style et je l'exporterai en tant qu'article de panier par défaut.
Maintenant, le code jsx qui doit être renvoyé ici est bien sûr toujours à vous, mais j'aurai une
vue ici et dans cette vue, je veux afficher la quantité et le titre bien sûr, ainsi que le montant total de cet
article du panier au cas où nous en avons ajouté plus d'un, alors ce n'est pas seulement le prix d'un
seul article mais bien sûr le prix multiplié par la quantité et je veux également avoir un bouton qui
me permette de supprimer cet article du
panier, une icône de corbeille.
Donc à la fin, j'aurai une ligne ici avec un texte et ce texte aura la quantité et le titre, donc là
j'aurai la quantité et le titre et en fait cela devrait être stylé différemment, donc je vais envelopper le quantité ici dans un nœud
de texte séparé et faites de même pour le titre, de sorte que j'ai deux nœuds
de texte séparés ici à la fin, puis après ce bloc de texte ici, il devrait y avoir une vue pour regrouper deux autres éléments ensemble, un autre
morceau de texte qui est le montant total pour cet article ici, donc montant et
à côté de cela, un bouton ou en fait pas un bouton mais en fait une icône pressable.
Donc, je vais construire ma propre chose touchable avec une opacité touchante et bien sûr, vous
pouvez à nouveau faire cette différenciation de plate-forme pour l'effet d'entraînement, mais je vais opacité ici sur
les deux plates-formes et j'importe des Ionicons de @ expo / vector-icons que nous avons déjà ajouté plus tôt parce
que je
veux avoir juste une icône ici sur laquelle nous pouvons appuyer, donc ici je veux
avoir une opacité tactile et enrouler cela autour d'une icône que nous pouvons ajouter avec des Ionicons comme vous
l'avez ajouté plus tôt dans ce cours, avec ceci comme un composant ici et ensuite simplement utiliser un
nom qui devrait en fait différer par plate-forme parce que le nom est l'identifiant de l'icône et
là, nous pouvons vérifier le système d'exploitation de la plate-forme et si c'est Android, l'icône qui devrait être utilisée aura un nom de md trash et sinon, ce sera la corbeille
iOS qui rend une belle icône de corbeille et nous pouvons également donner à cette icône une taille de disons 23 qui devrait
encore être assez belle et une couleur et ici, je vais utiliser du rouge parce qu'il supprime cela élément
de sorte qu'il devrait avoir comme un warni de couleur je dirais. L'opacité tactile lorsqu'elle est pressée devrait faire quelque chose et elle devrait transmettre l'événement de
presse au composant qui utilise le
composant d'élément de panier, donc je m'attends à obtenir un accessoire de suppression, ce nom, comme toujours, dépend de vous
qui détient une fonction qui se trouve dans le fin exécuté ensuite et nous pouvons également ajouter un style ici, un style très simple où je pointe sur le bouton Supprimer par exemple et c'est une
déclaration de style que nous pouvons ajouter par la suite.
En parlant de styles, il y a bien
sûr plus de styles à ajouter, par exemple sur la vue la plus haute ici, je
vais donner à ce style un élément de panier,
ce texte ici recevra
alors un style de données d'article peut-être. Ce texte avec la quantité peut recevoir un style que l'on peut nommer des styles. quantité, encore une fois, tous
ces identificateurs de style sont toujours à vous.
Ici sur le titre, j'ai un style
de titre, puis ici sur cette vue, je vais à nouveau ajouter un style de données d'article, donc je vais réutiliser ce style parce que je
veux avoir le même ensemble ici et ce montant ici sera obtenez également un style de montant. Donc, un tas de styles à ajouter, descendons à la feuille de
style et là-bas, ajoutez l'article du panier
qui est notre style racine, puis les données et
la quantité de l'article, donc
la quantité de
données
de l'article, puis le titre ici et le montant et le dernier mais pas au moins, le bouton Supprimer.
C'est aussi quelque chose que nous devons ajouter ici. Maintenant, sur le bouton Supprimer, c'est simple, je
vais juste
ajouter une marge à gauche de 20 pour avoir un peu d'espacement entre l'icône et le texte qui se trouve à côté et avec
cela,
passons à l'article du panier. Là, je veux avoir un
remplissage de 10, une couleur de fond de blanc, je n'utiliserai pas mon look de
carte ici, je n'ajouterai pas d'ombre ici, vous pourriez le faire mais je préfère un look
différent.
La ligne de direction flexible est importante pour que tous les éléments de cette vue, de sorte que ce
texte et cette vue soient assis côte à côte sur une seule et même ligne. Justifier le contenu doit être un espace entre afin
que tous les espaces vides entre ces deux blocs de contenu et j'ajouterai également une marge dans le sens horizontal de 20 afin
qu'il y ait un certain
espacement à gauche et à droite autour de mes articles de panier.
Maintenant, les données d'élément, c'est le style que nous répétons autour de la quantité et du titre et
du montant et le bouton Supprimer, les données d'élément doivent avoir une ligne de direction flexible pour m'assurer que les éléments qu'ils contiennent sont positionnés sur une ligne et
je définirai ici les éléments d'alignement centre pour centrer verticalement tout le contenu. Maintenant, pour la quantité ici, je veux définir une famille de polices
open-sans, en passant, nous pouvons également utiliser une vue ici au lieu d'un texte autour de ces deux nœuds de texte car je ne définis aucun style
spécifique au texte ici , prenons donc une vue à la place, mais
avec cela, revenons à la quantité. Nous pouvons donner à cette
famille de polices open-sans, une couleur de peut-être cette couleur grisâtre foncé que nous avons utilisée
auparavant pour les prix, maintenant pour la quantité et une taille de police de
16 peut-être, puis ici pour le titre, je définirai un famille de polices de open sans bold pour le rendre
gras, donnez-lui aussi une taille de police de 16 et sur le montant ici, je ferai exactement la même chose.
Par conséquent, bien sûr, nous pourrions également fusionner cela en un seul et même style, peut-être nommer ce texte principal ou quelque chose comme
ça, se
débarrasser du montant car nous avons exactement les mêmes définitions de style et maintenant utiliser le texte principal ici au lieu du
titre et ici à la place du montant.
D'accord.
Il s'agit d'un
élément du panier, utilisons-le maintenant dans
l'écran du panier à l'aide d'une
liste plate, car pour le moment nous ne produisons aucun élément sur l'écran du panier.
Donc, cette vue ici peut être remplacée par une liste
plate maintenant et les données que nous nous trouvons ici devraient être un tableau d'articles de panier et c'est exactement ce que
nous avons ici dans la
constante des articles de panier, alors utilisons-la ici.
Maintenant,
ici, j'ajouterai également un extracteur de clés et ici vous devez absolument l'ajouter pour que React Native sache
où se trouve votre clé car chaque élément ici à la fin est de ce format et cela n'a
ni clé ni ID, mais nous savons que l'ID du produit peut être utilisé comme clé, car il sera
unique pour chaque article.
Alors ici, je pointe sur le point. productId à la fin et maintenant
pour l'élément de rendu, je veux utiliser cet élément du panier que nous venons d'ajouter.
Donc, ici, nous devons importer l'article du panier à partir du dossier des composants, du dossier de la boutique et là, de l'article du panier, puis d'utiliser ce
composant de l'article du panier là-bas dans notre fonction de rendu où nous obtenons nos données d'article à la
fin et où nous retournons ensuite notre article du panier comme celui-ci et maintenant sur l'article du panier, nous devons transmettre certaines
données, non? Dans l'article du
panier, j'ai actuellement des espaces réservés factices, bien sûr ici, je m'attends à obtenir ma quantité disons sur une quantité
nommée accessoire, je m'attends à obtenir mon titre sur peut-être un titre nommé accessoire et le montant sur un montant nommé accessoire et là, je vais
appeler fixed à 2 pour m'assurer que nous avons toujours deux décimales là-bas et que nous avons également l'hélice
on remove que nous attendons à droite.
Nous avons donc obtenu la quantité, le titre, le montant et la suppression, donc de retour dans l'écran du panier,
c'est ce que nous devons ajouter, la quantité est bien sûr itemData. article. quantité car un seul article
ici est bien sûr un tel article et donc nous
aurons une quantité à conserver et en plus de la quantité, nous devons passer le titre, le
montant et supprimer.
Le titre est donc bien sûr itemData. article. produit. title, c'est le nom que j'ai
choisi ici, pour le montant que nous pouvons transmettre dans itemData. article. si nous regardons comment nous
définissons nos données, ce serait la somme, c'est le montant pour un article, peu importe la quantité que nous
avons là-dedans ou respectant la quantité que nous avons réellement.
Et puis enfin et surtout pour supprimer, nous devrions pointer sur une fonction et pour le moment, nous n'avons pas de logique pour cela, donc je vais
pointer sur une
fonction vide et c'est maintenant un élément du panier que je veux rendre il.
Essayons ceci. Ajoutons deux chemises rouges et un tapis bleu, allons dans le panier et
maintenant j'ai des chaînes de texte qui doivent être rendues dans un composant de texte et il pointe vers l'élément
du panier, ligne 14, alors regardons
ça, oui c'est ici que mon IDE a ajouté automatiquement, cet espace que je veux avoir ici
après ma quantité. Je veux en effet l'avoir
ici, donc je vais juste ajouter un espace supplémentaire ici avant de fermer mon texte. Maintenant avec ça, essayons encore, deux
chemises rouges, un tapis bleu.
Voir le montant ici,
voir le titre ici voir
la somme et cela s'ajoute bien sûr à cette somme totale.
Il est maintenant temps de faire fonctionner ce bouton de suppression.