Partie 4 — Styling & layout
⏱️ TL;DR — D’abord les fondations incontournables : StyleSheet (des objets JS, pas de CSS) et le flexbox RN (column par défaut, toutes les différences avec le web). Puis le thème sombre de Drill, et enfin le retour à la maison : NativeWind — vos classes Tailwind dans React Native. La partie se clôt sur le design system de Drill.
Pourquoi cette partie
Le style est le domaine où le dev web se sent à la fois chez lui (flexbox !) et piégé (pourquoi
flexDirection: column ?!). On apprend StyleSheet avant NativeWind, dans cet ordre, pour
une raison simple : NativeWind compile VERS StyleSheet — quand une classe ne marche pas, c’est
en StyleSheet qu’on débogue.
Les chapitres
| Chapitre | Contenu |
|---|---|
| 4.1 — StyleSheet | Objets JS, unités dp, composition, ce que CSS avait et que RN n’a pas |
| 4.2 — Flexbox à la sauce RN | column par défaut, flex: 1, gap — TOUTES les différences web |
| 4.3 — Thème & dark mode | La palette Drill, useColorScheme, tokens de thème |
| 4.4 — NativeWind | Tailwind dans RN : installation, className, dark:, migration de Drill |
| 4.5 — Le design system de Drill | Button, Card, Badge, AppText : les composants qui serviront 15 parties |
👉 Commencez par le chapitre 4.1.