Docs / React Native and Expo

Localisation React Native et Expo, automatisée

Traduisez une application React Native ou Expo : le texte, les espaces réservés et les étiquettes d'accessibilité deviennent des appels t() avec react-i18next, configurés sans API spécifiques au navigateur.

Comment ça marche

La copie dans <Text>, placeholder, accessibilityLabel et accessibilityHint est traduite, afin que les lecteurs d'écran parlent aussi la langue de l'utilisateur.

La configuration générée lit la langue de l'appareil avec Intl au lieu des API du navigateur, et fonctionne avec Expo Router (app/_layout) ou une entrée App classique.

Avant et après

La sortie réelle du moteur pour ce fichier. Lors d'une exécution réelle, le modèle hébergé nomme les clés à partir du contexte.

src/screens/OrderStatus.tsx · avant

import { Pressable, Text, View } from 'react-native';

export function OrderStatus({ onTrack }) {
  return (
    <View>
      <Text>Your order is on its way</Text>
      <Pressable onPress={onTrack} accessibilityLabel="Track your package">
        <Text>Track package</Text>
      </Pressable>
    </View>
  );
}

src/screens/OrderStatus.tsx · après

import { Pressable, Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';

export function OrderStatus({ onTrack }) {
  const { t } = useTranslation();
  return (
    <View>
      <Text>{t('order_status.your_order_is_on_its')}</Text>
      <Pressable onPress={onTrack} accessibilityLabel="Track your package">
        <Text>{t('order_status.track_package')}</Text>
      </Pressable>
    </View>
  );
}

locales/en.json

{
  "order_status": {
    "your_order_is_on_its": "Your order is on its way",
    "track_package": "Track package"
  }
}

Ce que l'installation ajoute

La première exécution configure react-i18next si le projet ne l'a pas encore :

i18next et react-i18next
src/i18n.ts, importé depuis app/_layout, App ou index

Exécutez-le

L'interface CLI nécessite Node.js 22 ou une version ultérieure.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

Ou ajoutez le Action GitHub et recevez une pull request à chaque push. Essayez-le d'abord sur votre propre code dans le playground.