Pour ajouter l'élément d'action à l'en-tête, je ferai quelque chose que j'ai également fait dans la section de navigation, dans
le dossier des composants, je
veux ajouter mon propre bouton d'en-tête et
maintenant pour cela, je vais ajouter un nouveau sous-dossier dans là que je nommerai UI et mon idée ici est simple.
J'ai le dossier de la boutique qui contient tous les composants que j'utilise dans ma boutique,
qui produisent des informations liées à la boutique. Dans le dossier de l'interface utilisateur, je veux
avoir des blocs de construction d'interface utilisateur généraux que j'utilise bien sûr également dans cette
application de boutique, mais qui ne sont pas vraiment axés sur la sortie de données liées à la
boutique ou au produit, mais qui sont simplement là pour fournir un style ou une disposition par défaut et c'est dans ce dossier d'interface utilisateur où
j'ajouterai mon propre bouton d'en-tête en y entrant et en important React depuis React puis en important le bouton d'en-tête depuis les boutons d'en-tête
de navigation React, ce package que j'ai installé au début du module, si vous ne l'avez pas fait , assurez-vous que npm
installe ce package, puis importez également les Ionicons depuis @ expo / vector-icons.
Maintenant, pour être sûr que vous l'avez installé, exécutez npm install --save @ expo / vector-icons, afin que ce
package soit disponible dans votre projet.
Ce sont les importations dont j'ai besoin
ici, maintenant je veux aussi importer mes couleurs depuis le dossier des constantes et là, les couleurs. fichier js et maintenant ici, je vais ajouter mon composant
de bouton d'en-tête personnalisé qui est un composant React normal à la fin qui reçoit des accessoires et doit retourner du
jsx et j'exporterai bien sûr mon bouton d'en-tête personnalisé ici à la fin et maintenant le jsx que cela a
renvoyé
ici est le bouton d'en-tête que j'importe à partir des boutons d'en-tête de navigation
de React mais je dois le configurer d'une certaine manière, utilisez le bouton d'en-tête ici à partir des
boutons d'en-tête de navigation de React. D'une part, cela devrait recevoir tous les accessoires
que nous obtenons ici, nous les transmettons donc, mais en plus, je définirai mon composant d'icônes ici
sur Ionicons, afin que nous utilisions toujours les Ionicons pour le
rendre et bien sûr, vous pouvez utiliser l'un des les différents jeux d'icônes vectorielles fournis par @ expo / vector-icons également.
Je vais définir la taille de l'icône à 23, ce qui m'a semblé très bien fonctionner, mais bien sûr, vous
pouvez également expérimenter différentes valeurs ici, peut-être
que si vous utilisez un ensemble d'icônes différent, essayez une taille d'icône différente. Et pour la couleur, ça dépend parce que sur Android,
nous avons comme
un fond rouge ici, pour iOS nous ne l'avons pas, nous devons donc définir
une couleur différente en fonction de la plate-forme sur
laquelle nous fonctionnons, donc je vais importer la plate-forme de React Native ici et ensuite nous pouvons vérifier la plate-forme ici et si la
version du système d'exploitation est
Android, je sais que j'ai ce fond de
champ solide, donc l'icône devrait être blanche. Sur iOS d'autre part, l'arrière-plan n'est pas rempli, il est
transparent et donc sur iOS, je vais réellement définir la couleur de mon icône sur Couleurs. primaire.
Maintenant, nous pouvons l'utiliser pour ajouter une icône ici sur l'écran de présentation des produits, là dans mes options de navigation
ici,
je veux ajouter ma section d'en-tête à droite, donc une icône à droite de mon en-tête et pour cela ici, nous devons
importer quelques choses, nous devons importer les boutons d'en-tête et l'élément du package de boutons d'en-tête de navigation
React que nous avons installé.
Bien sûr, je dois également importer mon propre bouton d'en-tête à partir des boutons d'en-tête de l'interface utilisateur des composants, donc ce
composant dans lequel nous venons de travailler et maintenant là-bas, l'en-tête à droite est des boutons d'en-tête comme un wrapper pour éventuellement contenir plusieurs éléments
mais je n'en ajouterai qu'un élément, un élément à fermeture automatique, sur les boutons d'en-tête avant de
continuer avec l'élément, nous devons définir le composant du bouton d'en-tête égal au bouton d'en-tête,
donc à notre propre bouton d'en-tête ici. Et l'élément peut maintenant être configuré, il devrait recevoir un titre qui peut
être
un panier, il devrait recevoir un nom d'icône et je veux réellement utiliser une icône différente en fonction
de la plate-forme sur laquelle nous fonctionnons, donc donc de React Native, je importera la plate-forme, ce qui est facultatif, vous pouvez utiliser
une seule et même icône pour les deux plates-formes, mais je pense qu'il est également intéressant d'avoir différentes icônes.
Et puis ici, je vais vérifier la plate-forme OS et si c'est Android, alors je veux utiliser l'icône du panier md qui est l'icône du panier Ionicon pour la
conception matérielle et sinon j'utiliserai l'icône du panier iOS et encore une fois vous pouvez trouver tous les disponibles les icônes de
cette liste d'icônes que je vous ai montrées
plus tôt dans le cours, la liste d'icônes expo / vector-icon et enfin et surtout lorsque l'élément est pressé, nous voulons
probablement faire quelque chose et pour l'instant, je ne fais rien mais nous je vais changer cela bientôt.
Si nous enregistrons maintenant cela,
nous
devrions voir cette icône ici,
la voici, voici notre panier, également sur Android et maintenant nous devons simplement nous assurer que lorsque nous tapons
sur cela, nous sommes redirigés vers l'écran de notre panier. Pour cela, bien sûr, nous devons ajouter une logique ou une sortie à l'écran du panier.
Donc, à l'intérieur de l'écran du panier, nous avons
bien sûr un composant React
normal, donc nous importons React de React, nous importons également quelque chose de React Native et que quelque chose est un composant de vue
pour envelopper notre écran peut-être, nous sortirons probablement du texte ainsi que.
Nous aurons quelques éléments de panier répertoriés, que nous pouvons faire avec une liste
plate pour avoir l'optimisation intégrée, je veux probablement styliser certaines choses avec une feuille de
style et j'importe également le composant de bouton intégré. Maintenant, mon écran de panier est comme toujours un composant React et je vais configurer cet
objet de styles ici avec la feuille de style. créer afin que nous puissions également styliser ce composant
et à la fin, nous exportons ici notre écran de panier par défaut.
Maintenant, vous pouvez bien sûr créer cet écran de panier de la manière que vous voulez, je vais le construire
de telle sorte que nous ayons une vue et dans cette vue, je veux avoir deux sections principales. La section supérieure est comme le résumé où je
vois le montant total et où j'ai le bouton de commande maintenant.
Ce sera dans une rangée, donc j'aurai une vue imbriquée ici où je peux placer les articles les
uns à côté des autres où j'ai comme un texte où
je dis total et puis ici signe dollar et puis mon mon prix total peut-être. Nous pouvons également imbriquer cela, vous pouvez avoir des composants de
texte imbriqués si vous vous en souvenez sans problème pour lui donner une couleur distincte par exemple, donc pour l'instant,
je code en dur 19. 99 là-dedans mais plus tard, cela sera dérivé dynamiquement.
C'est donc une
chose et en plus dans cette même ligne ici, je veux avoir un bouton avec un titre de commande
maintenant où je peux appuyer dessus pour passer une commande, vider mon panier et l'ajouter à mes
commandes que nous n'avons pas encore
gérées et le sortir sur l'écran de commande à la fin. Maintenant, en dessous de cette section récapitulative, je veux avoir une liste plate avec mes articles de panier séparés, afin que
nous puissions vraiment voir ce qu'il y
a dans le panier, quels produits s'y trouvent, quelle quantité de chaque produit s'y trouve,
c'est donc une autre chose que je y sortira. Pour le moment ici, je vais simplement ajouter
une vue avec un texte des articles du panier en tant qu'espace réservé mais encore une fois, ce
sera une liste plate à l'avenir, mais commençons par le total ici. Pour obtenir ce total, nous pouvons puiser
dans Redux parce que nous gérons notre panier, nous pouvons donc utiliser le sélecteur de React Redux comme vous l'avez appris
pour extraire des données de notre magasin et ici, j'ai le montant total de mon panier peut-être
que j'obtiens avec l'aide du sélecteur d'utilisation de mon état. chariot, tranche. panier ici parce que
dans l'application. Fichier js en réducteurs combinés, j'ai affecté ici une clé de panier à mon réducteur de panier.
Alors je l'ai ici. panier puis là, à l'intérieur du
réducteur de panier, je gère mon montant total et le champ montant total, c'est donc ce à quoi nous devons accéder ici, montant total.
Cela donne le montant total du panier et nous pouvons maintenant l'utiliser là-bas et avec cela pour nous
assurer que cela a aussi l'air bien, il est temps pour un certain style.
Donc, sur la vue la plus haute ici, je vais ajouter un style d'écran peut-être parce que cela
enveloppe tout l'écran
à la fin, puis ici sur cette vue, je vais ajouter un style de résumé parce qu'il
contient tous les éléments de résumé, puis ici
sur ce texte, je vais ajouter un style de texte récapitulatif puis ici, je vais ajouter un style de montant, afin que nous puissions styliser ce texte de montant différemment.
Donc, pour les
styles que je veux définir, descendons à la feuille de style et ajoutons écran, résumé, texte récapitulatif et puis, comment l'ai-je nommé?
montant et bien sûr, c'est comme toujours totalement à vous de décider comment vous voulez maintenant styliser cela.
Maintenant, je vais commencer avec l'écran, à la fin je veux prendre la taille complète de l'écran si nous avons besoin
de la liste plate plus tard, mais je vais commencer simplement et nous dirons simplement que je veux avoir une marge en tout directions en fait ici
de 20, donc autour de tout, de sorte qu'il y ait un espace autour de tout. Ensuite, ici, résumé qui est notre boîte avec tous les articles
là-dedans avec la commande maintenant et notre texte devrait utiliser une direction flexible de
ligne pour positionner les articles sur une ligne.
Je suis allé aligner les éléments au centre pour m'assurer qu'ils sont centrés verticalement et sur leur
axe principal, je veux utiliser justifier l'espace de contenu entre afin que les éléments aient l'espace libre entre eux et les éléments
sont ce texte ici et ce bouton. En plus de cela, nous pouvons ajouter un peu de
marge ici, peut-être
aussi de 20, ce qui est surtout important également pour avoir un certain espacement entre le résumé et notre liste
plate, donc j'utiliserai en fait la marge en bas ici pour n'avoir qu'une marge au en bas et je veux ajouter un rembourrage de
10 ici parce que le résumé doit être en quelque sorte dans une boîte surélevée et
pour cette boîte ici, je vais aller à mon composant d'article de produit et je vais copier mon ombre créée ici et la bordure rayon peut-être que j'ai ici et la couleur
d'arrière-plan, de sorte que j'ai le même aspect ici dans le panier et c'est bien sûr à vous de décider
si vous le souhaitez ou non, mais je vais le copier là-dedans.
Pour le texte récapitulatif, je veux maintenant utiliser une famille de polices open sans bold pour vraiment mettre en évidence ce total et une taille
de police de 18 et pour la quantité de texte là-dedans, je définirai
la couleur en couleurs. couleur d'accent.
Maintenant, pour cela, bien sûr, vous devez importer des couleurs à partir du dossier des constantes, puis j'utilise l'accent et
non le principal pour que cela se démarque vraiment. Pour voir si cela ressemble à ce que nous voulons, nous
devons nous assurer que le fait d'appuyer sur ce bouton d'en-tête dans notre écran de présentation du produit
nous amène réellement à l'écran du panier et pour cela, deux choses sont requises.
D'une part, nous devons naviguer ici, mais avant de pouvoir le faire,
nous devons enregistrer l'écran du panier dans notre navigateur. Donc, je vais le faire d'abord, j'importerai mon écran de panier ici à
partir du dossier screens sans surprise, du dossier de la boutique et là de l'écran du panier et maintenant c'est le troisième écran
que j'ajoute ici à ce navigateur de pile, le panier pointe vers l'écran du panier . Avec cette configuration ajoutée ici, nous pouvons revenir à l'écran de présentation
du produit et là, nous avons maintenant besoin de ce formulaire fonctionnel pour les options de navigation, car les données de
navigation nous permettent ensuite de puiser dans l'accessoire de navigation et d'appeler la
navigation, nous devons donc envelopper dans un autre objet que
nous renvoyons et ici nous pouvons appeler navData. la navigation. naviguer et là, je vais au panier et c'est
bien sûr l'identifiant que je viens de choisir dans le navigateur de
la boutique ici, celui-ci. Avec cela, voyons, si je
clique ici, nous y voilà, c'est mon total,
je
pense en fait que
la couleur d'accent n'est pas si bonne là-bas, donc je vais
en fait revenir à l'écran du panier et le styliser pour utiliser le la couleur primaire aussi, mais l'essentiel est
que nous puissions y aller et si j'essaie maintenant d'ajouter des articles au panier, j'ai ajouté la chemise deux fois
et le tapis une fois, ce montant total me semble bien. Essayons également ceci sur Android bien sûr pour nous assurer que
cela fonctionne aussi bien et fonctionne généralement, j'ajoute une chemise rouge de plus et donc ici nous voyons également
un problème avec la façon dont cela est affiché. Pour résoudre ce problème, sur l'écran du panier, assurez-vous que sur
le prix, nous sortons toujours deux décimales sur le montant à fixe également. Au fait, au cas où vous vous demandez d'où
cela vient, ce long numéro, ce
n'est pas un bug ou rien de vraiment pour React Native, c'est un comportement Javascript
normal lorsque vous travaillez avec des nombres à virgule flottante et bien sûr pour corriger ne doit pas être appelé sur le
style ici mais sur le montant total du panier. Donc, c'était un comportement normal, pas un
bug, c'est ainsi que Javascript stocke en interne les nombres à virgule flottante que vous pourriez dire,
mais maintenant nous nous assurons que cela est sorti correctement avec deux décimales. Ce qui manque, c'est le bouton et ici, je veux maintenant utiliser la couleur, les couleurs
d'accent pour avoir mon bouton de couleur d'accent. Donc, si je vais maintenant dans mon panier ici sur iOS, voici à quoi
ressemble le bouton là-bas, voici à quoi il ressemble sur Android.
Nous pouvons toujours appuyer sur ceci, bien sûr, je veux le désactiver, mais s'il n'y a rien dans le
panier et pour cela, nous devons maintenant obtenir nos articles dans le panier également. Ainsi, les articles du chariot peuvent également être récupérés avec le sélecteur d'utilisation,
également à partir de la tranche du panier, mais là, ce sont les accessoires de la réduction du chariot qui nous intéressent.
Donc, si je regarde le réducteur de chariot, vous voyez que nous avons la propriété des articles.
C'est un objet que je récupère
maintenant, donc les articles du panier sont un objet, pas un tableau, en fait un tableau serait mieux pour moi ici et donc j'utiliserai le
long formulaire pour l'obtenir et je retournerai un tableau ici et non un objet. Ainsi, nous pouvons obtenir nos articles de panier transformés
ici, par exemple en créant un nouveau tableau ici à l'intérieur de cette fonction de sélection, puis nous pouvons ajouter une boucle for / in pour
parcourir toutes les clés en état. Chariot. articles, donc pour parcourir toutes
les paires clé-valeur dans cet objet articles
du panier que nous avons là-dedans et je veux ajouter
chacun d'eux en tant qu'article aux articles du panier transformés. Donc là, je vais pousser un objet Javascript qui a un ID de produit, disons
qui est juste ma clé parce que dans l'objet articles du panier d'ID, l'ID de produit est stocké sous forme de clé
si vous vous
en souvenez, alors maintenant j'ajoute cela à la propriété d'ID de produit dans cet objet, j'ajoute au tableau des articles du panier transformé et
en plus de cela, j'aurai le titre de mon produit qui est bien sûr l'état. Chariot. éléments pour la clé
donnée. productTitle.
Si vous regardez le modèle de votre panier, vous verrez que là, le titre du produit et le prix du produit sont les noms de
propriété qui détiennent le titre du produit et le prix du produit, alors
c'est comme ça que nous accédons aux
deux, donc je ferai de même ici pour le prix du produit et par la suite, j'ai aussi besoin de la
quantité qui est en état. Chariot. éléments pour la clé donnée. quantité et bien sûr aussi la somme qui est état. Chariot. articles. clé. somme, encore une fois essentiellement ce que nous avions ici dans l'article du panier.
Donc, ce que je fais, c'est de dire
que je crée un nouvel article de panier, pas avec mon modèle, car c'est un article
de panier avec une propriété d'ID de produit supplémentaire, de sorte que je l'ai ici et maintenant c'est ce tableau d'éléments de panier transformé que je
renvoie après cela pour la boucle, de sorte que ce sélecteur retourne à la fin un tableau et non un objet, donc les
éléments du panier sont
maintenant un tableau qui nous permet de l'utiliser plus facilement dans la liste plate et cela nous permet également de vérifier ici sur
le bouton commander maintenant si nous voulons le désactiver en vérifiant simplement la longueur de ce tableau que nous avons
maintenant dans les articles du panier.
Donc, ici sur le bouton, nous
pouvons définir l'hélice de désactivation qu'il prend en charge heureusement, c'est un composant intégré qui a simplement un accessoire désactivé et là je peux
vérifier si la longueur des articles du panier est égale à zéro, si c'est le cas, alors je sais qu'il est vide et alors je veux désactiver le bouton. Si désactivé reçoit vrai ou faux, par défaut c'est faux mais je vais le mettre à vrai si la longueur
des articles du panier est 0. Et maintenant, vous voyez si je vais
à l'écran du panier, cela est désactivé, si j'ajoute un
produit et que j'y vais, il est activé et bien sûr, vous pouvez également utiliser une couleur différente pour le bouton de commande maintenant si vous le souhaitez.
Maintenant, avec cela, nous sommes un peu plus près
des chariots finis et bien sûr, le prochain objectif est de sortir les articles du panier.