React Native 入门

尝试演示

查看我们的 React Native 演示应用。 查看我们在 NPM 上的 FBT Native Module。

添加 FBT 及其依赖项

  • 依赖项

    • yarn add babel-plugin-fbt babel-plugin-fbt-runtime fbt react-native-fbt '@fbtjs/default-collection-transform'

    • yarn add babel-preset-react-native shelljs fb-tiger-hash --dev

    • 确保您的 fbt 版本大于 "^0.10.0"

  • 创建一个 .babelrc 或 babel.config.js 文件，以添加具有以下内容的转换插件

{
"plugins": ["babel-plugin-fbt", "babel-plugin-fbt-runtime"],
"presets": ["module:metro-react-native-babel-preset"]
}

Android

  • 更新您的 Android 主活动，以便应用程序在用户更改语言环境时重新加载
  • 在 AndroidManifest.xml 的 android:configChanges 中添加 "locale|layoutDirection"。 这将在设备语言更改时重新启动应用程序，并将加载正确的翻译。
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|layoutDirection|locale"
  • 将演示应用程序的 i18n 文件夹中的文件复制到您的应用程序中。 在下面找到每个文件的说明

NativeFbtModule.js

FbtI18nNativeAssets.js

  • 本机模块周围的 JavaScript 包装器
  • 实现翻译的本地缓存，以避免不必要的本机端访问
  • react-native-fbt 包中的 Android Native Module 用于从 Android 资源读取翻译。 此模块从 android/raw-xx-rXX/localizable.json 文件读取翻译，其中 xx/XX 分别是 languageCode-countryCode（有关 Android 资源命名的更多信息，请参见此处），结构如下

{ "2keTtB": "\"扫描二维码\"", "24DJ19": "\"上传\"", }

哈希值是由 collectFbt 脚本生成的 jenkins' 哈希。 请注意翻译字符串中转义的引号，因为此文件将被您的应用程序转换为 JSON。

getTranslatedInput.js

  • React Native 特定的 Hook，用于告诉 FBT 包如何在您的应用程序中加载字符串

fbtInit.js

  • 将 getTranslatedInput Hook 注入到 FBT 中
  • 必须在您的应用程序的入口文件中导入此文件，才能在任何其他导入之前，使 FBT 可用于您可能需要在应用程序中翻译的任何静态字符串。 在我们的 index.js 中查看一个示例

iOS

  • 添加本机模块后，运行 cd ios/ && pod install 以将新模块添加到您的应用程序
  • 添加您希望您的应用程序支持的语言
    • 将文件命名为 Localizable.strings，因为这是本机模块在查找翻译时会寻找的文件

注意：请记住，在 iOS 上编写翻译字符串时，需要转义引号。 在 我们的测试应用中查看一个示例。

在您的 package.json 文件中添加 FBT 脚本

  • 在 package.json 中添加 manifest 脚本调用。 此脚本查找所有导入 fbt 的文件，并为下面的 collectFbt 脚本创建输入
"manifest": "fbt-manifest --src src/ --enum-manifest i18n/fbt/.enum_manifest.json --src-manifest i18n/fbt/.src_manifest.json"
  • 在 package.json 中添加 collectFbt 脚本调用。 此脚本将所有 fbt 包装的字符串收集到一个文件中，供您翻译。
"collect-fbts": "fbt-collect --hash-module fb-tiger-hash --react-native-mode --manifest < i18n/fbt/.src_manifest.json > i18n/fbt/.source_strings.json"
  • 在 package.json 中添加 translate 脚本调用。 应该在所有字符串都翻译完后使用此脚本。 它将生成一个包含所有翻译的单个文件，然后我们需要将其翻译成 Android 特定的 localizable.json 文件。 在 此处查看输入格式。
"translate-fbts": "fbt-translate --jenkins --source-strings i18n/fbt/.source_strings.json --translations i18n/fbt/translationScriptInput/*.json > i18n/fbt/translatedFbts.json"
  • 为每种语言生成 localizable.json 文件，并将它们添加到相应的 res/raw-xx-rXX 文件夹（xx 是 ISO 2 字母语言代码，XX 是 ISO 2 字母国家/地区代码）。 您可以在我们的测试应用中找到一个辅助脚本： generate-android-localizables.js。 此脚本接收翻译脚本输出，并在 android/res 文件夹中生成 localizable.json 文件
res
├── raw
│ └── localizable.json
├── raw-es-rES
│ └── localizable.json
└── values
├── strings.xml
└── styles.xml

注意

<TextInput placeholder={fbt("Text", "Description").toString()} />

上次更新时间为 作者：David