React Native (Expo) - Lingo.dev CLI

Qu'est-ce qu'Expo ?

Expo est un framework et une plateforme pour créer des applications React Native. Il fournit des outils et des services pour construire, déployer et itérer sur des applications iOS, Android et web à partir de la même base de code JavaScript.

Qu'est-ce que Lingo.dev CLI ?

Lingo.dev est une plateforme de traduction alimentée par l'IA. Le CLI Lingo.dev lit les fichiers source, envoie le contenu traduisible aux grands modèles de langage et écrit les fichiers traduits dans votre projet.

À propos de ce guide

Ce guide explique comment configurer Lingo.dev CLI dans un projet React Native utilisant Expo. Vous apprendrez comment structurer un projet avec Expo, configurer un pipeline de traduction et visualiser les résultats.

Étape 1. Configurer un projet Expo

Créez une nouvelle application Expo :
```
npx create-expo-app@latest my-app
```
Naviguez dans le répertoire du projet :
```
cd my-app
```

Installez les dépendances de localisation :

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

Étape 2. Créer du contenu source

Créez un répertoire pour stocker le contenu localisable :
```
mkdir -p app/i18n
```

Créez un fichier qui contient du contenu localisable (par exemple, app/i18n/en.json) :

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

Étape 3. Configurer le CLI

À la racine du projet, créez un fichier i18n.json :

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

Ce fichier définit :

les fichiers que Lingo.dev CLI doit traduire
les langues entre lesquelles traduire

Dans ce cas, la configuration traduit les fichiers JSON de l'anglais vers l'espagnol.

Il est important de noter que :

[locale] est un placeholder qui est remplacé à l'exécution. Il garantit que le contenu est lu à partir d'un emplacement (par exemple, app/i18n/en.json) et écrit à un emplacement différent (par exemple, app/i18n/es.json).
Lingo.dev CLI prend en charge divers formats de fichiers, notamment JSON, MDX, et plus encore.

Pour en savoir plus, consultez configuration i18n.json.

Étape 4. Traduire le contenu

Créez un compte Lingo.dev.
Connectez-vous à Lingo.dev via l'interface en ligne de commande (CLI) :
```
npx lingo.dev@latest login
```
Exécutez le pipeline de traduction :
```
npx lingo.dev@latest run
```
Le CLI créera un fichier app/i18n/es.json pour stocker le contenu traduit et un fichier i18n.lock pour suivre ce qui a été traduit (afin d'éviter les retraductions inutiles).

Étape 5. Utiliser les traductions

Dans le fichier tsconfig.json, activez les importations JSON :

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

Créez une fonction qui charge le contenu traduit pour une locale spécifique :

// 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;

Utilisez la fonction pour afficher le contenu traduit :

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

Démarrez le serveur de développement :
```
npx expo start
```
Naviguez vers http://localhost:8081.
Basculez entre les langues disponibles.