React Native 和 Expo
使用 i1n SDK 或 i18n-js 的 Bridge Mode 将 i1n 与 React Native 和 Expo 集成。
设置
在你的 React Native 项目中运行 i1n init。CLI 会自动检测 expo-localization(如果已安装),并配置 locales/ 目录中的 JSON 格式。
您可以独立使用 i1n SDK,也可以通过 Bridge Mode 将其连接到 i18n-js。
独立模式
直接使用 i1n SDK 配合 expo-localization 进行设备地区检测。使用 init() 初始化,加载您的资源,并在组件中使用 t()。
React provider 模式与 React Web 项目的工作方式完全相同。使用 useI1n() hook 可实现类型安全的翻译和运行时 locale 切换。
使用 i18n-js 的桥接模式
如果您的项目使用 i18n-js,请使用以下方式连接:registerI1n((key, params) => i18n.t(key, params))。i1n 的 t() 函数会委托给 i18n-js,同时提供严格的类型检查和自动补全。
i1n 管理翻译文件和类型生成。i18n-js 继续处理运行时复数和插值。适用于 Expo 管理和原生 React Native 工作流。
部署
在构建应用程序之前运行 i1n pull。翻译会与应用程序二进制文件一起打包。
为了实现无线翻译更新,请将 i1n pull 与您的 OTA 更新策略(例如 Expo Updates 或 CodePush)结合使用。
App.tsx
import * as Localization from 'expo-localization'
import { I18n } from 'i18n-js'
const i18n = new I18n(translations)
i18n.locale = Localization.locale
<Text>{i18n.t('welcome')}</Text> Bridge Mode — src/i18n.ts
import { registerI1n } from 'i1n'
import { I18n } from 'i18n-js'
const i18n = new I18n(translations)
registerI1n((key, params) => i18n.t(key, params))