0Pricing
React Academy · Leçon

Styles avec l’API StyleSheet et Flexbox

Écrivez des styles mobiles avec StyleSheet.create et Flexbox, sans noms de classes CSS.

Styles avec l’API StyleSheet et Flexbox est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Pas de CSS dans React Native

React Native utilise une API de styles en JavaScript — pas de fichiers CSS, pas de noms de classes et pas de cascade. Les styles sont des objets JavaScript appliqués via la prop style.

StyleSheet.create()

Encapsulez les objets de styles dans StyleSheet.create() pour améliorer les performances (les styles sont validés et optimisés une seule fois) et bénéficier de la complétion automatique de l’IDE.

import { StyleSheet, View, Text } from 'react-native';

function Card() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Hello</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, backgroundColor: '#fff', borderRadius: 8, shadowColor: '#000', shadowOpacity: 0.1, elevation: 2 },
  title: { fontSize: 18, fontWeight: 'bold', color: '#111' },
});

Styles en ligne

Appliquez les styles directement via la prop style. La syntaxe des tableaux fusionne plusieurs objets de styles — les styles ultérieurs remplacent les précédents.

<View style={{ padding: 16, backgroundColor: '#f5f5f5' }} />

// Array merging:
<Text style={[styles.base, isActive && styles.active, { marginTop: 8 }]} />

Flexbox dans React Native

React Native utilise Flexbox par défaut pour la mise en page, mais avec des valeurs par défaut différentes de celles du Web : flexDirection vaut par défaut 'column' (et non 'row'), et flex: 1 occupe l’espace disponible.

const styles = StyleSheet.create({
  container: {
    flex: 1,                   // fill available space
    flexDirection: 'column',   // default in RN (web default is 'row')
    justifyContent: 'center',  // main axis alignment
    alignItems: 'center',      // cross axis alignment
  },
});

Mise en page en ligne

Utilisez flexDirection: 'row' pour disposer les enfants horizontalement, comme avec display: flex; flex-direction: row en CSS.

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12, // gap is supported in RN 0.71+
  },
});

<View style={styles.row}>
  <Image source={avatar} />
  <Text>{username}</Text>
</View>

flex ou width/height

Utilisez flex: N pour définir une taille proportionnelle. flex: 1 occupe tout l’espace restant ; flex: 2 obtient deux fois plus d’espace que les éléments frères ayant flex: 1.

// Sidebar takes 1/3, content takes 2/3:
<View style={{ flexDirection: 'row', flex: 1 }}>
  <View style={{ flex: 1, backgroundColor: '#eee' }}>Sidebar</View>
  <View style={{ flex: 2 }}>Content</View>
</View>

Positionnement absolu

Utilisez position: 'absolute' avec top, right, bottom et left pour les éléments superposés — comme avec le positionnement absolu CSS dans un parent relatif.

const badge = StyleSheet.create({
  badge: {
    position: 'absolute',
    top: -4,
    right: -4,
    width: 16,
    height: 16,
    borderRadius: 8,
    backgroundColor: 'red',
  },
});

Styles spécifiques à la plateforme

Utilisez Platform.OS ou Platform.select() pour appliquer des styles différents sur iOS et Android.

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  shadow: {
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOpacity: 0.2, shadowRadius: 4 },
      android: { elevation: 4 },
    }),
  },
});

Couleurs

React Native accepte les chaînes de couleurs CSS (hexadécimales, rgb et nommées) ainsi que l’API PlatformColor pour les couleurs système.

import { PlatformColor } from 'react-native';

// System color — adapts to dark mode automatically:
const labelColor = PlatformColor('label', '#000'); // iOS 'label' semantic color

Styles dynamiques avec les props

Calculez les styles à partir des props dans le composant. Passez une fonction à StyleSheet ou calculez l’objet de styles directement dans le code.

function Badge({ color, size = 16 }: { color: string; size?: number }) {
  return (
    <View
      style={[
        styles.badge,
        { backgroundColor: color, width: size, height: size, borderRadius: size / 2 },
      ]}
    />
  );
}

const styles = StyleSheet.create({ badge: { position: 'absolute' } });

Vérification rapide

Quelle est la valeur par défaut de flexDirection dans React Native (contrairement au Web) ?

Récapitulatif

Utilisez StyleSheet.create() pour optimiser les styles et appliquez-les via la prop style. Dans React Native, Flexbox utilise flexDirection: 'column' par défaut et flex: 1 occupe l’espace restant. Utilisez Platform.select() pour les styles d’ombres spécifiques au système d’exploitation.

Questions Fréquemment Posées

La leçon « Styles avec l’API StyleSheet et Flexbox » est-elle gratuite ?

Oui — le texte complet de « Styles avec l’API StyleSheet et Flexbox » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Styles avec l’API StyleSheet et Flexbox » ?

Écrivez des styles mobiles avec StyleSheet.create et Flexbox, sans noms de classes CSS. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Styles avec l’API StyleSheet et Flexbox » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Composants fondamentaux de React Native et DOM web
  2. Styles avec l’API StyleSheet et Flexbox
  3. Navigation avec Expo Router
  4. Accéder aux API de l’appareil : caméra, position et notifications push
← Retour à React Academy