Sur l'écran de détail du produit, nous avons déjà commencé à travailler sur cela, mais nous ne
produisons vraiment rien d'utile là, maintenant il est
temps de changer cela.
Pour cela, je remplacerai le code jsx que nous utilisons actuellement par une vue de défilement car comme je l'ai
mentionné plus tôt, nous afficherons notre image
là-bas, notre description du produit et cela pourrait être une très longue
description ou nous sommes simplement la visualisation sur
un appareil plus petit ou en mode paysage,
nous voulons donc certainement y avoir du contenu défilable et en passant nous n'avons
pas besoin d'une liste plate ici parce que le contenu ne
sera pas infiniment long, nous savons à peu près qu'il ne le sera pas être aussi longtemps à l'avance,
donc la vue de défilement est parfaitement fine et dans cette vue de défilement, vous pouvez maintenant ajouter un composant d'image qui produit cette image de produit
en haut disons et en dessous, nous pouvons alors peut-être ajouter notre bouton pour nous permettre de ajoutez ceci à un panier et en dessous, nous pouvons avoir notre texte, comme afficher le prix et peut-être le texte
de la description. Donc, pour l'image, nous
devons configurer l'accessoire source et c'est un objet qui a une propriété URI et bien sûr, nous avons
notre produit sélectionné ici, donc la source est juste selectedProduct. imageUrl car le produit sélectionné est du
type que nous avons défini dans notre modèle de produits. Sur le bouton ici, nous pouvons ajouter un titre
d'ajout au panier car c'est à la fin ce que ce bouton devrait faire et onPress ne fait rien
pour l'instant mais plus tard, nous ajouterons cela au panier. Ensuite, ici, je veux afficher le prix, nous n'avons
pas besoin de
publier le titre car cela fait déjà partie de
l'en-tête, donc nous voyons le titre là-bas, mais ici, je veux afficher le prix en dollars en
faisant référence au produit sélectionné. prix fixe 2 que j'ai
fait avant et puis là-bas aussi
la description, nous avons donc ici sélectionné Produit. description, comme ça.
D'accord,
donc ça a l'air bien,
maintenant il est temps pour un style bien sûr.
Par exemple, pour l'image, nous devrons certainement définir une largeur et une hauteur car c'est une image
réseau, alors ici, je vais ajouter le style d'image que je dois ajouter à ma feuille de style.
Maintenant, pour les textes ici, ce texte devrait avoir un style de prix
peut-être que nous devons ajouter et ensuite ici, ce texte devrait avoir un style de description peut-être, sonne comme un nom approprié.
Maintenant, dans la feuille de style, nous devons ajouter toutes ces choses, alors commençons pour l'image.
Là, j'ajouterai une largeur de 100%, cela devrait vraiment
prendre toute la largeur disponible et une hauteur de 300 peut-être et bien sûr
vous pouvez jouer avec cela,
vous pouvez également utiliser une valeur en pourcentage pour cela ou utiliser l'API de dimensions pour sorte de calculer cela dynamiquement.
Par la suite, je veux avoir mon prix, ce texte de prix
devrait avoir une taille de police de 20 car les gens devraient bien sûr pouvoir le voir, une couleur de ce
grisâtre, cette couleur grisâtre foncé que j'ai déjà utilisée plus tôt et un alignement du texte au centre de
sorte qu'il soit toujours
centré, également une marge sur l'axe vertical de 20 peut-être, donc autour de lui, de 20 puis par la suite, la description.
La description peut en fait avoir une taille de police de disons 14, voyons si cela fonctionne et là-dedans, utilisez également
le centre d'alignement du texte, quelque chose comme ça. Si nous gardons cela, jetons un œil
à cela, ça n'a pas l'air trop mal. Maintenant, pour le bouton, je veux définir une couleur différente, je vais donc ajouter de la couleur ici
et la définir sur des couleurs que nous devons bien sûr importer à partir de notre dossier de constantes, Couleurs. primaire et maintenant si nous enregistrons
cela, cela semble assez agréable. Sur Android, vous voyez que le bouton se trouve directement sous l'image
et que c'est un bouton pleine largeur.
C'est la même chose ici pour iOS, là,
nous ne le voyons
tout simplement pas, mais si je tape ici, vous voyez également que ce bouton est pressé et que ce n'est pas ce que je veux ici.
Donc,
ce que je vais faire, c'est que j'envelopperai ce bouton dans une vue que je donnerai un style d'actions disons, même s'il ne s'agit que
d'une seule action ici, vous pouvez peut-être avoir plusieurs boutons ici pour différentes choses.
Je vais donc ajouter ma clé d'actions ici à la feuille de style
et là, nous pouvons définir une marge sur l'axe vertical de 10 en haut et en bas et aligner vos éléments au
centre qui, parce
que la direction par défaut du flex est la colonne, les centres horizontalement et maintenant nous avons plus d'espacement ici et
nous le voyons encore mieux sur Android, plus
d'espacement et le bouton ne s'étire plus maintenant comme il le serait, son réglage d'alignement par défaut mais ne
prend plus que la largeur dont il a besoin et est aligné dans le centre.
C'est donc la
configuration
avec laquelle je vais aller, bien sûr, vous pouvez toujours l'ajuster de différentes manières
si vous le souhaitez, pour
moi, cela ne semble pas trop mal, voyons également comme un élément différent, peut-être aussi celui-ci,
oui , c'est tout à fait joli.
Maintenant, pour un texte plus long ici, vous voyez que ce n'est pas si beau, il devrait y avoir plus d'espacement.
Donc en fait sur la description, j'ajouterai également une petite marge horizontale de disons 20 afin que nous ayons un espacement autour de cela,
de sorte que si nous avons un autre regard sur cela, vous voyez maintenant cela saute automatiquement dans une nouvelle ligne
qu'il devrait .
D'accord,
cela semble bon,
maintenant nous avons l'écran de détail du produit.
Avant de continuer, je veux apporter mes propres polices et les utiliser car je ne suis pas satisfait des polices par
défaut.