1
00:00:02,200 --> 00:00:08,590
Veillons donc à ce que nos articles sur l'écran de présentation des produits soient un peu plus

2
00:00:11,860 --> 00:00:16,520
beaux qu'ils ne le sont actuellement. En ce moment, bien sûr, chaque élément de produit est simplement

3
00:00:16,540 --> 00:00:22,090
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

4
00:00:22,090 --> 00:00:24,970
je créerai un tout nouveau composant qui devrait être responsable de mon élément de produit.

5
00:00:25,060 --> 00:00:31,540
Maintenant, une note importante concernant l'endroit où nous créons ce composant, nous pouvons le créer ici

6
00:00:31,560 --> 00:00:35,510
dans l'aperçu des produits. le fichier js également, nous pouvons bien

7
00:00:35,530 --> 00:00:41,890
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

8
00:00:41,890 --> 00:00:47,250
ça, alors nous pouvons utiliser ce composant dans ce fichier qui est bien sûr ce que je compte faire.

9
00:00:47,290 --> 00:00:52,870
C'est un modèle que vous pouvez utiliser si vous avez un composant qui est vraiment fortement lié à un autre composant

10
00:00:53,080 --> 00:00:57,070
et que vous le divisez uniquement pour que chaque composant soit un peu plus lisible.

11
00:00:57,370 --> 00:01:03,160
Une fois que ces composants séparés deviennent très gros, vous devriez toujours envisager de les diviser en fichiers distincts, de sorte

12
00:01:03,190 --> 00:01:08,350
que vos fichiers restent petits et si les gens veulent jeter un œil à l'un des deux composants,

13
00:01:08,350 --> 00:01:12,700
ils n'ont pas à faire défiler l'autre composant ils pourraient ne pas être intéressés.

14
00:01:12,820 --> 00:01:18,730
C'est donc une chose à garder à l'esprit. Bien sûr, si vous prévoyez également d'utiliser un composant

15
00:01:19,150 --> 00:01:25,990
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

16
00:01:25,990 --> 00:01:29,950
également l'exporter s'il est stocké avec un autre composant, ce n'est pas la

17
00:01:30,520 --> 00:01:36,550
raison principale, mais surtout pour qu'il soit vraiment clair qu'il s'agit d'un composant autonome qui pourrait et sera utilisé dans

18
00:01:36,550 --> 00:01:38,310
différentes parties de votre application.

19
00:01:38,350 --> 00:01:45,550
Maintenant, l'article de produit ici ne sera pas seulement super petit, ce qui en soi serait une raison de le placer dans

20
00:01:45,550 --> 00:01:51,460
un fichier séparé, mais je l'utiliserai également dans un composant différent plus tard ou à différents endroits de

21
00:01:51,460 --> 00:01:57,970
l'application, ce n'est pas seulement pertinent à l'écran de présentation des produits et donc, je vais l'ajouter dans le dossier

22
00:01:57,970 --> 00:02:04,030
des composants et dans ce dossier des composants, pour organiser un peu mes composants, je vais ajouter un sous-dossier

23
00:02:04,120 --> 00:02:10,300
de la boutique où je veux placer tous les composants qui sont directement lié à la fonction boutique ou

24
00:02:10,300 --> 00:02:12,950
aux fonctionnalités en général de mon application.

25
00:02:13,090 --> 00:02:19,390
Donc, dans le sous-dossier de la boutique, j'ajouterai ce ProductItem. fichier js et vous verrez quels autres dossiers je

26
00:02:19,390 --> 00:02:21,540
vais ajouter ici plus tard.

27
00:02:21,550 --> 00:02:27,640
Encore une fois, tous ces modèles et pratiques que je vous montre ici ne sont que des moyens possibles de le faire, en

28
00:02:28,360 --> 00:02:34,480
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,

29
00:02:34,480 --> 00:02:37,270
il n'y a pas juste une seule bonne ou

30
00:02:37,390 --> 00:02:43,180
mauvaise façon, donc les pratiques et les modèles que je montre ici sont des pratiques et des modèles que vous verrez

31
00:02:43,180 --> 00:02:48,670
également dans d'autres projets, mais vous pouvez également voir d'autres structures de dossiers, à la fin, vous pouvez toujours travailler

32
00:02:48,670 --> 00:02:55,480
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

33
00:02:55,480 --> 00:03:00,910
cette structure qui, espérons-le, vous aidera à comprendre pourquoi je l'utilise et pourquoi cela pourrait valoir la peine d'être pensé.

