1
00:00:02,180 --> 00:00:07,440
Sur l'écran de détail du produit, nous avons déjà commencé à travailler sur cela, mais nous ne

2
00:00:07,850 --> 00:00:10,240
produisons vraiment rien d'utile là, maintenant il est

3
00:00:10,250 --> 00:00:11,600
temps de changer cela.

4
00:00:11,690 --> 00:00:17,570
Pour cela, je remplacerai le code jsx que nous utilisons actuellement par une vue de défilement car comme je l'ai

5
00:00:17,570 --> 00:00:19,790
mentionné plus tôt, nous afficherons notre image

6
00:00:19,790 --> 00:00:23,510
là-bas, notre description du produit et cela pourrait être une très longue

7
00:00:23,510 --> 00:00:25,790
description ou nous sommes simplement la visualisation sur

8
00:00:25,850 --> 00:00:28,410
un appareil plus petit ou en mode paysage,

9
00:00:28,640 --> 00:00:33,020
nous voulons donc certainement y avoir du contenu défilable et en passant nous n'avons

10
00:00:33,100 --> 00:00:36,420
pas besoin d'une liste plate ici parce que le contenu ne

11
00:00:36,440 --> 00:00:42,020
sera pas infiniment long, nous savons à peu près qu'il ne le sera pas être aussi longtemps à l'avance,

12
00:00:42,020 --> 00:00:50,210
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

13
00:00:50,220 --> 00:01:01,560
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

14
00:01:01,560 --> 00:01:04,260
de la description. Donc, pour l'image, nous

15
00:01:04,270 --> 00:01:08,980
devons configurer l'accessoire source et c'est un objet qui a une propriété URI et bien sûr, nous avons

16
00:01:09,330 --> 00:01:14,530
notre produit sélectionné ici, donc la source est juste selectedProduct. imageUrl car le produit sélectionné est du

17
00:01:14,620 --> 00:01:20,680
type que nous avons défini dans notre modèle de produits. Sur le bouton ici, nous pouvons ajouter un titre

18
00:01:20,680 --> 00:01:26,530
d'ajout au panier car c'est à la fin ce que ce bouton devrait faire et onPress ne fait rien

19
00:01:26,620 --> 00:01:32,970
pour l'instant mais plus tard, nous ajouterons cela au panier. Ensuite, ici, je veux afficher le prix, nous n'avons

20
00:01:33,010 --> 00:01:34,390
pas besoin de

21
00:01:34,390 --> 00:01:37,600
publier le titre car cela fait déjà partie de

22
00:01:37,600 --> 00:01:43,630
l'en-tête, donc nous voyons le titre là-bas, mais ici, je veux afficher le prix en dollars en

23
00:01:43,630 --> 00:01:47,810
faisant référence au produit sélectionné. prix fixe 2 que j'ai

24
00:01:48,100 --> 00:01:50,410
fait avant et puis là-bas aussi

25
00:01:50,410 --> 00:01:56,170
la description, nous avons donc ici sélectionné Produit. description, comme ça.

26
00:01:56,200 --> 00:01:56,560
D'accord,

27
00:01:56,590 --> 00:01:57,670
donc ça a l'air bien,

28
00:01:57,670 --> 00:01:59,380
maintenant il est temps pour un style bien sûr.

29
00:01:59,380 --> 00:02:04,270
Par exemple, pour l'image, nous devrons certainement définir une largeur et une hauteur car c'est une image

30
00:02:04,270 --> 00:02:09,350
réseau, alors ici, je vais ajouter le style d'image que je dois ajouter à ma feuille de style.

31
00:02:09,460 --> 00:02:15,040
Maintenant, pour les textes ici, ce texte devrait avoir un style de prix

32
00:02:15,580 --> 00:02:24,490
peut-être que nous devons ajouter et ensuite ici, ce texte devrait avoir un style de description peut-être, sonne comme un nom approprié.

33
00:02:24,490 --> 00:02:31,690
Maintenant, dans la feuille de style, nous devons ajouter toutes ces choses, alors commençons pour l'image.

34
00:02:31,980 --> 00:02:34,580
Là, j'ajouterai une largeur de 100%, cela devrait vraiment

35
00:02:34,580 --> 00:02:38,730
prendre toute la largeur disponible et une hauteur de 300 peut-être et bien sûr

36
00:02:38,740 --> 00:02:40,570
vous pouvez jouer avec cela,

