Les bibliothèques de composants sont une collection de code personnalisable et réutilisable qui peut être adaptée au modèle de conception d'une application spécifique. Ils aident à maintenir une conception cohérente sur toutes les plates-formes et à accélérer le processus de développement.
Ici, vous apprendrez à utiliser la bibliothèque de composants React Native Elements lors de la création de votre prochaine application React Native.
Qu'est-ce que React Native Elements ?
React Native Elements (RNE) est un effort open source des développeurs React Native pour créer une bibliothèque de composants qui peut être utile lors de la création d'applications Android, iOS et Web. Contrairement à beaucoup autres bibliothèques de composants React Native, RNE prend en charge la syntaxe TypeScript.
La bibliothèque se compose de plus de 30 composants qui se concentrent sur la structure des composants.
Installation d'éléments natifs réactifs avec la CLI native de React
Les instructions suivantes permettent d'installer React Native Elements dans un projet créé à l'aide de la cli React Native.
Installez React Native Elements dans votre application nue React Native en exécutant :
installation npm @rneui/themed @rneui/base
Vous devez également installer react-native-vector-icons et safe-area-context :
npm installer réagir-indigène-les icônes vectorielles réagissent-indigène-sûr-zone-contexte
Comment installer React Native Elements dans un projet Expo
Pour installer React Native Elements dans un Expo project, installez le package et react-native-safe-area-context :
ajouter du fil @rneui/themed @rneui/réaction de base-indigène-contexte de zone de sécurité
Maintenez un gestionnaire de packages comme npm ou yarn lors de l'installation de packages pour éviter le risque de conflits de dépendances.
Les projets construits à l'aide de l'expo cli ont des icônes vectorielles réactives installées par défaut, vous n'avez donc pas besoin de l'installer.
Styling des composants d'éléments natifs à réaction unique
Tous les composants disponibles via RNE prennent divers accessoires pour styliser le composant et le conteneur du composant.
Le conteneur du composant est une base balise s'enroulant autour d'une balise de composant, comme le. Le tag est invincible autour du composant et prend un conteneurStyle prop pour appliquer les styles de vue.
Un composant peut recevoir des accessoires de style par défaut comme couleur, taper, et taille. Un composant peut également recevoir un accessoire de style personnalisé unique pour gérer les styles du composant.
Ce sont tous des styles externes pour le composant.
Par exemple, styliser le Bouton composant:
importer { Voir } depuis "réagir natif" ;
importer { Bouton } depuis "@rneui/thème" ;
constante MonComposant = () => {
retour (
<Voir>
<Bouton
buttonStyle={{ backgroundColor: "gris" }}
conteneurStyle={{ largeur: 150 }}
>
Bouton solide
</Button>
<Bouton
taper="contour"
containerStyle={{ largeur: 150, marge: 10 }}
titre="Bouton Contour"
/>
</View>
);
}
Le code ci-dessus montre comment vous pouvez appliquer des styles à un composant Button. One Button utilise une valeur par défaut taper prop, et l'autre utilise la coutume boutonStyle soutenir. Les deux boutons utilisent également le conteneurStyle prop pour ajouter des styles de vue.
Création de thèmes pour les composants React Native Elements
La création de thèmes pour les composants RNE est utile lorsque vous souhaitez appliquer un style à chaque instance de ces composants. Avec les thèmes, la personnalisation de vos composants en fonction du modèle de conception souhaité devient une tâche facile.
RNE fournit un créerThème() fonction pour styliser les composants. Cette fonction contiendra les styles de thème qui remplacent les styles internes ou par défaut de chaque composant.
Pour créer un thème, appelez créerThème() et passez les styles de thème souhaités en tant qu'argument de fonction :
importer { Fournisseur de thème, créer un thème } depuis '@rneui/thème' ;
constante theme = createTheme({
Composants: {
Bouton: {
style de conteneur: {
marge: 10,
},
titleStyle: {
couleur: "noir",
},
},
},
});
Le Fournisseur de thème appliquera des styles à tout composant enveloppé à l'intérieur.
Le fournisseur accepte un thème prop qui est défini sur le thème créé ci-dessus :
<ThemeProvider thème={thème}>
<Titre du bouton="Bouton thématique" />
</ThemeProvider>
<Titre du bouton="Bouton normal" />
Les styles de thème remplacent les styles de composant internes ou par défaut, mais ne remplacent pas un style de composant externe.
L'ordre de priorité de RNE place les styles externes au sommet de la hiérarchie.
Exemple:
// Thème
constante theme = createTheme({
Composants: {
Bouton: {
style de conteneur: {
marge: 10,
Couleur de l'arrière plan: "rouge",
},
},
},
});
//Component
<ThemeProvider thème={thème}>
<Titre du bouton="Bouton thématique" couleur={"secondaire"}/>
</ThemeProvider>
Dans le code ci-dessus, la couleur de fond du Bouton sera secondaire, qui est une couleur verte par opposition au style de thème rouge.
UN thème L'objet est livré avec RNE, fournissant de nombreuses valeurs de couleur par défaut prêtes à l'emploi. RNE offre diverses options comme le ThèmeConsommateur composant, useTheme() crochet, et makeStyles() crochet générateur pour accéder au thème objet.
Le ThèmeConsommateur component enveloppera vos composants rendus avec une fonction anonyme. Cette fonction anonyme prend thème comme accessoire.
Vous pouvez accéder aux valeurs du thème avec un style soutenir:
importer Réagir depuis 'réagir';
importer { Bouton } depuis 'réagir natif' ;
importer { ThèmeConsommateur } depuis '@rneui/thème' ;
constante MonComposant = () => (
<ThèmeConsommateur>
{({ thème }) => (
<Titre du bouton="ThèmeConsommateur" style={{ couleur: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Alternativement, vous pouvez utiliser le useTheme() crochet pour accéder au thème à l'intérieur d'un composant.
Par exemple:
importer Réagir depuis 'réagir';
importer { Bouton } depuis 'réagir natif' ;
importer { useTheme } depuis '@rneui/thème' ;constante MonComposant = () => {
constante { thème } = useTheme();
retour (
<Style de vue={styles.container}>
<Titre du bouton="utiliserThème" style={{ couleur: theme.colors.primary }}/>
</View>
);
};
Le makeStyles() générateur de hook est similaire à l'utilisation d'une feuille de style pour définir des styles. Comme la feuille de style, elle sépare tout style de l'extérieur de votre composant rendu. Se référant à la thème objet à l'intérieur d'un accessoire de style de composants.
Extension de thèmes avec TypeScript
RNE prend en charge les déclarations TypeScript dans votre application, permettant aux développeurs de tirer parti de les avantages de l'utilisation du langage TypeScript.
Avec des scripts dactylographiés déclaration fusion, vous pouvez étendre les définitions de thème pour ajouter des couleurs et des accessoires personnalisés pour les composants par défaut et personnalisés de RNE.
Pour étendre les couleurs à l'intérieur de l'objet thème, vous allez créer un TypeScript.ts déposer et déclarer le module @rneui/themed à l'intérieur du fichier.
Vous pouvez ensuite ajouter vos couleurs personnalisées et spécifier leur type attendu :
// **TypeScript.ts**importer '@rneui/themed';
déclarer module '@rneui/thème' {
exporter interfaceCouleurs{
primaryLight: chaîne ;
secondaireLumière: chaîne;
}
}
Avec ce module, vous pouvez transmettre vos couleurs personnalisées comme valeurs lors de la création d'un thème :
constante theme = createTheme({
couleurs: {
lumière primaire: "",
lumière secondaire: ""
},
})
Désormais, les couleurs personnalisées font partie de votre objet de thème et sont accessibles à l'aide de Fournisseur de thème, consommateur de thème, ou la useTheme() accrocher.
Composants RNE vs. Réagir aux composants natifs
Les bibliothèques de composants comme React Native Elements sont un excellent moyen de faire fonctionner rapidement une application. Ils vous permettent de vous concentrer sur la structure de l'application plutôt que sur les détails de la conception. L'utilisation des composants RNE sur les composants React Native doit être guidée principalement par l'objectif de votre application et le temps de développement dont vous disposez.