34
00:03:01,900 --> 00:03:10,960
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

35
00:03:10,960 --> 00:03:16,110
qui reçoit des accessoires et à la fin retournera du code jsx et donc comme il contient du code

36
00:03:16,120 --> 00:03:22,750
jsx, nous devons importer React de React et ici, je vais aussi importer des choses depuis React Native car ici je vais maintenant travailler

37
00:03:23,170 --> 00:03:30,070
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

38
00:03:30,520 --> 00:03:34,930
aussi utiliser l'image parce que nous ' Je vais afficher l'image du produit ici et aussi

39
00:03:34,930 --> 00:03:42,310
la feuille de style parce que nous allons certainement aussi le styliser. Par conséquent, vous pouvez également ajouter une constante de styles ici

40
00:03:42,310 --> 00:03:48,190
que nous créons avec la feuille de style. créer à laquelle nous passons un objet Javascript

41
00:03:48,190 --> 00:03:56,170
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

42
00:03:56,170 --> 00:04:02,350
à créer le code jsx qui constitue l'élément de produit et ce sera un composant de présentation, ce

43
00:04:02,350 --> 00:04:08,500
qui signifie qu'il n'y aura pas de logique ici, nous ne gérerons aucun état interne, ce sera

44
00:04:08,530 --> 00:04:14,630
juste un composant que nous pouvons utiliser dans d'autres composants pour obtenir le bon style et la

45
00:04:14,630 --> 00:04:21,250
bonne disposition hors de la boîte, donc ce composant ici sera responsable d'utiliser certains composants React Native et de

46
00:04:21,400 --> 00:04:28,090
les disposer et de les styliser d'une certaine manière. Donc ici, je veux finalement rendre une vue

47
00:04:28,090 --> 00:04:34,150
qui enveloppe tout, qui organise tout, que nous pouvons également styliser pour obtenir ce look

48
00:04:34,150 --> 00:04:42,100
de chariot avec peut-être une ombre portée, peut-être des coins arrondis, tout ce que vous voulez et là-bas, nous avons

49
00:04:42,100 --> 00:04:50,460
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

50
00:04:50,460 --> 00:04:53,480
le prix, donc nous aurons besoin de

51
00:04:53,700 --> 00:05:04,630
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

52
00:05:05,200 --> 00:05:07,650
boutons, donc ici nous pouvons utiliser

53
00:05:07,650 --> 00:05:14,680
le composant bouton intégré pour le moment, où nous pouvons ensuite ajouter un produit au panier ou

54
00:05:14,680 --> 00:05:22,120
également voir les détails , donc là où nous avons ces deux options essentiellement et bien sûr, nous devons

55
00:05:22,120 --> 00:05:26,760
ajouter des gestionnaires onPress ici. C'est donc le squelette très basique, probablement pas

56
00:05:26,770 --> 00:05:30,880
le dernier, nous devrons voir comment nous pouvons tout styliser ici, mais c'est la

57
00:05:30,930 --> 00:05:32,390
disposition que je veux.

58
00:05:32,500 --> 00:05:37,460
Soit dit en passant, j'enveloppe mes boutons ici parce que je veux les avoir côte à côte dans la rangée

59
00:05:37,510 --> 00:05:43,030
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

60
00:05:43,040 --> 00:05:43,960
ainsi de suite.

61
00:05:43,990 --> 00:05:45,040
C'est donc

62
00:05:45,040 --> 00:05:47,320
une configuration avec laquelle nous

63
00:05:47,440 --> 00:05:49,850
pouvons travailler ici, ajoutons maintenant un

64
00:05:49,960 --> 00:05:53,980
style et pour cela je veux utiliser ou commencer ici

65
00:05:53,980 --> 00:05:59,980
sur la vue environnante où je configure des styles de produit comme celui-ci, donc ici dans

66
00:05:59,980 --> 00:06:03,900
la feuille de style, j'ajoute un produit comme ça, ajoutez

67
00:06:04,020 --> 00:06:07,200
ma clé de produit ici et bien sûr

68
00:06:07,210 --> 00:06:17,650
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

69
00:06:17,650 --> 00:06:27,580
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

70
00:06:27,610 --> 00:06:32,080
décalage de hauteur de deux et un rayon d'ombre de huit peut-être

71
00:06:32,080 --> 00:06:36,490
et comme toujours jouer avec ces valeurs pour trouver votre configuration.

