Terrain 1 — Composants core
10 drills · ~10 min · Chapitres liés : Partie 3
1. Quel composant pour un paragraphe de texte, et que se passe-t-il si vous l’oubliez ?
✅
<Text> — du texte nu dans une View crash (« Text strings must be rendered within a
Text component »).
2. Écrivez (de tête) la carte : emoji à gauche, titre + sous-titre au centre (titre tronqué à 1 ligne), compteur à droite. Quelles props sont critiques ?
✅
Row : flexDirection: 'row', alignItems: 'center', gap. Le bloc central : flex: 1
(borne le texte ET pousse le compteur à droite). Le titre : numberOfLines={1}.
3. <View>{items.length && <Badge/>}</View> — le bug, et la correction ?
✅
Si length = 0, l’expression vaut 0 → texte nu → crash. Correction :
{items.length > 0 && <Badge/>}.
4. Une image distante ne s’affiche pas. Les deux causes probables, dans l’ordre ?
✅
(1) Pas de dimensions (une URI n’a pas de taille intrinsèque) → width/height requis. (2) URL en HTTP nu (cleartext bloqué par Android) → HTTPS.
5. Comment obtenir un « bold » au milieu d’une phrase qui se wrappe comme UN paragraphe ?
✅
Un <Text style={{fontWeight:'700'}}> imbriqué dans le Text parent — héritage +
surcharge + wrapping commun.
6. Pressable : donnez le style-fonction de l’état pressé, et le feedback Android natif.
✅
style={({ pressed }) => [styles.base, pressed && styles.pressed]} et
android_ripple={{ color: '…' }} (ignoré sur iOS — l’opacité du pressed prend le relais).
7. Une croix de fermeture de 20 dp doit respecter les 48 dp de cible tactile — sans changer le visuel. La prop ?
✅
hitSlop={14} (20 + 14×2 = 48 dp de zone tactile).
8. onPressIn, onPress, onLongPress : l’ordre pour un appui long, et lequel n’est PAS déclenché ?
✅
onPressIn → onLongPress (~500 ms) → onPressOut. onPress n’est pas déclenché si le long press a eu lieu.
9. ScrollView ou FlatList : l’écran de réglages ? l’historique des sessions ? les 4 boutons de réponse ?
✅
Réglages : ScrollView (contenu borné). Historique : FlatList (données). Boutons :
ni l’un ni l’autre — un .map() (4 éléments bornés, pas de scroll).
10. Les deux props d’accessibilité minimales d’un bouton custom ?
✅
accessibilityRole="button" et accessibilityState={{ disabled }} (+ accessibilityLabel
si le visuel ne parle pas).
👉 Terrain suivant : 2 — Flexbox RN