Over-the-Air-Übersetzungen in React Native

Schritte zur Einrichtung

1. 1

   Release erstellen

   Committe in litei18n deine Übersetzungen und erstelle auf der Seite Releases ein Release (ab dem Starter-Plan). Kopiere deine Projekt-ID aus der dort angezeigten Release-URL. Exportiere deine Übersetzungen außerdem als JSON und lege sie als mitgelieferte Kopie in deine App.

2. 2

   Release beim App-Start laden

   Installiere i18next und react-i18next. Die mitgelieferte englische Datei ist der Rückfall, und loadLatest lädt eine Sprache herunter und fügt sie i18next hinzu. keySeparator ist aus, weil litei18n-Keys flache Namen wie home.title sind.

   src/i18n.tsKopieren

   import i18n from 'i18next';
   import { initReactI18next } from 'react-i18next';
   import en from './locales/en.json';
   
   const PROJECT_ID = 'YOUR_PROJECT_ID';
   const RELEASES =
     'https://ttksowxkfdohtprtfarf.supabase.co/storage/v1/object/public/releases/locales';
   
   i18n.use(initReactI18next).init({
     lng: 'en',
     fallbackLng: 'en',
     resources: { en: { translation: en } },
     keySeparator: false, // litei18n keys are flat: "home.title"
     interpolation: { escapeValue: false },
   });
   
   export async function loadLatest(locale: string) {
     try {
       const res = await fetch(`${RELEASES}/${PROJECT_ID}/latest/${locale}.json`);
       if (res.ok) {
         i18n.addResourceBundle(locale, 'translation', await res.json(), true, true);
       }
     } catch {
       // Offline: the bundled strings stay in place.
     }
     await i18n.changeLanguage(locale);
   }
   
   export default i18n;

3. 3

   Texte verwenden

   Nutze den Hook useTranslation wie gewohnt und rufe loadLatest beim Start einmal mit der Sprache des Nutzers auf.

   src/App.tsxKopieren

   import { useEffect } from 'react';
   import { Text } from 'react-native';
   import { useTranslation } from 'react-i18next';
   import { loadLatest } from './i18n';
   
   function Home() {
     const { t } = useTranslation();
     return <Text>{t('home.title')}</Text>;
   }
   
   export default function App() {
     useEffect(() => {
       loadLatest('es');
     }, []);
     return <Home />;
   }

4. 4

   Texte ohne neuen Build ändern

   Bearbeite eine Übersetzung, committe sie und erstelle ein neues Release. Die latest-URL liefert jetzt den neuen Text, und deine App übernimmt ihn, wenn sie die Übersetzungen das nächste Mal lädt. Kein neuer Build, keine App-Store-Prüfung.