Dokumentation / React Native and Expo

React Native und Expo-Lokalisierung, automatisiert

Übersetzen Sie eine React Native- oder Expo-App: Text, Platzhalter und Barrierefreiheitsbeschriftungen werden mit react-i18next zu t()-Aufrufen, eingerichtet ohne nur browserbasierte APIs.

Funktionsweise

Kopien in <Text>, placeholder, accessibilityLabel und accessibilityHint werden übersetzt, damit Screenreader auch die Sprache des Benutzers sprechen.

Das generierte Setup liest die Gerätesprache mit Intl anstelle von Browser-APIs aus und funktioniert mit Expo Router (app/_layout) oder einem klassischen App-Einstiegspunkt.

Vorher und nachher

Die tatsächliche Ausgabe der Engine für diese Datei. Bei einer echten Ausführung benennt das gehostete Modell die Schlüssel anhand des Kontexts.

src/screens/OrderStatus.tsx · vorher

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

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

Was das Setup hinzufügt

Der erste Durchlauf richtet react-i18next ein, falls das Projekt es noch nicht hat:

i18next und react-i18next
src/i18n.ts, importiert aus app/_layout, App oder index

Ausführen

Die CLI benötigt Node.js 22 oder neuer.

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

Oder fügen Sie die GitHub Action und erhalten Sie bei jedem Push einen Pull Request. Probieren Sie es zuerst mit Ihrem eigenen Code im Spielbereich.