85 lines
4.5 KiB
Markdown
85 lines
4.5 KiB
Markdown
# React Native 国际化指南
|
|
|
|
编辑器原生版本涉及两种类型的字符串：
|
|
1. 在网页和原生平台共同使用的字符串
|
|
2. 仅限原生平台使用的字符串
|
|
|
|
对于第一类字符串，其翻译流程与网页版本遵循相同的[操作指南](https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/internationalization.md)，但第二类字符串需要您自行提供翻译方案。
|
|
|
|
## 提取仅限原生平台使用的字符串
|
|
|
|
要识别这类字符串，您可以使用位于 `packages/react-native-editor/bin/extract-used-strings.js` 的 [`extract-used-strings`](https://github.com/WordPress/gutenberg/blob/trunk/packages/react-native-editor/bin/extract-used-strings.js) 脚本生成 JSON 对象，该对象包含所有被引用的字符串及其使用平台和引用文件信息。格式示例如下：
|
|
```
|
|
{
|
|
"gutenberg": {
|
|
"<字符串>": {
|
|
"string": 字符串值,
|
|
"stringPlural": 包含复数形式的字符串值,[可选]
|
|
"comments": 给译者的注释,[默认值为空字符串]
|
|
"reference": 包含引用该字符串的源文件路径的数组,
|
|
"platforms": 包含字符串使用平台的数组,可选值为 "android" | "ios" | "web"
|
|
},
|
|
...
|
|
},
|
|
"其他域插件": {
|
|
...
|
|
},
|
|
...
|
|
}
|
|
```
|
|
|
|
该命令还支持传入额外插件参数，适用于编辑器生成的 React Native 包包含其他插件的情况。
|
|
|
|
需要注意的是，该 JSON 对象包含所有已使用的字符串，因此要识别仅限原生平台使用的字符串，您需要自行编写脚本/流程进行提取。这可以通过遍历字符串并过滤掉包含 "web" 平台的字符串来实现。
|
|
|
|
### NPM 命令
|
|
|
|
提取已使用字符串：
|
|
```sh
|
|
npm run native i18n:extract-used-strings -- "$PWD/used-strings.json"
|
|
```
|
|
|
|
***注意：** 需要传入绝对路径，否则会以 `packages/react-native-editor` 作为相对路径的根目录*
|
|
|
|
提取包含额外插件的已使用字符串：
|
|
```sh
|
|
npm run native i18n:extract-used-strings -- "$PWD/used-strings.json" "域插件-1" <插件1源路径> "域插件-2" <插件2源路径> ...
|
|
```
|
|
|
|
## 提供自有翻译（针对仅限原生平台使用的字符串）
|
|
|
|
获取原生平台使用的字符串列表后，需要对字符串进行翻译。但此过程不在原生版本支持范围内，需要您自行提供翻译方案。
|
|
|
|
通过编辑器初始化时传递的 `translations` 初始属性注入翻译数据：
|
|
- [Android 参考](https://github.com/WordPress/gutenberg/blob/72854b4d6b09bd7fb7f996a5c55dd3cc0613ddf8/packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt#L34)
|
|
- [iOS 参考](https://github.com/WordPress/gutenberg/blob/72854b4d6b09bd7fb7f996a5c55dd3cc0613ddf8/packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift#L39-L43)
|
|
|
|
由于移动客户端集成方案具有特异性且实现方式多样，本文不赘述如何通过 `translations` 初始属性集成翻译数据。但需确保通过该属性提供翻译，因为编辑器会负责将其与内置翻译进行合并。
|
|
|
|
**注意：** 与编辑器内置字符串相匹配的翻译将被覆盖。
|
|
|
|
## 获取翻译文件（针对跨平台使用的字符串）
|
|
|
|
翻译文件本质上是包含每个字符串翻译键值对的 JSON 对象。这些内容从 [translate.wordpress.org](https://translate.wordpress.org/) 获取，该网站存储了 WordPress 及 Gutenberg 等插件的翻译数据。
|
|
|
|
这些文件可缓存至指定文件夹并进行优化。同时会生成作为导入入口点的索引文件。
|
|
|
|
获取的翻译文件包含插件所有可翻译字符串，包括编辑器原生版本未使用的字符串。但可通过已使用字符串 JSON 文件过滤未引用的字符串来减小文件体积。
|
|
|
|
默认情况下，在安装依赖项时，如果缓存不存在，可能会下载未优化的 Gutenberg 翻译文件并存放于 `i18n-cache` 文件夹。
|
|
|
|
编辑器初始化时会导入这些翻译文件中的字符串（[参考](https://github.com/WordPress/gutenberg/blob/154918b5770ac07c851169eaa35961c636eac5ba/packages/react-native-editor/src/index.js#L43-L49)），这些字符串将与通过 `translations` 初始属性提供的额外翻译进行合并。
|
|
|
|
### NPM 命令
|
|
|
|
获取未优化翻译：
|
|
```sh
|
|
npm run native i18n:fetch-translations -- "gutenberg" <输出路径>
|
|
```
|
|
|
|
***注意：** 需要传入绝对路径，否则会以 `packages/react-native-editor` 作为相对路径的根目录*
|
|
|
|
获取优化翻译：
|
|
```sh
|
|
npm run native i18n:fetch-translations -- "gutenberg" <输出路径> <已使用字符串文件>
|
|
``` |