React Native (Expo) - Lingo.dev CLI

Was ist Expo?

Expo ist ein Framework und eine Plattform zur Erstellung von React Native Anwendungen. Es bietet Tools und Dienste 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 dein Projekt.

Über diesen Leitfaden

Dieser Leitfaden erklärt, wie man die Lingo.dev CLI in einem React Native-Projekt mit Expo einrichtet. Du lernst, wie man ein Projekt mit Expo erstellt, eine Übersetzungspipeline konfiguriert und die Ergebnisse anzeigt.

Schritt 1. Einrichten eines Expo-Projekts

Erstelle eine neue Expo-App:
```
npx create-expo-app@latest my-app
```
Navigiere in das Projektverzeichnis:
```
cd my-app
```

Installiere die Lokalisierungsabhängigkeiten:

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

Schritt 2. Erstelle Quellinhalt

Erstelle ein Verzeichnis zum Speichern von lokalisierbaren Inhalten:
```
mkdir -p app/i18n
```

Erstelle 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. Konfiguriere die CLI

Erstelle im Stammverzeichnis des Projekts eine i18n.json-Datei:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": 1.8,
  "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.

Wichtig zu beachten ist:

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

Weitere Informationen findest du unter i18n.json-Konfiguration.

Schritt 4. Übersetzen des Inhalts

Registrieren Sie sich für ein Lingo.dev-Konto.
Melden Sie sich über die CLI bei Lingo.dev an:
```
npx lingo.dev@latest login
```
Führen Sie die Übersetzungspipeline aus:
```
npx lingo.dev@latest run
```
Die CLI erstellt eine app/i18n/es.json-Datei zur Speicherung des übersetzten Inhalts und eine i18n.lock-Datei zur Verfolgung der übersetzten Inhalte (um unnötige Neuübersetzungen zu vermeiden).

Schritt 5. Verwenden der Übersetzungen

Aktivieren Sie in der tsconfig.json-Datei JSON-Importe:

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

Erstellen Sie eine Funktion, die den übersetzten Inhalt für eine bestimmte Sprache 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;

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>
  );
}

Starten Sie den Entwicklungsserver:
```
npx expo start
```
Navigieren Sie zu http://localhost:8081.
Wechseln Sie zwischen den verfügbaren Sprachen.