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 créer, 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 sources, envoie le contenu traduisible aux grands modèles de langage et réé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 créer 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
```
Accédez au 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 le contenu source

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

Créez un fichier contenant 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.10",
  "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 espace réservé qui est remplacé lors de l'exécution. Il garantit que le contenu est lu depuis un emplacement (par exemple, app/i18n/en.json) et écrit vers un emplacement différent (par exemple, app/i18n/es.json).
La CLI Lingo.dev prend en charge divers formats de fichiers, notamment JSON, MDX et bien d'autres.

Pour en savoir plus, consultez Configuration i18n.json.

Étape 4. Traduire le contenu

Créez un compte Lingo.dev.
Connectez-vous à Lingo.dev via la CLI :
```
npx lingo.dev@latest login
```
Exécutez le pipeline de traduction :
```
npx lingo.dev@latest run
```
La 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 imports 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
```
Accédez à http://localhost:8081.
Basculez entre les langues disponibles.