Comment fonctionne le style dans React Native ?

Question

Accepted Answer

React Native utilise des **objets JavaScript** (et non des fichiers CSS) — appliqués via la prop `style`, souvent organisés avec `StyleSheet`. Il utilise un **système de layout basé sur Flexbox**. Les concepts ressemblent à CSS mais avec une syntaxe JavaScript et quelques différences. ## Style avec des objets JavaScript ```jsx import { StyleSheet, View, Text } from 'react-native'; function Card() { return ( Hello ); } // StyleSheet.create — define styles as JS objects (camelCase properties) const styles = StyleSheet.create({ card: { padding: 16, backgroundColor: '#fff', // camelCase (not background-color) borderRadius: 8, }, title: { fontSize: 18, fontWeight: 'bold', color: '#333', }, }); ``` Les styles sont des **objets JavaScript** avec des noms de propriétés en **camelCase** (`backgroundColor`, et non `background-color`) ; `StyleSheet.create` les organise. Vous pouvez aussi passer des objets en ligne ou des tableaux de styles. ## Layout Flexbox (par défaut) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Différences par rapport à CSS web ```text ✓ JS objects, camelCase props; no CSS files/classes; values often unitless numbers ✓ FLEXBOX by default (flexDirection defaults to 'column', unlike web's 'row') ✓ A subset of CSS properties (not everything web CSS has); some RN-specific behavior ✓ No cascade/inheritance like CSS (styles are per-component); use style arrays to combine ``` ## Pourquoi c'est important Comprendre le style dans React Native est fondamental car **le style est essentiel pour construire n'importe quelle UI**, et l'approche de React Native diffère de CSS web, donc c'est une connaissance pratique incontournable. React Native stylise les UIs avec des **objets JavaScript** (via la prop `style`, organisés avec `StyleSheet`) plutôt que des fichiers CSS — et comprendre cela (noms de propriétés en camelCase comme `backgroundColor`, définir les styles comme des objets JS, combiner les styles avec des tableaux) est nécessaire pour styliser n'importe quel composant React Native. Comprendre le **système de layout basé sur Flexbox** est particulièrement important : React Native utilise Flexbox pour le layout (comme CSS Flexbox, avec flexDirection, justifyContent, alignItems), mais avec la différence clé que **flexDirection par défaut est 'column'** (et non 'row' comme sur le web) — un point de confusion courant. Flexbox est le mécanisme de layout principal, donc le comprendre est essentiel pour organiser les UIs. Comprendre les **différences par rapport à CSS web** est important surtout pour les développeurs web : des objets JS en camelCase au lieu de fichiers/classes CSS, des valeurs numériques sans unité, un sous-ensemble de propriétés CSS (pas tout ce que le web a), la flexbox par défaut en column, et pas de cascade/héritage comme en CSS (les styles sont par composant) — ces différences sont des pièges courants dont la compréhension clarifie les choses. Bien que les concepts ressemblent à CSS (ce qui le rend accessible pour les développeurs web), la syntaxe et certains comportements diffèrent, donc comprendre l'approche spécifique de React Native est nécessaire. Puisque le style est essentiel à la construction de n'importe quelle UI et que l'approche de React Native basée sur des objets JS et Flexbox (avec ses différences par rapport à CSS web) est la façon de le faire, comprendre le style dans React Native est une connaissance pratique essentielle et fondamentale — nécessaire pour construire n'importe quelle interface React Native, et importante pour les développeurs web pour comprendre les différences par rapport à CSS, une compétence clé utilisée constamment dans le développement d'UI React Native.