1
00:00:02,120 --> 00:00:08,560
Actuellement dans notre composant d'élément de produit ici dans le dossier des composants, les boutons font partie du composant,

2
00:00:08,580 --> 00:00:10,660
tout comme le composant tactile enveloppant.

3
00:00:12,480 --> 00:00:18,990
Nous ne pouvons pas changer le composant tactile autant parce qu'il appartient à notre contenu ici et ce n'est

4
00:00:18,990 --> 00:00:25,200
pas non plus un gros problème car sur l'écran d'administration ici, je veux aussi que les éléments soient

5
00:00:25,590 --> 00:00:30,210
touchables mais je veux aller à mon écran d'édition dans ce Cas.

6
00:00:30,360 --> 00:00:33,530
Je veux aussi avoir deux boutons - un pour l'édition et

7
00:00:33,540 --> 00:00:37,710
un pour la suppression mais bien sûr les légendes et les actions devraient être différentes.

8
00:00:38,370 --> 00:00:46,150
Maintenant, nous pourrions passer ici ce texte de légende comme accessoires et renommer les accessoires que nous déclenchons lorsque les boutons sont enfoncés de manière

9
00:00:46,150 --> 00:00:50,880
plus générique, afin que nous puissions l'utiliser pour afficher les détails sur l'écran de présentation

10
00:00:50,920 --> 00:00:59,500
des produits et pour les modifier ou les supprimer. l'écran du produit utilisateur. Il existe également une autre manière de gérer

11
00:00:59,500 --> 00:01:00,320
cela.

12
00:01:00,370 --> 00:01:07,720
Ainsi, lorsque nous appuyons sur ce composant en général, je le renommerai sur select pour avoir un nom plus générique qui a du

13
00:01:07,720 --> 00:01:12,000
sens dans un plus large éventail de cas d'utilisation et je changerai également

14
00:01:12,770 --> 00:01:15,810
la façon dont nous recevons ces boutons ici.

15
00:01:15,890 --> 00:01:22,310
Je vais les couper d'ici et à la place, produire des accessoires pour les enfants ici, qui est cet accessoire spécial qui fait référence à tout ce

16
00:01:22,310 --> 00:01:29,560
que nous passons entre les balises d'ouverture et de fermeture de notre propre composant. Maintenant, avec cela, je peux également me débarrasser des couleurs importées ici

17
00:01:29,560 --> 00:01:32,540
et du bouton importer et maintenant aller aux endroits

18
00:01:32,830 --> 00:01:35,180
où nous utilisons l'article de produit,

19
00:01:35,230 --> 00:01:38,010
ce serait l'écran de présentation des produits par exemple.

20
00:01:38,290 --> 00:01:44,100
Là, nous devons maintenant importer le composant bouton et vous assurer que vous importez

21
00:01:44,110 --> 00:01:46,150
vos couleurs, alors importez

22
00:01:48,490 --> 00:01:57,630
les couleurs à partir des couleurs constantes et allez maintenant à votre article de produit et changez-le d'un composant à fermeture automatique à

23
00:01:57,630 --> 00:02:00,450
un composant que vous avez fermé et

24
00:02:00,450 --> 00:02:06,090
ouvert avec votre propres balises de composant. Entre ces balises, vous pouvez maintenant ajouter à nouveau

25
00:02:06,090 --> 00:02:13,680
ces deux boutons et maintenant, bien sûr, n'utilisez pas d'accessoires pour afficher les détails et les accessoires pour ajouter au panier ici, mais à la

26
00:02:13,680 --> 00:02:18,690
place, ajoutez votre logique ici car maintenant nous passons dynamiquement ce dans le composant d'élément de

27
00:02:18,690 --> 00:02:21,950
produit, mais nous pouvons donc passer différents boutons selon l'endroit où

28
00:02:21,960 --> 00:02:26,970
nous utilisons ce composant d'élément de produit. Alors maintenant, ici, je vais ajouter un

29
00:02:29,840 --> 00:02:39,030
nouveau gestionnaire, sélectionnez le gestionnaire d'éléments par exemple, qui est juste une fonction stockée dans une constante comme celle-ci et là, je veux faire ce que j'ai fait

30
00:02:39,140 --> 00:02:42,280
précédemment sur les détails de la vue, je vais

31
00:02:42,350 --> 00:02:48,440
le couper et l'ajouter ici et je m'attends à obtenir l'ID et le titre ici comme argument pour pouvoir

