React Native (Expo) - Lingo.dev CLI

Что такое Expo?

Expo — это фреймворк и платформа для создания приложений на React Native. Она предоставляет инструменты и сервисы для разработки, развертывания и итерации приложений для iOS, Android и веба из одного JavaScript-кода.

Что такое Lingo.dev CLI?

Lingo.dev — это платформа перевода, основанная на ИИ. Lingo.dev CLI считывает исходные файлы, отправляет переводимый контент в крупные языковые модели и записывает переведенные файлы обратно в ваш проект.

О данном руководстве

Это руководство объясняет, как настроить Lingo.dev CLI в проекте React Native с использованием Expo. Вы узнаете, как создать проект с Expo, настроить процесс перевода и просмотреть результаты.

Шаг 1. Настройка проекта Expo

Создайте новое приложение Expo:
```
npx create-expo-app@latest my-app
```
Перейдите в директорию проекта:
```
cd my-app
```
Установите зависимости для локализации:
```
npx expo install expo-localization
npx expo install i18n-js
```

Шаг 2. Создание исходного контента

Создайте директорию для хранения локализуемого контента:
```
mkdir -p app/i18n
```

Создайте файл, содержащий локализуемый контент (например, app/i18n/en.json):

{
  "home": {
    "title": "Welcome",
    "subtitle": "Этот текст переведен с помощью Lingo.dev"
  },
  "cta": "Начать"
}

Шаг 3. Настройка CLI

В корне проекта создайте файл i18n.json:

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

Этот файл определяет:

файлы, которые должен переводить Lingo.dev CLI
языки для перевода

В данном случае конфигурация переводит JSON-файлы с английского на испанский.

Важно отметить, что:

[locale] — это плейсхолдер, который заменяется во время выполнения. Он гарантирует, что контент считывается из одного места (например, app/i18n/en.json) и записывается в другое (например, app/i18n/es.json).
Lingo.dev CLI поддерживает различные форматы файлов, включая JSON, MDX и другие.

Чтобы узнать больше, смотрите конфигурацию i18n.json.

Шаг 4. Переведите контент

Зарегистрируйтесь в Lingo.dev.
Войдите в Lingo.dev через CLI:
```
npx lingo.dev@latest login
```
Запустите процесс перевода:
```
npx lingo.dev@latest run
```
CLI создаст файл app/i18n/es.json для хранения переведенного контента и файл i18n.lock для отслеживания переведенного (чтобы избежать ненужных повторных переводов).

Шаг 5. Используйте переводы

В файле tsconfig.json включите импорт JSON:

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

Создайте функцию, которая загружает переведенный контент для определенной локали:

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

Используйте функцию для отображения переведенного контента:

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

Запустите сервер разработки:
```
npx expo start
```
Перейдите на http://localhost:8081.
Переключайтесь между доступными языками.