编辑器的原生版本引用了两种类型的字符串:
1. 在 Web 和原生平台上使用的字符串。
2. 仅在原生平台上使用的字符串。
对于第一种类型,这些字符串的翻译遵循与 本指南中描述的 Web 版本相同的过程;然而对于后者,需要提供您自己的翻译。
提取仅在原生平台使用的字符串
为了识别这些字符串,您可以使用位于 packages/react-native-editor/bin/extract-used-strings.js 的脚本 extract-used-strings 来生成一个 JSON 对象,其中包含所有引用的字符串及其使用的平台,以及引用它们的文件。格式如下所示:
{
"gutenberg": {
"<string>": {
"string": String value.
"stringPlural": String value with its plural form. [optional]
"comments": Comments for translators. [default value is an empty string]
"reference": Array containing the paths of the source files that reference the string.
"platforms": Array containing the platforms where the string is being used, values are "android" | "ios" | "web".
},
...
},
"other-domain-plugin": {
...
},
...
}
如果编辑器的 React Native bundle 包含了其他插件,此命令也支持传入额外的插件。
需要注意的是,该 JSON 对象包含所有已使用的字符串,因此要识别那些仅在原生平台使用的字符串,您需要提供自己的脚本/流程来提取它们。这可以通过遍历字符串并过滤掉包含“web”平台的字符串轻松完成。
NPM 命令
提取已使用的字符串:
npm run native i18n:extract-used-strings -- "$PWD/used-strings.json"
注意:我们需要传递绝对路径,否则它会将 packages/react-native-editor 作为相对路径的根路径。
提取包括额外插件在内的已使用字符串:
npm run native i18n:extract-used-strings -- "$PWD/used-strings.json" "domain-plugin-1" <PLUGIN-1_SOURCE_PATH> "domain-plugin-2" <PLUGIN-2_SOURCE_PATH> ...
提供自定义翻译(针对仅在原生平台使用的字符串)
一旦您有了原生平台上使用的字符串列表,就需要对这些字符串进行翻译,但是,这个过程超出了原生版本的范畴,因此您必须提供自己的翻译。
将翻译数据注入编辑器的过程是通过 translations 初始 prop 完成的,该 prop 在编辑器初始化期间传递给编辑器:
– Android 引用
– iOS 引用
通过上述 translations 初始 prop 将提供的翻译集成到移动客户端的机制并未在此处描述,因为它特定于移动客户端,并且可以通过不同的方式实现。尽管如此,重要的是要通过提到的初始 prop 提供它们,因为编辑器负责将它们与编辑器中已包含的翻译合并。
注意:请记住,与编辑器中已包含的字符串匹配的字符串将被覆盖。
获取翻译(针对在 Web 和原生平台上使用的字符串)
翻译文件基本上是一个 JSON 对象,其中包含键值项,每个单独字符串都有对应的翻译。此内容从 translate.wordpress.org 获取,该网站保存着 WordPress 以及 Gutenberg 等不同插件的翻译。
这些文件可以缓存在某个文件夹下并进行优化。此外,还会生成一个索引文件,作为导入和获取插件翻译的入口点。
获取的翻译包含所有可翻译的插件字符串,包括未在编辑器原生版本中使用的字符串。不过,可以通过过滤掉未在使用字符串 JSON 文件中引用的字符串来减小文件大小。
默认情况下,在安装依赖项时,如果缓存不存在,可能会下载未优化的 Gutenberg 翻译并将其放在 i18n-cache 文件夹中。
这些翻译文件中包含的字符串会在编辑器初始化时被导入(引用),并将与由 translations 初始 prop 提供的额外翻译合并。
NPM 命令
获取未优化的翻译:
npm run native i18n:fetch-translations -- "gutenberg" <OUTPUT_PATH>
注意:我们需要传递绝对路径,否则它会将 packages/react-native-editor 作为相对路径的根路径。
获取优化的翻译:
npm run native i18n:fetch-translations -- "gutenberg" <OUTPUT_PATH> <USED_STRINGS_FILE>