32
00:02:48,440 --> 00:02:52,350
transmettre l'ID et le titre ici comme ceci et maintenant sélectionner le

33
00:02:52,610 --> 00:02:59,860
gestionnaire d'élément est ce que je veux déclencher ici sur select, rappelez-vous que j'ai renommé cela dans l'élément de produit , ce

34
00:02:59,870 --> 00:03:03,590
toucher se déclenche maintenant uniquement sur select, vous devrez donc le

35
00:03:03,590 --> 00:03:09,770
renommer aux endroits où vous utilisez ce composant comme ici et puis ici, j'exécute mon gestionnaire d'élément de sélection

36
00:03:09,770 --> 00:03:17,360
ici et transfère itemData. article. id et itemData. article. titre ici pour

37
00:03:17,360 --> 00:03:23,690
que ces données se retrouvent dans cette fonction. Je le fais parce que maintenant je peux utiliser

38
00:03:23,690 --> 00:03:31,760
le même gestionnaire d'éléments ici sur ce bouton Afficher les détails, je peux essentiellement copier cette fonction anonyme et l'ajouter ici à ce gestionnaire

39
00:03:31,760 --> 00:03:34,560
onPress de ce bouton, alors maintenant nous réutilisons

40
00:03:34,610 --> 00:03:37,970
cela et nous ajoutons à panier, eh bien là, nous

41
00:03:38,060 --> 00:03:39,740
expédions cela, cela est maintenant

42
00:03:39,890 --> 00:03:45,320
supprimé ici du composant de l'article de produit parce que là nous n'avons plus cet accessoire,

43
00:03:45,320 --> 00:03:52,340
au lieu de cela, il est maintenant ici, cet accessoire qui prend cette fonction anonyme qui, à la fin, devrait envoyer

44
00:03:52,340 --> 00:03:53,510
cette action.

45
00:03:53,900 --> 00:04:00,170
Alors maintenant, le principal changement est que je déplace les boutons du composant, du composant d'élément de produit dans le composant

46
00:04:00,170 --> 00:04:05,930
d'écran de présentation des produits et cela nous permet de faire toujours la même chose qu'auparavant, si je

47
00:04:05,930 --> 00:04:11,330
sauvegarde cela, cela devrait toujours fonctionner comme avant. Nous pouvons appuyer sur un article, nous pouvons

48
00:04:11,330 --> 00:04:15,420
afficher les détails, nous pouvons appuyer sur le panier et cela fonctionne, mais maintenant

49
00:04:15,740 --> 00:04:18,890
nous pouvons également le personnaliser dans l'écran du produit utilisateur.

50
00:04:19,250 --> 00:04:28,410
Donc là, je vais aussi copier ces boutons et passer à l'écran du produit utilisateur et là-bas, importer le bouton de React Native, importer nos couleurs

51
00:04:28,470 --> 00:04:36,870
constantes parce que nous en aurons besoin pour les boutons des couleurs constantes puis ici dans l'article du produit , au lieu de configurer

52
00:04:37,320 --> 00:04:47,480
cela, nous devons analyser notre accessoire on select lorsque l'élément en général est tapé, mais maintenant nous ajoutons également des balises d'ouverture et de fermeture pour notre propre composant

53
00:04:47,480 --> 00:04:49,450
personnalisé et encore une

54
00:04:49,550 --> 00:04:53,240
fois, ajoutez nos boutons ici mais au lieu de voir

55
00:04:53,240 --> 00:04:55,380
les détails, maintenant Je dis éditer

56
00:04:55,490 --> 00:05:01,940
et supprimer et pour le moment, je peux simplement supprimer toutes les autres logiques car pour le moment,

57
00:05:02,060 --> 00:05:06,380
nous n'avons pas de logique pour éditer et supprimer mais c'est quelque

58
00:05:06,380 --> 00:05:08,630
chose que nous pouvons ajouter plus tard.

59
00:05:08,870 --> 00:05:13,630
Et ici pour sur select, c'est aussi juste une fonction vide pour le moment.

60
00:05:13,780 --> 00:05:19,690
Cela a l'avantage que nous avons maintenant nos articles comme auparavant, mais dans la section admin, nous avons maintenant la modification

61
00:05:19,690 --> 00:05:21,430
et la suppression et cela nous

62
00:05:21,550 --> 00:05:26,290
permet de faire différentes choses en réutilisant toujours le composant d'article du produit, ce qui est bien

63
00:05:26,290 --> 00:05:27,330
sûr assez agréable.