72
00:06:36,490 --> 00:06:39,320
Maintenant, vous vous souvenez peut-être que l'ombre ne fonctionne

73
00:06:39,340 --> 00:06:45,670
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

74
00:06:45,670 --> 00:06:48,070
expérimenter avec différentes valeurs là-bas et je veux

75
00:06:48,160 --> 00:06:52,500
avoir un rayon de bordure de 10 car Je veux des coins arrondis et encore,

76
00:06:52,510 --> 00:06:54,250
c'est quelque chose que je

77
00:06:54,250 --> 00:07:00,400
veux ici, quelque chose que vous n'avez pas à faire. J'ajouterai également une couleur d'arrière-plan blanche pour nous assurer que

78
00:07:00,430 --> 00:07:05,290
notre panier ici, notre produit a toujours cette couleur d'arrière-plan même si notre application principale

79
00:07:05,290 --> 00:07:14,190
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

80
00:07:14,190 --> 00:07:16,920
produit doit avoir une hauteur de 300

81
00:07:16,920 --> 00:07:21,750
pixels et bien sûr, c'est une valeur que vous pouvez également modifier selon

82
00:07:21,750 --> 00:07:22,670
vos besoins.

83
00:07:22,740 --> 00:07:28,050
Vous pouvez bien sûr également rendre cette dynamique avec l'API dimensions comme vous l'avez appris

84
00:07:28,050 --> 00:07:34,830
dans le module réactif et j'ajouterai une marge de 20 dans toutes les directions autour de chaque article de produit,

85
00:07:34,860 --> 00:07:42,070
afin que nous ayons un espacement dans toutes les directions. Avec cette configuration, nous pouvons commencer à travailler sur la sortie de quelque

86
00:07:42,230 --> 00:07:47,330
chose, donc l'image a besoin d'une source et nous aurons une image réseau ici parce que si vous regardez

87
00:07:47,330 --> 00:07:52,940
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

88
00:07:52,940 --> 00:07:54,260
nous attendons à une

89
00:07:54,290 --> 00:07:59,480
URL ici, donc à une image réseau et ce serait la valeur par défaut pour toute boutique que vous construisez

90
00:07:59,480 --> 00:08:06,740
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

91
00:08:06,740 --> 00:08:09,070
s'agit d'une boutique où les gens peuvent créer des

92
00:08:09,110 --> 00:08:14,070
produits, il est évident que les gens créeront des produits dynamiquement après la distribution de votre application, il

93
00:08:14,240 --> 00:08:20,300
vous est donc impossible d'inclure toutes les images dans votre application, au lieu de cela, elles doivent être stockées sur un serveur .

94
00:08:21,450 --> 00:08:26,740
Donc donc ici, nous devons passer un objet à la source où nous définissons la propriété URI

95
00:08:26,910 --> 00:08:32,120
et qui sera maintenant reçu de l'extérieur parce que ce composant d'article de produit est de présentation,

96
00:08:32,130 --> 00:08:38,060
donc toutes les données à afficher doivent être transmises via des accessoires et là, nous pourrait s'attendre à l'accessoire

97
00:08:38,070 --> 00:08:40,680
d'image, mais comme pour tous les accessoires de

98
00:08:40,680 --> 00:08:47,610
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

99
00:08:47,610 --> 00:08:52,740
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

100
00:08:52,740 --> 00:08:55,210
bien sûr je veux avoir un signe dollar devant cela.

101
00:08:55,350 --> 00:09:02,640
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

102
00:09:03,020 --> 00:09:10,520
en appelant à fixed sur ceci et en passant par deux. Fixer est une fonction disponible sur les

103
00:09:10,560 --> 00:09:17,940
nombres en Javascript, qui la convertit essentiellement en une chaîne avec un nombre fixe de

104
00:09:17,940 --> 00:09:21,870
décimales et ici je restreins cela à

105
00:09:21,870 --> 00:09:23,210
toujours deux

106
00:09:23,280 --> 00:09:34,310
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

107
00:09:34,400 --> 00:09:41,960
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

108
00:09:41,960 --> 00:09:47,240
que les accessoires sur les détails de la vue pointent sur une fonction qui, dans la

109
00:09:47,240 --> 00:09:51,220
fin est exécutée lorsque ce bouton est enfoncé et donc ici, si

110
00:09:51,230 --> 00:09:58,900
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.

111
00:09:58,940 --> 00:09:59,300
Encore