37
00:02:40,570 --> 00:02:46,810
vous pouvez également utiliser une valeur en pourcentage pour cela ou utiliser l'API de dimensions pour sorte de calculer cela dynamiquement.

38
00:02:48,000 --> 00:02:52,970
Par la suite, je veux avoir mon prix, ce texte de prix

39
00:02:53,080 --> 00:03:01,810
devrait avoir une taille de police de 20 car les gens devraient bien sûr pouvoir le voir, une couleur de ce

40
00:03:01,870 --> 00:03:09,670
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

41
00:03:09,670 --> 00:03:11,780
sorte qu'il soit toujours

42
00:03:11,850 --> 00:03:20,640
centré, également une marge sur l'axe vertical de 20 peut-être, donc autour de lui, de 20 puis par la suite, la description.

43
00:03:21,240 --> 00:03:30,660
La description peut en fait avoir une taille de police de disons 14, voyons si cela fonctionne et là-dedans, utilisez également

44
00:03:30,680 --> 00:03:38,810
le centre d'alignement du texte, quelque chose comme ça. Si nous gardons cela, jetons un œil

45
00:03:38,810 --> 00:03:47,420
à 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

46
00:03:47,450 --> 00:03:56,170
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

47
00:03:56,200 --> 00:04:03,500
cela, cela semble assez agréable. Sur Android, vous voyez que le bouton se trouve directement sous l'image

48
00:04:03,680 --> 00:04:06,300
et que c'est un bouton pleine largeur.

49
00:04:06,320 --> 00:04:07,900
C'est la même chose ici pour iOS, là,

50
00:04:07,910 --> 00:04:08,830
nous ne le voyons

51
00:04:08,840 --> 00:04:13,940
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.

52
00:04:14,150 --> 00:04:14,590
Donc,

53
00:04:14,600 --> 00:04:23,310
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

54
00:04:23,310 --> 00:04:28,160
d'une seule action ici, vous pouvez peut-être avoir plusieurs boutons ici pour différentes choses.

55
00:04:28,350 --> 00:04:32,890
Je vais donc ajouter ma clé d'actions ici à la feuille de style

56
00:04:33,030 --> 00:04:40,530
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

57
00:04:41,930 --> 00:04:43,260
centre qui, parce

58
00:04:43,430 --> 00:04:50,740
que la direction par défaut du flex est la colonne, les centres horizontalement et maintenant nous avons plus d'espacement ici et

59
00:04:50,740 --> 00:04:53,750
nous le voyons encore mieux sur Android, plus

60
00:04:53,780 --> 00:05:00,100
d'espacement et le bouton ne s'étire plus maintenant comme il le serait, son réglage d'alignement par défaut mais ne

61
00:05:00,100 --> 00:05:05,230
prend plus que la largeur dont il a besoin et est aligné dans le centre.

62
00:05:05,240 --> 00:05:06,310
C'est donc la

63
00:05:06,440 --> 00:05:07,050
configuration

64
00:05:07,070 --> 00:05:11,480
avec laquelle je vais aller, bien sûr, vous pouvez toujours l'ajuster de différentes manières

65
00:05:11,480 --> 00:05:13,150
si vous le souhaitez, pour

66
00:05:13,160 --> 00:05:18,360
moi, cela ne semble pas trop mal, voyons également comme un élément différent, peut-être aussi celui-ci,

67
00:05:18,440 --> 00:05:20,820
oui , c'est tout à fait joli.

68
00:05:20,870 --> 00:05:25,790
Maintenant, pour un texte plus long ici, vous voyez que ce n'est pas si beau, il devrait y avoir plus d'espacement.

69
00:05:26,240 --> 00:05:34,700
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,

70
00:05:34,700 --> 00:05:42,600
de sorte que si nous avons un autre regard sur cela, vous voyez maintenant cela saute automatiquement dans une nouvelle ligne

71
00:05:42,600 --> 00:05:43,890
qu'il devrait .

72
00:05:44,970 --> 00:05:45,290
D'accord,

73
00:05:45,360 --> 00:05:46,290
cela semble bon,

74
00:05:46,290 --> 00:05:48,380
maintenant nous avons l'écran de détail du produit.

75
00:05:48,480 --> 00:05:53,970
Avant de continuer, je veux apporter mes propres polices et les utiliser car je ne suis pas satisfait des polices par

76
00:05:53,970 --> 00:05:54,420
défaut.