Front-end · 8 mondes · 32 étapes

React Native

De vraies applis iOS et Android avec React.

Progression

0 %

0/32 étapes terminées

← Décryptages

Fondamental · 7 min de lecture

Les styles sans CSS

Objets, StyleSheet et composition

1Définition

En React Native, un style est un objet JavaScript passé à la prop style. Il n'y a ni sélecteurs, ni classes, ni cascade : chaque composant reçoit explicitement ses styles.

2Principes fondamentaux

Des objets en camelCase

background-color devient backgroundColor. Les valeurs sont des nombres (sans unité), des chaînes (couleurs, pourcentages) ou des tableaux (transform).

StyleSheet.create

Il regroupe les styles nommés d'un fichier. Il clarifie le code et signale les propriétés invalides pendant le développement.

Composition par tableau

style={[base, variante, condition && actif]} : les valeurs sont fusionnées de gauche à droite, les false et null sont ignorés.

Les props de style personnalisées

Pour qu'un composant accepte des styles de l'extérieur, fais-lui recevoir une prop style et ajoute-la en dernier dans son tableau.

3Exemples pratiques

Un bouton à variantes

App.tsx

1import { View, Text, Pressable, StyleSheet } from 'react-native';2 3function Bouton({ label, variante = 'plein', style }) {4  return (5    <Pressable style={[styles.base, variante === 'contour' && styles.contour, style]}>6      <Text style={[styles.label, variante === 'contour' && styles.labelContour]}>{label}</Text>7    </Pressable>8  );9}10 11export default function App() {12  return (13    <View style={{ flex: 1, justifyContent: 'center', padding: 24, gap: 14 }}>14      <Bouton label="Continuer" />15      <Bouton label="Plus tard" variante="contour" />16      <Bouton label="Supprimer" style={{ backgroundColor: '#d02f1c' }} />17    </View>18  );19}20 21const styles = StyleSheet.create({22  base: { padding: 16, borderRadius: 14, alignItems: 'center', backgroundColor: '#00a4a9', borderWidth: 2, borderColor: '#171718' },23  contour: { backgroundColor: 'transparent' },24  label: { fontWeight: '800', fontSize: 16 },25  labelContour: { color: '#171718' },26});

Démarrage de l'aperçu

La prop style passée en dernier permet au parent d'ajuster le bouton sans toucher au composant.

4Erreurs courantes

Écrire des unités

À éviter

{ fontSize: '16px', margin: '8px' }

À faire

{ fontSize: 16, margin: 8 }

Pourquoi : Les dimensions sont des nombres. Une chaîne avec « px » est invalide.

Créer un nouvel objet de style lourd à chaque rendu

À éviter

<View style={{ ...styles.carte, ...(actif ? styles.actif : {}) }} />

À faire

<View style={[styles.carte, actif && styles.actif]} />

Pourquoi : Le tableau est plus lisible, et React Native sait fusionner les styles efficacement.

Chercher un équivalent des classes CSS

À éviter

<Text className="titre">…</Text>

À faire

<Text style={styles.titre}>…</Text>

Pourquoi : React Native n'a pas de className natif : on référence des objets de style. (Des bibliothèques comme NativeWind ajoutent une syntaxe à la Tailwind, mais ce n'est pas le cœur de React Native.)

5Subtilités à connaître

◆Les ombres diffèrent : shadowColor, shadowOpacity, shadowRadius sur iOS ; elevation sur Android. Les versions récentes acceptent aussi boxShadow.
◆transform prend un tableau : transform: [{ rotate: '8deg' }, { scale: 1.1 }].
◆useColorScheme() renvoie 'light' ou 'dark' pour adapter tes styles au thème du téléphone.

6Vérifie ta compréhension

Question 1/3

Score 0

Comment écrire une marge de 8 ?

Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.