Composant personalisés
Dans le blog d'aujourd'hui, le sujet sera la création de composants personnalisés sur React Native et en quoi cela peut être utile.
Pour comprendre ce qu'est un composant personnalisé dans React Native, la manière la plus simple de l'expliquer est de le comparer à un objet dans un langage orienté objet comme Java ou C#. Cependant, il est souvent utilisé pour regrouper des composants qui vont se répéter fréquemment dans un projet, comme par exemple un bouton.
Dans ce blog, je vais montrer comment créer un bouton personnalisé, ce qui permettra de le réutiliser à plusieurs endroits dans le code sans avoir à réécrire toute la logique. Il faut tout d'abord créer un fichier TSX comprenant le nom du composant personnalisé que l'on veut créer, comme ceci : BoutonPersonnalise.tsx.
On commence par importer les composants nécessaires pour notre composant (je sais que ça sonne bizarre, mais c'est pour permettre à notre bouton de comporter certains aspects qui sont inclus dans React Native) :
import { TouchableOpacity , Text} from 'react-native'
import React from 'react'
Ensuite, on va développer notre composant en créant une variable qui lui appartient :
const BoutonPersonalisé = ({titre, ActionPression, stylePersonalisé, styleText}) => {
return (
<TouchableOpacity
onPress={ActionPression}
activeOpacity={0.7}
className={`bg-secondary rounded-xl min-h-[62px] justify-center items-center ${stylePersonalisé} `}
>
<Text className={`text-primary font-psemibold text-lg ${styleText}`}>{titre}</Text>
</TouchableOpacity >
)
}
export default BoutonPersonalisé
À première vue, cela peut sembler être beaucoup de code sans explication, mais n'ayez crainte, j'explique tout de suite ce que chaque ligne fait.
1. Ligne const BoutonPersonalisé = ({titre, ActionPression, stylePersonalisé, styleText})
Explication : Elle sert à déclarer la variable BoutonPersonnalisé, avec les paramètres nécessaires dans son constructeur, un peu comme un objet dans un langage orienté objet.
La variable "titre" va servir de texte pour ce que vous allez mettre comme message sur le bouton.
La variable "ActionPression" va servir à définir l'action à effectuer lorsqu'elle est appelée.
La variable "stylePersonnalisé" va servir à ajouter des styles personnalisés pour le bouton, en plus de ceux qui sont déjà définis dans ce qui a été développé.
La variable "styleText" est similaire à "stylePersonnalisé", mais pour le texte qui se trouve dans le bouton.
2.Tout le code qui se trouve dans la partie qui suit le return va définir l'objet BoutonPersonnalisé et ses caractéristiques. Cela peut changer en fonction de ce que le développeur veut faire.
Après le développement du composant personnalisé, on peut enfin l'ajouter où l'on veut dans notre code. Il suffit simplement de l'importer :
import BoutonPersonalisé from "@/composantes/BoutonPersonalisé"
Ensuite, le tour est joué. On peut tout de suite le mettre dans notre composant comme tout autre objet React en utilisant des crochets qui se ferment comme ceci :
<BoutonPersonalisé
titre="Ceci est un bouton"
ActionPression={() => router.push('/route-personalisé')}
stylePersonalisé="w-full mt-7"
/>
Conclusion
Pour conclure, l'intégration de composants personnalisés permet d'implémenter facilement des objets qui doivent se répéter plusieurs fois. De plus, cela permet une maintenance plus efficace, car au lieu de devoir modifier le code à plusieurs endroits, il suffit de le changer qu'une seule fois. J'espère que ce blog vous aura été instructif. À bientôt.
Commentaires