Actuellement dans notre composant d'élément de produit ici dans le dossier des composants, les boutons font partie du composant,
tout comme le composant tactile enveloppant.
Nous ne pouvons pas changer le composant tactile autant parce qu'il appartient à notre contenu ici et ce n'est
pas non plus un gros problème car sur l'écran d'administration ici, je veux aussi que les éléments soient
touchables mais je veux aller à mon écran d'édition dans ce Cas.
Je veux aussi avoir deux boutons - un pour l'édition et
un pour la suppression mais bien sûr les légendes et les actions devraient être différentes.
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
plus générique, afin que nous puissions l'utiliser pour afficher les détails sur l'écran de présentation
des produits et pour les modifier ou les supprimer. l'écran du produit utilisateur. Il existe également une autre manière de gérer
cela.
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
sens dans un plus large éventail de cas d'utilisation et je changerai également
la façon dont nous recevons ces boutons ici.
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
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
et du bouton importer et maintenant aller aux endroits
où nous utilisons l'article de produit,
ce serait l'écran de présentation des produits par exemple.
Là, nous devons maintenant importer le composant bouton et vous assurer que vous importez
vos couleurs, alors importez
les couleurs à partir des couleurs constantes et allez maintenant à votre article de produit et changez-le d'un composant à fermeture automatique à
un composant que vous avez fermé et
ouvert avec votre propres balises de composant. Entre ces balises, vous pouvez maintenant ajouter à nouveau
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
place, ajoutez votre logique ici car maintenant nous passons dynamiquement ce dans le composant d'élément de
produit, mais nous pouvons donc passer différents boutons selon l'endroit où
nous utilisons ce composant d'élément de produit. Alors maintenant, ici, je vais ajouter un
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
précédemment sur les détails de la vue, je vais
le couper et l'ajouter ici et je m'attends à obtenir l'ID et le titre ici comme argument pour pouvoir
transmettre l'ID et le titre ici comme ceci et maintenant sélectionner le
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
toucher se déclenche maintenant uniquement sur select, vous devrez donc le
renommer aux endroits où vous utilisez ce composant comme ici et puis ici, j'exécute mon gestionnaire d'élément de sélection
ici et transfère itemData. article. id et itemData. article. titre ici pour
que ces données se retrouvent dans cette fonction. Je le fais parce que maintenant je peux utiliser
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
onPress de ce bouton, alors maintenant nous réutilisons
cela et nous ajoutons à panier, eh bien là, nous
expédions cela, cela est maintenant
supprimé ici du composant de l'article de produit parce que là nous n'avons plus cet accessoire,
au lieu de cela, il est maintenant ici, cet accessoire qui prend cette fonction anonyme qui, à la fin, devrait envoyer
cette action.
Alors maintenant, le principal changement est que je déplace les boutons du composant, du composant d'élément de produit dans le composant
d'écran de présentation des produits et cela nous permet de faire toujours la même chose qu'auparavant, si je
sauvegarde cela, cela devrait toujours fonctionner comme avant. Nous pouvons appuyer sur un article, nous pouvons
afficher les détails, nous pouvons appuyer sur le panier et cela fonctionne, mais maintenant
nous pouvons également le personnaliser dans l'écran du produit utilisateur.
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
constantes parce que nous en aurons besoin pour les boutons des couleurs constantes puis ici dans l'article du produit , au lieu de configurer
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
personnalisé et encore une
fois, ajoutez nos boutons ici mais au lieu de voir
les détails, maintenant Je dis éditer
et supprimer et pour le moment, je peux simplement supprimer toutes les autres logiques car pour le moment,
nous n'avons pas de logique pour éditer et supprimer mais c'est quelque
chose que nous pouvons ajouter plus tard.
Et ici pour sur select, c'est aussi juste une fonction vide pour le moment.
Cela a l'avantage que nous avons maintenant nos articles comme auparavant, mais dans la section admin, nous avons maintenant la modification
et la suppression et cela nous
permet de faire différentes choses en réutilisant toujours le composant d'article du produit, ce qui est bien
sûr assez agréable.