112
00:09:59,540 --> 00:10:03,650
une fois, vous pouvez nommer ces accessoires comme vous le souhaitez, mais lorsque vous utilisez

113
00:10:03,740 --> 00:10:10,370
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.

114
00:10:10,370 --> 00:10:14,300
Maintenant, nous obtenons toutes les données. Maintenant, pour l'image, puisqu'il s'agit d'une

115
00:10:14,420 --> 00:10:21,440
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

116
00:10:21,440 --> 00:10:24,600
faire pour une image locale, elle ne peut pas le

117
00:10:24,620 --> 00:10:31,810
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.

118
00:10:31,820 --> 00:10:37,790
Encore une fois, c'est généralement à vous de décider comment vous le stylisez, mais je vais le définir pour

119
00:10:37,790 --> 00:10:38,750
avoir une

120
00:10:38,750 --> 00:10:46,580
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

121
00:10:46,580 --> 00:10:52,730
l'élément ici a une hauteur de 300 et je veux avoir l'image là-dedans, qui devrait également occuper la majorité de

122
00:10:53,000 --> 00:10:58,520
la hauteur, mais j'ai également le titre et le prix et mes boutons et ceux-ci devraient également y

123
00:10:58,520 --> 00:10:59,920
tenir, donc je ' ll

124
00:11:00,020 --> 00:11:02,240
donnera à l'image 60% de la hauteur

125
00:11:02,360 --> 00:11:10,560
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

126
00:11:10,560 --> 00:11:16,230
tout ce que nous avons ici, nous avons aussi notre titre, nous avons notre prix

127
00:11:16,230 --> 00:11:18,800
et je veux le styliser aussi.

128
00:11:18,840 --> 00:11:24,980
Donc, pour le titre, je vais ajouter le style de titre ici et pour le prix, je vais ajouter disons un

129
00:11:25,080 --> 00:11:32,490
style de prix et ici pour ces boutons, je vais également ajouter un style à la vue environnante et je vais nommer ceci actions et

130
00:11:32,490 --> 00:11:41,020
bien sûr, tous ces noms de style, comme toujours, sont totalement à vous. Ici, je veux ajouter mon

131
00:11:41,050 --> 00:11:54,860
titre et le prix et la propriété actions à ma feuille de style ici et maintenant pour le titre, vous pouvez

132
00:11:54,860 --> 00:11:59,900
bien sûr le styliser comme vous le souhaitez.

133
00:11:59,910 --> 00:12:01,970
Nous n'avons pas de polices personnalisées

134
00:12:02,070 --> 00:12:05,430
ici, j'en ajouterai bientôt mais pour le moment, je vais simplement l'ignorer

135
00:12:05,610 --> 00:12:11,610
et commencer avec une taille de police de 18 et je veux ajouter une marge verticale, donc en haut et en

136
00:12:11,610 --> 00:12:21,570
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

137
00:12:21,840 --> 00:12:30,490
14 donc un peu plus petite et je vais également lui donner une couleur qui devrait être peut-être 888

138
00:12:30,530 --> 00:12:34,380
qui est comme une couleur grisâtre grisâtre foncé.

139
00:12:34,380 --> 00:12:39,760
Maintenant, les actions sont placées sur cette vue qui contient les boutons et, par conséquent, je veux m'assurer que le

140
00:12:39,760 --> 00:12:42,450
bouton est assis côte à côte, donc dans une rangée.

141
00:12:42,670 --> 00:12:53,860
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

142
00:12:53,860 --> 00:13:02,980
et en plus, je veux aligner les éléments au centre verticalement, donc le long de l'axe transversal qui, pour

143
00:13:02,980 --> 00:13:06,910
une direction flexible de ligne est l'axe vertical.

144
00:13:06,910 --> 00:13:08,890
Avec cela, nous avons un style de

145
00:13:08,890 --> 00:13:14,920
base, utilisons maintenant ce composant avant d'affiner la configuration et le style. Ainsi, le composant d'article de produit que nous exportons

146
00:13:14,920 --> 00:13:20,110
ici dans le fichier d'article de produit peut maintenant être utilisé dans le fichier de présentation

147
00:13:20,110 --> 00:13:22,850
du produit en important l'article de produit

148
00:13:22,870 --> 00:13:29,680
à partir de là, nous allons donc pointer vers notre dossier de composants, là dans le sous-dossier de la boutique, puis

149
00:13:29,680 --> 00:13:35,340
l'article de produit et maintenant c'est ce que je veux utiliser ici quand je rend mes objets.

