Documenti / React Native and Expo

Localizzazione automatica di React Native e Expo

Traduci un'app React Native o Expo: testo, segnaposto e etichette di accessibilità diventano chiamate t() con react-i18next, configurato senza API solo browser.

Come funziona

Il testo in <Text>, placeholder, accessibilityLabel e accessibilityHint è tradotto, così anche i lettori di schermo parlano la lingua dell'utente.

La configurazione generata legge la lingua del dispositivo con Intl invece delle API del browser, e funziona con Expo Router (app/_layout) o un ingresso App classico.

Prima e dopo

L'output effettivo del motore per questo file. In un'esecuzione reale, il modello ospitato nomina le chiavi dal contesto.

src/screens/OrderStatus.tsx · prima

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 · dopo

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"
  }
}

Cosa aggiunge la configurazione

La prima esecuzione imposta react-i18next se il progetto non lo ha ancora:

i18next e react-i18next
src/i18n.ts, importato da app/_layout, App o index

Eseguilo

La CLI richiede Node.js 22 o versioni successive.

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

Oppure aggiungi la GitHub Action e ottieni una pull request a ogni push. Provalo prima sul tuo codice nel playground.