React Native (Expo)

Was ist Expo?

Expo ist ein Framework und eine Plattform zur Erstellung von React Native-Anwendungen. Es bietet Tools und Services zum Erstellen, Bereitstellen und Iterieren von iOS-, Android- und Web-Apps aus derselben JavaScript-Codebasis.

Was ist Lingo.dev CLI?

Lingo.dev ist eine KI-gestützte Übersetzungsplattform. Die Lingo.dev CLI liest Quelldateien, sendet übersetzbare Inhalte an große Sprachmodelle und schreibt übersetzte Dateien zurück in Ihr Projekt.

Über diese Anleitung

Diese Anleitung erklärt, wie Sie Lingo.dev CLI in einem React Native-Projekt mit Expo einrichten. Sie erfahren, wie Sie ein Projekt mit Expo erstellen, eine Übersetzungspipeline konfigurieren und die Ergebnisse anzeigen.

Schritt 1. Expo-Projekt einrichten

1. Erstellen Sie eine neue Expo-App:

   npx create-expo-app@latest my-app
   

2. Navigieren Sie in das Projektverzeichnis:

   cd my-app
   

3. Installieren Sie die Lokalisierungsabhängigkeiten:

   npx expo install expo-localization
   npx expo install i18n-js
   

Schritt 2. Quellinhalte erstellen

1. Erstellen Sie ein Verzeichnis zum Speichern lokalisierbarer Inhalte:

   mkdir -p app/i18n
   

2. Erstellen Sie eine Datei, die lokalisierbare Inhalte enthält (z. B. app/i18n/en.json):

   {
     "home": {
       "title": "Welcome",
       "subtitle": "This text is translated by Lingo.dev"
     },
     "cta": "Get started"
   }
   

Schritt 3. CLI konfigurieren

Erstellen Sie im Stammverzeichnis des Projekts eine i18n.jsonDatei:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "json": {
      "include": ["app/i18n/[locale].json"]
    }
  }
}

Diese Datei definiert:

• die Dateien, die Lingo.dev CLI übersetzen soll
• die Sprachen, zwischen denen übersetzt werden soll

In diesem Fall übersetzt die Konfiguration JSON-Dateien von Englisch nach Spanisch.

Es ist wichtig zu beachten, dass:

• [locale] ist ein Platzhalter, der zur Laufzeit ersetzt wird. Er stellt sicher, dass Inhalte von einem Ort gelesen (z. B. app/i18n/en.json) und an einen anderen Ort geschrieben werden (z. B. app/i18n/es.json).
• Lingo.dev CLI unterstützt verschiedene Dateiformate, einschließlich JSON, MDX und mehr.

Weitere Informationen finden Sie unter i18n.json-Konfiguration.

Schritt 4. Inhalte übersetzen

1. Registrieren Sie sich für ein Lingo.dev-Konto.

2. Melden Sie sich über die CLI bei Lingo.dev an:

   npx lingo.dev@latest login
   

3. Führen Sie die Übersetzungs-Pipeline aus:

   npx lingo.dev@latest run
   

   Die CLI erstellt eine app/i18n/es.jsonDatei zum Speichern der übersetzten Inhalte und eine i18n.lockDatei, um nachzuverfolgen, was übersetzt wurde (um unnötige erneute Übersetzungen zu vermeiden).

Schritt 5. Übersetzungen verwenden

1. Aktivieren Sie in der tsconfig.jsonDatei JSON-Importe:

   {
     "extends": "expo/tsconfig.base",
     "compilerOptions": {
       "resolveJsonModule": true
     }
   }
   

2. Erstellen Sie eine Funktion, die den übersetzten Inhalt für ein bestimmtes Gebietsschema lädt:

   // app/lib/i18n.ts
   import { getLocales } from "expo-localization";
   import { I18n } from "i18n-js";
   
   import en from "../i18n/en.json";
   import es from "../i18n/es.json";
   
   const i18n = new I18n({ en, es });
   
   i18n.defaultLocale = "en";
   i18n.enableFallback = true;
   i18n.locale = getLocales()[0]?.languageCode ?? "en";
   
   export default i18n;
   

3. Verwenden Sie die Funktion, um den übersetzten Inhalt anzuzeigen:

   // App.tsx
   import { useState } from "react";
   import { View, Text, Pressable } from "react-native";
   import i18n from "./app/lib/i18n";
   
   export default function App() {
     const [locale, setLocale] = useState(i18n.locale);
   
     const toggleLocale = () => {
       const next = locale === "en" ? "es" : "en";
       i18n.locale = next;
       setLocale(next);
     };
   
     return (
       <View>
         <Text>{i18n.t("home.title")}</Text>
         <Text>{i18n.t("home.subtitle")}</Text>
   
         <Pressable onPress={toggleLocale}>
           <Text>
             {locale === "en" ? "Switch to Español" : "Cambiar a English"}
           </Text>
         </Pressable>
       </View>
     );
   }
   

4. Starten Sie den Entwicklungsserver:

   npx expo start
   

5. Navigieren Sie zu http://localhost:8081.

6. Wechseln Sie zwischen den verfügbaren Sprachen.