React Native (Expo) - Lingo.dev CLI

什么是 Expo？

Expo 是一个用于创建 React Native 应用的框架和平台。它提供了工具和服务，可以从同一个 JavaScript 代码库构建、部署和迭代 iOS、Android 和 Web 应用。

什么是 Lingo.dev CLI？

Lingo.dev 是一个由 AI 驱动的翻译平台。Lingo.dev CLI 读取源文件，将可翻译内容发送到大型语言模型，并将翻译后的文件写回到您的项目中。

关于本指南

本指南解释了如何在使用 Expo 的 React Native 项目中设置 Lingo.dev CLI。您将学习如何使用 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": "This text is translated by Lingo.dev"
  },
  "cta": "Get started"
}

第 3 步：配置 CLI

在项目的根目录中，创建一个 i18n.json 文件：

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "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 账户。
通过 CLI 登录到 Lingo.dev：
```
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。
在可用语言之间切换。