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 · 9 min de lecture

Flexbox en React Native

Le moteur de mise en page, décortiqué

1Définition

Flexbox est le modèle de mise en page de React Native, calculé par le moteur Yoga. Il répartit les enfants d'un conteneur le long d'un axe principal et d'un axe secondaire.

2Principes fondamentaux

Deux axes

flexDirection fixe l'axe principal (column par défaut, ou row). L'axe secondaire est toujours perpendiculaire.

Répartir et aligner

justifyContent répartit sur l'axe principal ; alignItems aligne sur l'axe secondaire ; alignSelf permet à un enfant de faire exception.

Grandir et rétrécir

flex: 1 fait occuper l'espace libre. Plusieurs enfants flex se partagent l'espace au prorata de leur valeur.

Des valeurs par défaut différentes du web

flexDirection: column, alignContent: flex-start et flexShrink: 0. Un code copié du web ne se comporte donc pas toujours pareil.

3Exemples pratiques

Un en-tête classique

App.tsx

1import { View, Text } from 'react-native';2 3export default function App() {4  return (5    <View style={{ flex: 1, backgroundColor: '#f7f2ea' }}>6      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: 20, backgroundColor: '#1d1e20' }}>7        <Text style={{ color: '#fff', fontSize: 22, fontWeight: '800' }}>touché</Text>8        <View style={{ flexDirection: 'row', gap: 10 }}>9          <Text style={{ color: '#ee6900', fontWeight: '800' }}>🔥 12</Text>10          <Text style={{ color: '#00a4a9', fontWeight: '800' }}>◆ 340</Text>11        </View>12      </View>13      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>14        <Text>Contenu</Text>15      </View>16    </View>17  );18}

Démarrage de l'aperçu

Une rangée écartée pour l'en-tête, puis une zone flex: 1 qui prend tout le reste et centre son contenu.

Un bouton qui ne s'étire pas

App.tsx

1import { View, Text } from 'react-native';2 3export default function App() {4  return (5    <View style={{ flex: 1, justifyContent: 'center', padding: 24, gap: 12 }}>6      <View style={{ backgroundColor: '#c2e7e3', padding: 14 }}>7        <Text>Étiré par défaut (alignItems: stretch)</Text>8      </View>9      <View style={{ alignSelf: 'flex-start', backgroundColor: '#f9d4b3', padding: 14 }}>10        <Text>alignSelf: flex-start</Text>11      </View>12    </View>13  );14}

Démarrage de l'aperçu

Dans une colonne, les enfants prennent toute la largeur. alignSelf permet à un seul enfant de garder sa taille naturelle.

4Erreurs courantes

Oublier flex: 1 sur le conteneur

À éviter

<View style={{ justifyContent: 'center' }}>  <Text>Centré ?</Text></View>

À faire

<View style={{ flex: 1, justifyContent: 'center' }}>  <Text>Centré !</Text></View>

Pourquoi : Sans flex: 1, la View ne mesure que la hauteur de son contenu : il n'y a rien à centrer.

Inverser les axes en row

À éviter

// centrer verticalement dans une rangée{ flexDirection: 'row', justifyContent: 'center' }

À faire

{ flexDirection: 'row', alignItems: 'center' }

Pourquoi : En row, l'axe principal est horizontal : c'est alignItems qui gère la verticale.

Un texte long qui déborde d'une rangée

À éviter

<View style={{ flexDirection: 'row' }}>  <Image … />  <Text>Un très long titre…</Text></View>

À faire

<View style={{ flexDirection: 'row' }}>  <Image … />  <Text style={{ flex: 1 }}>Un très long titre…</Text></View>

Pourquoi : flexShrink vaut 0 par défaut : le Text refuse de rétrécir. flex: 1 lui donne la place restante et autorise le retour à la ligne.

5Subtilités à connaître

◆gap, rowGap et columnGap sont pris en charge : plus besoin de marges sur chaque enfant.
◆position: 'absolute' sort un élément du flux ; il se place alors par rapport à son parent avec top, left, right, bottom.
◆flexWrap: 'wrap' permet de passer à la ligne, pratique pour des étiquettes de tailles variables.
◆aspectRatio fixe des proportions (1 pour un carré) en ne donnant qu'une seule dimension.

6Vérifie ta compréhension

Question 1/3

Score 0

Quelle est la direction par défaut ?

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