# General Translation Knowledge Base: 如何翻译 React Native 应用？
URL: https://generaltranslation.com/zh/kb/translate-react-native-app.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: 在组件中标记文本，为每种语言生成一个翻译文件，添加 Intl 兼容性补丁，然后根据设备语言加载对应的文件。使用 General Translation 实验性的 gt-react-native 时，只需用 `<T>` 包裹文本，Babel 插件会自动添加 polyfills，npx gt translate 则负责生成翻译文件。
Category: 国际化
Last updated: 2026-10-21
Authors: Kevin Liu, Kevin Wu
Published: 2026-10-21

翻译 React Native 应用，就是在组件中标记文本，为每种语言生成译文，再根据设备语言加载对应的那一份。React Native 的 JavaScript 运行时并未内置完整的 `Intl` API (用于格式化数字、日期和复数形式) ，因此应用需要引入 polyfills。Metro 打包工具无法解析动态拼接的导入路径，所以每个翻译文件都需要单独写一个静态的 `require` 调用。此外，每次发布都会带来新的字符串，必须在发布上线前完成所有语言的翻译。

## Video

The video is narrated in English, with English captions.

[How do I translate a React Native app?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-translate-react-native-app.mp4) (47秒)

General Translation lets you translate a React Native app with `gt-react-native` and `T`. Add its Babel plugin, call `initializeGT` with `loadTranslations`, mark the welcome with `<T>`, run `npx gt translate`, and run it as a development build.

## 翻译 React Native 应用的几种方式

| 方案                                                                                                                        | 优势                                                                                                                                                                                    | 需要你自行处理的工作                                                           |
| ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| 单独使用国际化 (i18n) 库 ([`i18next`](/kb/general-translation-vs-i18next)、[`react-intl`](/kb/general-translation-vs-react-intl))  | 提供成熟的运行时，用于渲染译文和格式化值                                                                                                                                                                  | 将所有字符串迁移到键文件中，把每个 `<Text>` 中的文本替换为键查找，添加 `Intl` 兼容性补丁，并产出和维护所有译文 |
| `expo-localization` 或 `react-native-localize`                                                                             | 读取设备的首选语言和区域设置，让应用能够确定初始区域设置                                                                                                                                                          | 后续的所有工作：用于查找字符串的库、翻译文件、复数形式以及全部译文                                    |
| 翻译管理系统 ([Crowdin](/kb/general-translation-vs-crowdin)、[Lokalise](/kb/general-translation-vs-lokalise))                    | 提供网页编辑器，译者可借助截图、词汇表和翻译记忆开展工作，并与你的代码仓库保持同步                                                                                                                                             | 应用中的国际化库和键文件、同步的初始化设置，以及每次发布前等待译者完成翻译                                |
| General Translation (`gt-react-native` 和 `gt` CLI)                                                                        | [`<T>`](/docs/react/reference/components/t) 原地翻译 `<Text>`，无需键；Babel 插件会自动添加 `Intl` 兼容性补丁；[`npx gt translate`](/docs/cli/reference/commands/translate) 为每种语言生成一个文件，并应用你的词汇表和自定义提示词 | 该包仍处于实验阶段；Expo 应用需要使用开发构建，因为 Expo Go 无法加载该包的原生模块                     |

如果应用只有少量页面、一到两种目标语言，或者团队必须继续在 Expo Go 中测试，可以单独使用国际化库并手写译文，再搭配 `expo-localization` 或 `react-native-localize` 来选择初始语言。如果由本地化团队在每次发布时人工翻译，请使用翻译管理系统。如果文案每次发布都会变化，且每种语言都需要及时跟上，请使用 General Translation。如果你已经在使用 `i18next`，`gt` CLI 也可以翻译它的 JSON 文件。

## 使用 General Translation 翻译 React Native 应用

General Translation 的 `gt-react-native` 包目前处于实验阶段，支持 Expo 和裸 React Native CLI。

1. 安装 `gt-react-native` 和 `gt` CLI，并在 `gt.config.json` 中列出你要支持的语言。

2. 添加该包提供的 Babel 插件，它会将 `Intl` 兼容性补丁 注入到你的入口文件中。

3. 传入 [`loadTranslations`](/docs/react/reference/functions/load-translations) 函数，调用一次 [`initializeGT`](/docs/react/reference/config#initialize)，然后用 [`<GTProvider>`](/docs/react/reference/components/gt-provider) 包裹应用，它会根据设备自动检测区域设置。

4. 用 [`<T>`](/docs/react/reference/components/t) 包裹文本，无需定义任何键：

   ```tsx
   import { T } from 'gt-react-native';

   <T>
     <Text>Welcome back</Text>
     <Text>Your order is on its way.</Text>
   </T>;
   ```

5. 使用 [`npx gt login`](/docs/cli/reference/commands/login) 登录，并设置你的项目 ID。

6. 运行 [`npx gt translate`](/docs/cli/reference/commands/translate)，为每种语言生成一个翻译文件；再将该命令添加到构建脚本中，确保每次发布都附带最新译文。

为移动端和 Web 项目分配同一个上下文分组 (包含词汇表和自定义提示词) ，即可让两端的术语和语气保持一致。完整步骤请参阅 [React Native 快速入门](/docs/react/react-native-quickstart)。

## Related questions

- [如何翻译 React 应用？](https://generaltranslation.com/zh/kb/translate-react-app.mdx): 翻译 React 应用，需要先对组件进行国际化，使其以用户的语言渲染，再将每个字符串翻译成你支持的各种语言。General Translation 的 gt-react 在 `<T>` 组件中原地翻译 JSX，npx gt translate 则会为每种语言生成一个文件。
- [如何为 Next.js App Router 应用添加 i18n？](https://generaltranslation.com/zh/kb/add-i18n-to-nextjs.mdx): 首先在受支持的 App Router 项目中运行 gt init 来配置 General Translation，然后标记源内容、生成译文并验证语言切换。gt-next 将文案与翻译上下文一同保留在 JSX 中；CLI、仪表板编辑器和 Locadex 负责生成、审阅和持续更新。本指南还演示了如何显式配置本地文件。
- [不使用翻译文件能实现 i18n 吗？](https://generaltranslation.com/zh/kb/i18n-without-translation-files.mdx): 可以。借助 General Translation 的 gt-react 和 gt-next 库，你可以为 React 和 Next.js 实现 i18n，既无需翻译键，也不用为每种语言维护 JSON 文件。文案以内联方式写在 JSX 的 `<T>` 组件中，gt translate 命令会在构建时结合代码中的上下文，为每种语言生成译文。Locadex 还能通过拉取请求让译文保持最新。
- [如何在 React 中处理复数形式？](https://generaltranslation.com/zh/kb/how-to-handle-plurals-in-react.mdx): 在 React 中处理复数形式时，应为每种语言的每个复数形式各准备一个句子，并按该语言的复数规则选出对应句子——英语有 2 种形式，俄语有 4 种，阿拉伯语有 6 种。gt-react 和 gt-next 提供的 General Translation `<Plural>` 组件只需接收你的源语言形式，General Translation 便会生成每种目标语言所需的形式。

## Previous and next questions

- Previous question: [如何翻译 Node.js 应用？](https://generaltranslation.com/zh/kb/translate-node-app.mdx)
- Next question: [如何翻译 React 应用？](https://generaltranslation.com/zh/kb/translate-react-app.mdx)

## Sitemap

See the [Knowledge Base sitemap](https://generaltranslation.com/zh/kb/sitemap.md) for every article.