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

View et Text

Les deux briques de toute interface

1Définition

View est le conteneur universel de React Native : il structure, espace et décore. Text est le composant dédié à l'affichage du texte, le seul capable d'en contenir.

2Principes fondamentaux

View devient une vue native

Sur iOS, une View est une UIView ; sur Android, une android.view.View. Elle ne fait rien d'autre qu'occuper de l'espace et accueillir des enfants.

Tout texte passe par Text

Une chaîne ou un nombre placé directement dans une View provoque une erreur. Le texte a besoin des capacités de mise en page typographique de Text.

Text peut contenir du Text

Imbriquer des Text permet de styliser une partie d'une phrase. Les Text imbriqués héritent du style de leur parent, seule exception à l'absence de cascade.

Chaque View est un conteneur flex

Aucune déclaration n'est nécessaire : une View organise ses enfants en colonne par défaut.

3Exemples pratiques

Mettre un mot en valeur

App.tsx

1import { View, Text } from 'react-native';2 3export default function App() {4  return (5    <View style={{ flex: 1, justifyContent: 'center', padding: 28 }}>6      <Text style={{ fontSize: 24, lineHeight: 34 }}>7        Tu as gagné <Text style={{ fontWeight: '800', color: '#ee6900' }}>120 XP</Text> aujourd'hui.8      </Text>9    </View>10  );11}

Démarrage de l'aperçu

Le Text imbriqué hérite de la taille de police de son parent et ajoute seulement la graisse et la couleur.

Limiter un texte à deux lignes

App.tsx

1import { View, Text } from 'react-native';2 3export default function App() {4  return (5    <View style={{ flex: 1, justifyContent: 'center', padding: 28 }}>6      <Text numberOfLines={2} style={{ fontSize: 18 }}>7        React Native permet de construire des applications mobiles natives avec React, en partageant l'essentiel du code entre iOS et Android, tout en gardant une expérience fluide.8      </Text>9    </View>10  );11}

Démarrage de l'aperçu

numberOfLines coupe proprement le texte et ajoute des points de suspension.

4Erreurs courantes

Du texte nu dans une View

À éviter

<View>Bonjour</View>

À faire

<View>  <Text>Bonjour</Text></View>

Pourquoi : Sur téléphone, c'est un crash immédiat : « Text strings must be rendered within a <Text> component ».

Attendre l'héritage du style d'une View

À éviter

<View style={{ color: 'red' }}>  <Text>Alerte</Text></View>

À faire

<View>  <Text style={{ color: 'red' }}>Alerte</Text></View>

Pourquoi : Une View ne transmet pas de style typographique à ses enfants : la couleur doit être posée sur le Text.

Une condition qui affiche 0

À éviter

<View>  {messages.length && <Text>Nouveaux messages</Text>}</View>

À faire

<View>  {messages.length > 0 && <Text>Nouveaux messages</Text>}</View>

Pourquoi : Si la longueur vaut 0, l'expression vaut 0… qui se retrouve affiché hors d'un Text : erreur.

5Subtilités à connaître

◆Sur Android, un Text a un léger espace intérieur de police : includeFontPadding: false le supprime pour un alignement vertical précis.
◆selectable permet à l'utilisateur de copier le texte, désactivé par défaut.
◆allowFontScaling (activé par défaut) respecte la taille de texte choisie dans les réglages d'accessibilité : garde-le, et teste avec de grandes polices.
◆Une View sans taille ni enfants mesure 0 × 0 : c'est souvent la raison d'un fond « invisible ».

6Vérifie ta compréhension

Question 1/3

Score 0

Quel composant peut contenir une chaîne de caractères ?

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