Comprendre les différences de styles entre React Native et CSS peut être complexe.
Ne pas maîtriser ces différences peut entraîner des erreurs visuelles et des performances sous-optimales.
Cet article vous guide à travers les principales distinctions et techniques pour styliser efficacement vos applications React Native.
Développez votre première application mobile en un rien de temps !
Styles React Native vs CSS
Pas de séparateur de mots :
Dans React Native, les propriétés de style utilisent le camelCase au lieu des tirets. Par exemple, background-color devient backgroundColor.
Exemple :
const styles = {
backgroundColor: 'blue', // Correct
font-size: 16, // Incorrect en React Native
};
Utilisation de StyleSheet :
En React Native, les styles sont généralement définis à l’aide de l’objet StyleSheet. Cela permet d’optimiser les performances en regroupant les styles.
Exemple :
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Text style={styles.text}>Bienvenue dans mon application!</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f1f1f1',
},
text: {
fontSize: 20,
color: '#333',
},
});
export default App;
Explication de l’exmple :
View : Utilisé comme un conteneur pour appliquer le style container.
Text : Affiche le texte centré à l’intérieur du conteneur.
Le style container utilise flex: 1 pour prendre toute la hauteur de l’écran, justifyContent : ‘center’ et alignItems: ‘center’ pour centrer le contenu verticalement et horizontalement.
Unités de mesure :
En CSS, les unités de mesure (comme px, %, em) sont souvent utilisées. En revanche, en React Native, la plupart des valeurs numériques sont considérées comme des pixels par défaut.
Exemple :
const styles = {
height: 100, // Interprété comme 100 pixels
margin: 10, // Interprété comme 10 pixels
};
Propriétés spécifiques à la plateforme :
React Native propose certaines propriétés qui ne sont pas disponibles dans le CSS traditionnel, comme flex pour la mise en page. Ces propriétés sont spécifiques à l’environnement mobile.
Exemple :
const styles = {
flex: 1, // Utilisé pour gérer la mise en page
alignItems: 'center',
};
Pas de pseudo-sélecteurs :
Contrairement au CSS, React Native ne prend pas en charge les pseudo-sélecteurs comme : hover , : active , etc. Vous devez gérer ces interactions par programmation avec des événements.
Exemple :
<TouchableOpacity onPress={() => console.log('Pressed!')}>
<Text>Appuie-moi</Text>
</TouchableOpacity>
Flexbox React Native : Disposition
Flexbox est un modèle de mise en page par défaut dans React Native, permettant de créer des interfaces adaptatives et réactives.
Concepts clés :
– Conteneur flex : Définir un conteneur en utilisant flex: 1 pour occuper tout l’espace disponible.
– Direction des éléments : Utilisez flexDirection pour contrôler l’alignement :
row pour un alignement horizontal.
column pour un alignement vertical.
– Alignement :
justifyContent pour l’espacement entre les éléments (ex. : center, space-between).
alignItems pour l’alignement des éléments (ex. : center, flex-start).
– Propriétés flex : Utilisez flex pour déterminer comment les éléments occupent l’espace.
Voici un exemple :
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const App = () => (
<View style={styles.container}>
<View style={styles.box1}>
<Text>Élément 1</Text>
</View>
<View style={styles.box2}>
<Text>Élément 2</Text>
</View>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column', // Alignement vertical
justifyContent: 'center', // Centre les éléments
alignItems: 'center', // Centre horizontalement
},
box1: {
backgroundColor: 'red',
width: 100,
height: 100,
},
box2: {
backgroundColor: 'green',
width: 100,
height: 100,
marginTop: 10, // Espacement entre les éléments
},
});
export default App;
Cet exemple de code React Native crée une application avec deux éléments colorés (rouge et vert) disposés verticalement au centre de l’écran.
Le conteneur utilise Flexbox pour aligner les éléments, avec flexDirection : ‘column’ pour un alignement vertical et justifyContent : ‘center’ et alignItems : ‘center’ pour centrer les éléments dans le conteneur. Le carré vert a un espacement supérieur pour le séparer du carré rouge.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment les styles diffèrent-ils entre React Native et CSS?
Quels sont les avantages de l'utilisation de StyleSheet en React Native?
Comment utiliser Flexbox pour la mise en page en React Native?
Quelles sont les propriétés spécifiques à React Native non disponibles en CSS?
Comment gérer les interactions en l'absence de pseudo-sélecteurs dans React Native?
Conclusion
En explorant les styles en React Native, vous découvrez des approches différentes du CSS traditionnel. Comment pourriez-vous intégrer ces techniques dans vos prochains projets pour améliorer l’expérience utilisateur mobile?
