Terrain 2 — Flexbox RN
9 drills · ~10 min · Chapitre lié : 4.2
1. Trois Text dans une View sans aucun style : disposition ?
✅
Empilés verticalement (column par défaut), chacun pleine largeur (alignItems: stretch par défaut).
2. Récitez les valeurs par défaut RN : flexDirection, alignItems, justifyContent.
✅
column · stretch · flex-start. (Le web : row pour le premier — LA différence.)
3. L’écran type header/contenu/footer : qui a flex: 1, et pourquoi un seul ?
✅
Le contenu (la zone extensible). Header et footer mesurent leur contenu — UNE seule zone absorbe l’espace restant, sinon elles se le partagent.
4. Une FlatList est invisible, écran blanc, pas d’erreur. Le suspect n°1 ?
✅
Un flex: 1 manquant dans la chaîne des parents : la liste mesure 0. La hauteur
descend du parent, elle ne remonte pas.
5. Dans une row, comment coller un élément à droite sans position absolute ?
✅
flex: 1 sur l’élément (ou le bloc) du milieu — il absorbe l’espace et pousse le
dernier au bord. (Alternative : marginLeft: 'auto'.)
6. flex: 2 vs flex: 1 entre deux frères : la répartition ?
✅
2/3 et 1/3 de l’espace disponible (au prorata des facteurs).
7. Une grille de chips qui passe à la ligne : les trois props du conteneur ?
✅
flexDirection: 'row', flexWrap: 'wrap', gap: N.
8. justifyContent et alignItems : lequel suit l’axe principal ? Dans une View par défaut, lequel gère l’horizontal ?
✅
justifyContent = axe principal, alignItems = axe croisé. En column (défaut) : justifyContent = vertical, alignItems = horizontal — l’inverse des réflexes web en row.
9. Un bouton doit être « à sa taille » (pas étiré) dans une colonne. La prop sur le bouton ?
✅
alignSelf: 'flex-start' (ou ‘center’) — il échappe au stretch par défaut du parent.
👉 Terrain suivant : 3 — Listes