Veillons donc à ce que nos articles sur l'écran de présentation des produits soient un peu plus
beaux qu'ils ne le sont actuellement. En ce moment, bien sûr, chaque élément de produit est simplement
rendu sous forme de texte, en tant que composant de texte et ce n'est pas ce que je veux ici, à la place, je supprimerai cette importation et
je créerai un tout nouveau composant qui devrait être responsable de mon élément de produit.
Maintenant, une note importante concernant l'endroit où nous créons ce composant, nous pouvons le créer ici
dans l'aperçu des produits. le fichier js également, nous pouvons bien
sûr avoir plus d'un composant par fichier, donc ici je pourrais ajouter mon composant d'article de produit ou comme vous voulez l'appeler, comme
ça, alors nous pouvons utiliser ce composant dans ce fichier qui est bien sûr ce que je compte faire.
C'est un modèle que vous pouvez utiliser si vous avez un composant qui est vraiment fortement lié à un autre composant
et que vous le divisez uniquement pour que chaque composant soit un peu plus lisible.
Une fois que ces composants séparés deviennent très gros, vous devriez toujours envisager de les diviser en fichiers distincts, de sorte
que vos fichiers restent petits et si les gens veulent jeter un œil à l'un des deux composants,
ils n'ont pas à faire défiler l'autre composant ils pourraient ne pas être intéressés.
C'est donc une chose à garder à l'esprit. Bien sûr, si vous prévoyez également d'utiliser un composant
dans un autre composant, vous devez toujours le stocker dans un fichier séparé, non seulement pour pouvoir l'exporter par défaut, car vous pouvez
également l'exporter s'il est stocké avec un autre composant, ce n'est pas la
raison principale, mais surtout pour qu'il soit vraiment clair qu'il s'agit d'un composant autonome qui pourrait et sera utilisé dans
différentes parties de votre application.
Maintenant, l'article de produit ici ne sera pas seulement super petit, ce qui en soi serait une raison de le placer dans
un fichier séparé, mais je l'utiliserai également dans un composant différent plus tard ou à différents endroits de
l'application, ce n'est pas seulement pertinent à l'écran de présentation des produits et donc, je vais l'ajouter dans le dossier
des composants et dans ce dossier des composants, pour organiser un peu mes composants, je vais ajouter un sous-dossier
de la boutique où je veux placer tous les composants qui sont directement lié à la fonction boutique ou
aux fonctionnalités en général de mon application.
Donc, dans le sous-dossier de la boutique, j'ajouterai ce ProductItem. fichier js et vous verrez quels autres dossiers je
vais ajouter ici plus tard.
Encore une fois, tous ces modèles et pratiques que je vous montre ici ne sont que des moyens possibles de le faire, en
général dans mes cours et dans ce cours aussi, je montre toutes les meilleures pratiques que vous pouvez utiliser mais souvent en programmation,
il n'y a pas juste une seule bonne ou
mauvaise façon, donc les pratiques et les modèles que je montre ici sont des pratiques et des modèles que vous verrez
également dans d'autres projets, mais vous pouvez également voir d'autres structures de dossiers, à la fin, vous pouvez toujours travailler
avec la structure qui fonctionne pour vous, il n'y a pas de bon ou de mauvais choix ici, je veux juste expliquer mon raisonnement pour utiliser
cette structure qui, espérons-le, vous aidera à comprendre pourquoi je l'utilise et pourquoi cela pourrait valoir la peine d'être pensé.
Voici donc le fichier d'article du produit, le ProductItem. Le fichier js contiendra bien sûr le composant d'article de produit qui est un composant fonctionnel normal
qui reçoit des accessoires et à la fin retournera du code jsx et donc comme il contient du code
jsx, nous devons importer React de React et ici, je vais aussi importer des choses depuis React Native car ici je vais maintenant travailler
avec ces primitives React Native pour vraiment construire mon composant car à partir de là, j'aurai besoin de la vue, j'aurai besoin du texte, je veux
aussi utiliser l'image parce que nous ' Je vais afficher l'image du produit ici et aussi
la feuille de style parce que nous allons certainement aussi le styliser. Par conséquent, vous pouvez également ajouter une constante de styles ici
que nous créons avec la feuille de style. créer à laquelle nous passons un objet Javascript
et à la fin, nous exportons cet article ici par défaut bien sûr. Maintenant ici, dans ce composant, je veux dire, nous pouvons commencer
à créer le code jsx qui constitue l'élément de produit et ce sera un composant de présentation, ce
qui signifie qu'il n'y aura pas de logique ici, nous ne gérerons aucun état interne, ce sera
juste un composant que nous pouvons utiliser dans d'autres composants pour obtenir le bon style et la
bonne disposition hors de la boîte, donc ce composant ici sera responsable d'utiliser certains composants React Native et de
les disposer et de les styliser d'une certaine manière. Donc ici, je veux finalement rendre une vue
qui enveloppe tout, qui organise tout, que nous pouvons également styliser pour obtenir ce look
de chariot avec peut-être une ombre portée, peut-être des coins arrondis, tout ce que vous voulez et là-bas, nous avons
maintenant avoir différentes parties, par exemple, nous aurons certainement l'image là-dedans, l'image du produit, je veux aussi avoir le titre et
le prix, donc nous aurons besoin de
texte ici, donc pour le titre ici et ici, alors le pour le prix en dollars et en dessous, je veux aussi avoir une vue avec des
boutons, donc ici nous pouvons utiliser
le composant bouton intégré pour le moment, où nous pouvons ensuite ajouter un produit au panier ou
également voir les détails , donc là où nous avons ces deux options essentiellement et bien sûr, nous devons
ajouter des gestionnaires onPress ici. C'est donc le squelette très basique, probablement pas
le dernier, nous devrons voir comment nous pouvons tout styliser ici, mais c'est la
disposition que je veux.
Soit dit en passant, j'enveloppe mes boutons ici parce que je veux les avoir côte à côte dans la rangée
et en ayant une vue autour d'eux, nous pouvons styliser cette vue de telle sorte qu'elle utilise la ligne de direction flexible et
ainsi de suite.
C'est donc
une configuration avec laquelle nous
pouvons travailler ici, ajoutons maintenant un
style et pour cela je veux utiliser ou commencer ici
sur la vue environnante où je configure des styles de produit comme celui-ci, donc ici dans
la feuille de style, j'ajoute un produit comme ça, ajoutez
ma clé de produit ici et bien sûr
maintenant encore, c'est à vous de décider comment vous voulez styler cela, je veux avoir ce look de carte, donc je vais donc ajouter une ombre, une
couleur d'ombre qui peut être noire, une opacité d'ombre qui peut être 0. 26, un décalage d'ombre où j'ai le décalage de largeur de zéro et un
décalage de hauteur de deux et un rayon d'ombre de huit peut-être
et comme toujours jouer avec ces valeurs pour trouver votre configuration.
Maintenant, vous vous souvenez peut-être que l'ombre ne fonctionne
que sur iOS, donc pour Android, j'ajouterai la propriété d'élévation ici et la définirai peut-être à cinq, encore une fois, vous pouvez
expérimenter avec différentes valeurs là-bas et je veux
avoir un rayon de bordure de 10 car Je veux des coins arrondis et encore,
c'est quelque chose que je
veux ici, quelque chose que vous n'avez pas à faire. J'ajouterai également une couleur d'arrière-plan blanche pour nous assurer que
notre panier ici, notre produit a toujours cette couleur d'arrière-plan même si notre application principale
devrait utiliser une couleur d'arrière-plan différente plus tard. Voilà donc mon produit, mon emballage ici autour de l'ensemble du produit. Je veux également définir ma hauteur ici, chaque
produit doit avoir une hauteur de 300
pixels et bien sûr, c'est une valeur que vous pouvez également modifier selon
vos besoins.
Vous pouvez bien sûr également rendre cette dynamique avec l'API dimensions comme vous l'avez appris
dans le module réactif et j'ajouterai une marge de 20 dans toutes les directions autour de chaque article de produit,
afin que nous ayons un espacement dans toutes les directions. Avec cette configuration, nous pouvons commencer à travailler sur la sortie de quelque
chose, donc l'image a besoin d'une source et nous aurons une image réseau ici parce que si vous regardez
les données factices, toutes ces URL d'image ici sont des URL, c'est aussi ce que nous avoir dans le modèle, nous
nous attendons à une
URL ici, donc à une image réseau et ce serait la valeur par défaut pour toute boutique que vous construisez
car vous n'incluerez jamais toutes les images de produits dans votre application, du moins si ce n'est pas certaines dans boutique d'applications pour un jeu, mais s'il
s'agit d'une boutique où les gens peuvent créer des
produits, il est évident que les gens créeront des produits dynamiquement après la distribution de votre application, il
vous est donc impossible d'inclure toutes les images dans votre application, au lieu de cela, elles doivent être stockées sur un serveur .
Donc donc ici, nous devons passer un objet à la source où nous définissons la propriété URI
et qui sera maintenant reçu de l'extérieur parce que ce composant d'article de produit est de présentation,
donc toutes les données à afficher doivent être transmises via des accessoires et là, nous pourrait s'attendre à l'accessoire
d'image, mais comme pour tous les accessoires de
vos propres composants, vous pouvez choisir les noms que vous voulez. Pour le titre, je m'attends à obtenir un accessoire de titre et pour le prix, je
m'attends à obtenir un accessoire de prix, je garderai le signe dollar ici en passant parce que le prix ne sera qu'un nombre et
bien sûr je veux avoir un signe dollar devant cela.
Maintenant, une petite note ici, je veux m'assurer que le prix que j'obtiens a toujours exactement deux décimales et nous pouvons y parvenir
en appelant à fixed sur ceci et en passant par deux. Fixer est une fonction disponible sur les
nombres en Javascript, qui la convertit essentiellement en une chaîne avec un nombre fixe de
décimales et ici je restreins cela à
toujours deux
décimales, c'est du Javascript normal, rien de spécifique à React Native. Maintenant, lorsque nous appuyons sur le bouton Afficher les détails, je déclencherai des accessoires sur les détails
de la vue, donc j'utilise à nouveau ici un nom que vous pouvez configurer ou nommer comme vous le souhaitez, mais l'idée ici est
que les accessoires sur les détails de la vue pointent sur une fonction qui, dans la
fin est exécutée lorsque ce bouton est enfoncé et donc ici, si
ce bouton, le bouton du panier est enfoncé, je pointerai vers une fonction que je m'attends à obtenir sur le module add to cart prop.
Encore
une fois, vous pouvez nommer ces accessoires comme vous le souhaitez, mais lorsque vous utilisez
votre composant, vous devez vous assurer qu'ils sont disponibles et qu'ils obtiennent des valeurs qui sont des fonctions qui sont ensuite déclenchées via ces boutons.
Maintenant, nous obtenons toutes les données. Maintenant, pour l'image, puisqu'il s'agit d'une
image réseau, nous devons configurer la largeur et la hauteur car l'image ne peut pas voir cela à l'avance car elle pourrait le
faire pour une image locale, elle ne peut pas le
faire pour un réseau image, ici je vais pointer sur les styles. image et je vais ajouter cette clé d'image à ma feuille de style là pour l'instant.
Encore une fois, c'est généralement à vous de décider comment vous le stylisez, mais je vais le définir pour
avoir une
largeur de disons 60%, gardez à l'esprit que le produit global a une largeur de 100% mais une hauteur de 60% parce que le produit global
l'élément ici a une hauteur de 300 et je veux avoir l'image là-dedans, qui devrait également occuper la majorité de
la hauteur, mais j'ai également le titre et le prix et mes boutons et ceux-ci devraient également y
tenir, donc je ' ll
donnera à l'image 60% de la hauteur
pour que les autres choses ici puissent diviser les 40% restants entre eux. Donc avec ça, c'est l'image, maintenant bien sûr l'image n'est pas
tout ce que nous avons ici, nous avons aussi notre titre, nous avons notre prix
et je veux le styliser aussi.
Donc, pour le titre, je vais ajouter le style de titre ici et pour le prix, je vais ajouter disons un
style de prix et ici pour ces boutons, je vais également ajouter un style à la vue environnante et je vais nommer ceci actions et
bien sûr, tous ces noms de style, comme toujours, sont totalement à vous. Ici, je veux ajouter mon
titre et le prix et la propriété actions à ma feuille de style ici et maintenant pour le titre, vous pouvez
bien sûr le styliser comme vous le souhaitez.
Nous n'avons pas de polices personnalisées
ici, j'en ajouterai bientôt mais pour le moment, je vais simplement l'ignorer
et commencer avec une taille de police de 18 et je veux ajouter une marge verticale, donc en haut et en
bas de 3 ou 4, donc une très petite marge mais encore une marge autour de ce titre. Pour le prix, je vais définir une taille de police de
14 donc un peu plus petite et je vais également lui donner une couleur qui devrait être peut-être 888
qui est comme une couleur grisâtre grisâtre foncé.
Maintenant, les actions sont placées sur cette vue qui contient les boutons et, par conséquent, je veux m'assurer que le
bouton est assis côte à côte, donc dans une rangée.
Je vais donc donner ici une direction flexible de la ligne ici et je justifierai également le contenu pour avoir tout l'espace restant entre eux
et en plus, je veux aligner les éléments au centre verticalement, donc le long de l'axe transversal qui, pour
une direction flexible de ligne est l'axe vertical.
Avec cela, nous avons un style de
base, utilisons maintenant ce composant avant d'affiner la configuration et le style. Ainsi, le composant d'article de produit que nous exportons
ici dans le fichier d'article de produit peut maintenant être utilisé dans le fichier de présentation
du produit en important l'article de produit
à partir de là, nous allons donc pointer vers notre dossier de composants, là dans le sous-dossier de la boutique, puis
l'article de produit et maintenant c'est ce que je veux utiliser ici quand je rend mes objets.
L'élément de produit peut être un composant à fermeture automatique, car toutes les données sont reçues via des accessoires et non
entre les balises d'ouverture et de fermeture, nous devons
maintenant bien sûr configurer toutes les choses que nous attendons ici.
Nous attendons une image, le titre, le prix et nos deux accessoires de gestion d'événements ici, c'est donc
ce que nous devons fournir maintenant.
Par conséquent, ici, sur l'article de produit,
je vais commencer avec l'image et bien sûr, c'est itemData. article. imageUrl et vous
devez toujours vous souvenir de cet itemData. l'élément pointe comme un produit tel que défini dans notre modèle de produit
et il aura donc une propriété imageUrl écrite comme ceci, si vous
l'avez écrit différemment, vous devez bien sûr y accéder différemment. Outre l'image, nous aurons également un
titre qui est itemData. article. titre et en plus de cela, nous aurons le prix
avec itemData. article. prix,
puis nous avons nos deux gestionnaires d'événements ici parce que nous avons l'hélice de détail en vue et
l'hélice d'ajout au panier que nous devons ajouter. Donc, sur les détails, la vue fera quelque chose plus tard, pour
l'instant ce n'est qu'une fonction vide et sur ajouter au panier fera aussi
quelque chose plus tard, pour l'instant ça peut
aussi être une fonction vide, c'est ainsi que notre produit devrait être rendu. Avec ça si on enregistre ça, c'est ce
qu'il faut voir, ce n'est pas encore parfait mais
on y arrive, ce n'est pas trop mal en fait.
Maintenant, bien sûr, ce que vous remarquez, c'est que les boutons sont colorés de manière incorrecte, que cet espace
n'est pas vraiment utilisé de la façon dont il devrait être utilisé là-bas, que nous voulons peut-être
aussi centrer ce texte, mais ce sont bien sûr des choses nous pouvons travailler. Donc, pour affiner cela, de retour dans le composant article du produit
ici, commençons par nos deux textes ici.
Ils doivent bien sûr être centrés et cela peut être fait de manière très simple en enveloppant cela avec une
vue, en y déplaçant ces deux textes, en donnant à cette vue un style et bien sûr vous pouvez
nommer cela comme vous
voulez, je vais nommer il détaille parce que nous mettons en forme les détails
du produit là-bas, donc j'ajouterai mon style de détails ici à la feuille de style et là, je vais simplement définir l'alignement des éléments au centre.
Cela utilise une direction de flexion de la colonne, la valeur par défaut et donc centrée sur l'axe transversal, il le fait toujours,
mais l'axe transversal pour la colonne de direction flexible est bien sûr
de gauche à droite, donc il se centre horizontalement, ce que je veux ici et moi '' Je lui donnerai également une hauteur de 15%.
Gardez à l'esprit que l'image prend 60%, donc nous donnons cela peut-être
15%, donc presque la moitié des 40% restants, pas tout à fait la
moitié Et j'ajouterai ici un peu de rembourrage de 10 peut-être.
Et pour les boutons ici, ceux-ci sont dans ma propriété actions, là je veux régler la
hauteur sur les 25% restants, cela devrait être une chaîne
bien sûr parce que nous avons 60% ici hauteur, puis nous
avons 15% ici, donc
ici Je veux garder les 25% restants et si nous enregistrons maintenant cela, cela semble beaucoup mieux.
Maintenant, un remplissage à gauche et à droite serait également bien
pour les boutons, donc sur cette propriété de style actions, j'ajouterai peut-être un remplissage horizontal de 20, afin que nous ayons un espacement interne
à gauche ou à droite. Maintenant, pour changer la couleur
des boutons, nous pouvons simplement aller aux composants de bouton qui sont intégrés
dans React Native et
définir le prop de couleur ici aux couleurs que vous devez donc importer du dossier
constantes et
du fichier de couleurs là-bas et définir ceci puis aux couleurs primaires, ici aussi pour la deuxième couleur, le bouton ajouter au panier, le deuxième bouton donc.
Alors maintenant, nous avons nos
boutons ici, ajouter au panier et voir les détails et cela ne semble pas trop mal.
La seule chose que vous remarquerez peut-être est que nous n'avons pas de coins arrondis
ici en haut et la raison en est que notre image est essentiellement comme une superposition à notre arrière-plan et l'arrière-plan
est la vue
environnante, l'image n'a pas coins arrondis et donc il chevauche nos coins arrondis que
nous avons sur la vue environnante. Pour résoudre ce problème, nous pouvons
envelopper l'image dans une vue distincte et comme je l'ai mentionné plus
tôt dans le cours, il est vraiment normal dans React Native d'avoir quelques vues
imbriquées car à cette vue, nous pouvons maintenant attacher un style que nous pouvons peut-être donner un identifiant de conteneur d'image que nous pouvons maintenant ajouter à
notre feuille de style et maintenant je vais donner à ce conteneur d'image ma largeur et ma hauteur ici et sur
l'image, je vais donc simplement ajouter une largeur et une hauteur de 100%
parce qu'il
est maintenant à l'intérieur de
le conteneur, cela fait
ici référence au parent, donc à ce conteneur, donc une hauteur
de 60% sera alors également appliquée à l'image mais sur
ce conteneur d'image, nous pouvons maintenant ajouter une bordure en haut à gauche rayon de 10 et
une bordure en haut rayon droit
de 10 afin que nous arrondissions ces coins et maintenant important, ajoutez un débordement caché ici car cela garantira que tout enfant
là-bas qui est notre image ne peut pas chevaucher ce que nous avons mis en place ici.
Alors maintenant, avec cette configuration, nous ajoutons nos coins arrondis ici en haut et maintenant
ce sont les éléments d'image que je veux ici et bien sûr, c'est aussi une liste déroulante
où vous voyez également que ces images sont chargées paresseusement automatiquement que vous pouvez continuer à travailler avec.
Bien sûr, le prochain objectif pourrait être que nous puissions également afficher l'écran de détail.