150
00:13:35,350 --> 00:13:40,300
L'élément de produit peut être un composant à fermeture automatique, car toutes les données sont reçues via des accessoires et non

151
00:13:40,300 --> 00:13:42,650
entre les balises d'ouverture et de fermeture, nous devons

152
00:13:42,670 --> 00:13:45,340
maintenant bien sûr configurer toutes les choses que nous attendons ici.

153
00:13:45,340 --> 00:13:50,700
Nous attendons une image, le titre, le prix et nos deux accessoires de gestion d'événements ici, c'est donc

154
00:13:50,710 --> 00:13:52,870
ce que nous devons fournir maintenant.

155
00:13:53,560 --> 00:13:55,390
Par conséquent, ici, sur l'article de produit,

156
00:13:55,510 --> 00:14:02,140
je vais commencer avec l'image et bien sûr, c'est itemData. article. imageUrl et vous

157
00:14:02,140 --> 00:14:08,800
devez toujours vous souvenir de cet itemData. l'élément pointe comme un produit tel que défini dans notre modèle de produit

158
00:14:08,800 --> 00:14:11,910
et il aura donc une propriété imageUrl écrite comme ceci, si vous

159
00:14:11,920 --> 00:14:17,980
l'avez écrit différemment, vous devez bien sûr y accéder différemment. Outre l'image, nous aurons également un

160
00:14:17,980 --> 00:14:26,290
titre qui est itemData. article. titre et en plus de cela, nous aurons le prix

161
00:14:26,320 --> 00:14:28,500
avec itemData. article. prix,

162
00:14:28,510 --> 00:14:35,140
puis nous avons nos deux gestionnaires d'événements ici parce que nous avons l'hélice de détail en vue et

163
00:14:35,140 --> 00:14:41,470
l'hélice d'ajout au panier que nous devons ajouter. Donc, sur les détails, la vue fera quelque chose plus tard, pour

164
00:14:41,890 --> 00:14:45,150
l'instant ce n'est qu'une fonction vide et sur ajouter au panier fera aussi

165
00:14:45,160 --> 00:14:47,650
quelque chose plus tard, pour l'instant ça peut

166
00:14:47,650 --> 00:14:54,280
aussi être une fonction vide, c'est ainsi que notre produit devrait être rendu. Avec ça si on enregistre ça, c'est ce

167
00:14:54,320 --> 00:14:57,850
qu'il faut voir, ce n'est pas encore parfait mais

168
00:14:57,860 --> 00:15:01,640
on y arrive, ce n'est pas trop mal en fait.

169
00:15:01,700 --> 00:15:07,300
Maintenant, bien sûr, ce que vous remarquez, c'est que les boutons sont colorés de manière incorrecte, que cet espace

170
00:15:07,300 --> 00:15:12,460
n'est pas vraiment utilisé de la façon dont il devrait être utilisé là-bas, que nous voulons peut-être

171
00:15:12,460 --> 00:15:21,050
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

172
00:15:21,100 --> 00:15:23,900
ici, commençons par nos deux textes ici.

173
00:15:23,950 --> 00:15:30,790
Ils doivent bien sûr être centrés et cela peut être fait de manière très simple en enveloppant cela avec une

174
00:15:30,790 --> 00:15:37,200
vue, en y déplaçant ces deux textes, en donnant à cette vue un style et bien sûr vous pouvez

175
00:15:37,250 --> 00:15:38,830
nommer cela comme vous

176
00:15:38,840 --> 00:15:43,930
voulez, je vais nommer il détaille parce que nous mettons en forme les détails

177
00:15:44,090 --> 00:15:52,710
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.

178
00:15:52,880 --> 00:16:00,440
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,

179
00:16:00,440 --> 00:16:04,870
mais l'axe transversal pour la colonne de direction flexible est bien sûr

180
00:16:04,880 --> 00:16:12,920
de gauche à droite, donc il se centre horizontalement, ce que je veux ici et moi '' Je lui donnerai également une hauteur de 15%.

181
00:16:12,930 --> 00:16:16,830
Gardez à l'esprit que l'image prend 60%, donc nous donnons cela peut-être

182
00:16:16,830 --> 00:16:21,070
15%, donc presque la moitié des 40% restants, pas tout à fait la

183
00:16:21,270 --> 00:16:24,960
moitié Et j'ajouterai ici un peu de rembourrage de 10 peut-être.

184
00:16:24,960 --> 00:16:31,780
Et pour les boutons ici, ceux-ci sont dans ma propriété actions, là je veux régler la

185
00:16:31,800 --> 00:16:36,340
hauteur sur les 25% restants, cela devrait être une chaîne

186
00:16:36,550 --> 00:16:41,300
bien sûr parce que nous avons 60% ici hauteur, puis nous

187
00:16:41,460 --> 00:16:43,360
avons 15% ici, donc

188
00:16:43,450 --> 00:16:50,860
ici Je veux garder les 25% restants et si nous enregistrons maintenant cela, cela semble beaucoup mieux.

189
00:16:50,860 --> 00:16:54,360
Maintenant, un remplissage à gauche et à droite serait également bien

190
00:16:54,370 --> 00:17:01,810
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

191
00:17:01,810 --> 00:17:05,230
à gauche ou à droite. Maintenant, pour changer la couleur

192
00:17:05,290 --> 00:17:10,540
des boutons, nous pouvons simplement aller aux composants de bouton qui sont intégrés

193
00:17:10,550 --> 00:17:12,140
dans React Native et

194
00:17:12,170 --> 00:17:18,250
définir le prop de couleur ici aux couleurs que vous devez donc importer du dossier

195
00:17:18,260 --> 00:17:19,530
constantes et

196
00:17:19,630 --> 00:17:30,510
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.

197
00:17:30,550 --> 00:17:32,220
Alors maintenant, nous avons nos

198
00:17:32,320 --> 00:17:37,090
boutons ici, ajouter au panier et voir les détails et cela ne semble pas trop mal.

199
00:17:37,120 --> 00:17:41,860
La seule chose que vous remarquerez peut-être est que nous n'avons pas de coins arrondis

200
00:17:41,860 --> 00:17:48,280
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

201
00:17:48,280 --> 00:17:49,570
est la vue

202
00:17:49,570 --> 00:17:53,800
environnante, l'image n'a pas coins arrondis et donc il chevauche nos coins arrondis que

203
00:17:53,800 --> 00:17:57,350
nous avons sur la vue environnante. Pour résoudre ce problème, nous pouvons

204
00:17:57,520 --> 00:18:01,200
envelopper l'image dans une vue distincte et comme je l'ai mentionné plus

205
00:18:01,450 --> 00:18:05,580
tôt dans le cours, il est vraiment normal dans React Native d'avoir quelques vues

206
00:18:05,580 --> 00:18:13,480
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 à

207
00:18:14,080 --> 00:18:20,350
notre feuille de style et maintenant je vais donner à ce conteneur d'image ma largeur et ma hauteur ici et sur

208
00:18:21,040 --> 00:18:24,850
l'image, je vais donc simplement ajouter une largeur et une hauteur de 100%

209
00:18:24,850 --> 00:18:25,900
parce qu'il

210
00:18:25,950 --> 00:18:27,500
est maintenant à l'intérieur de

211
00:18:27,520 --> 00:18:28,750
le conteneur, cela fait

212
00:18:28,750 --> 00:18:31,970
ici référence au parent, donc à ce conteneur, donc une hauteur

213
00:18:32,110 --> 00:18:35,200
de 60% sera alors également appliquée à l'image mais sur

214
00:18:35,200 --> 00:18:40,200
ce conteneur d'image, nous pouvons maintenant ajouter une bordure en haut à gauche rayon de 10 et

215
00:18:40,210 --> 00:18:42,020
une bordure en haut rayon droit

216
00:18:42,100 --> 00:18:48,520
de 10 afin que nous arrondissions ces coins et maintenant important, ajoutez un débordement caché ici car cela garantira que tout enfant

217
00:18:48,520 --> 00:18:53,400
là-bas qui est notre image ne peut pas chevaucher ce que nous avons mis en place ici.

218
00:18:53,410 --> 00:18:57,960
Alors maintenant, avec cette configuration, nous ajoutons nos coins arrondis ici en haut et maintenant

219
00:18:57,970 --> 00:19:02,860
ce sont les éléments d'image que je veux ici et bien sûr, c'est aussi une liste déroulante

220
00:19:03,070 --> 00:19:08,110
où vous voyez également que ces images sont chargées paresseusement automatiquement que vous pouvez continuer à travailler avec.

221
00:19:08,800 --> 00:19:13,270
Bien sûr, le prochain objectif pourrait être que nous puissions également afficher l'écran de détail.