一、初始化语言包
App 初始化时你需要在 App.tsx 文件中给翻译引擎注册语言包并进行初始化。
import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';import uikitResources from '@tencentcloud/chat-uikit-react-native/i18n'; // Init localization TUITranslateService.provideLanguages(uikitResources); TUITranslateService.useI18n('en-US');
二、切换语言
如果你的 App 中有切换语言入口,在你切换语言时可以调用 TUITranslateService.changeLanguage 实现语言切换功能。
import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';// language 是你切换后的目标语言TUITranslateService.changeLanguage(language)
三、添加 App 语言资源
如果你的 App 中除了 UIKit,还需要对其他页面(例如: Login 页、Setting 页)进行翻译,你可以在 App 根目录中创建 i18n 资源目录添加相应的词条,通过 TUITranslateService 来翻译,可以按照以下示例代码进行初始化,示例代码默认在你项目的根目录下有 i18n 目录。
import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';import uikitResources from '@tencentcloud/chat-uikit-react-native/i18n';import appResources from './i18n'; // Init localizationTUITranslateService.provideLanguages({ 'en-US': { …appResources['en-US'], …uikitResources['en-US'], }, 'zh-CN': { …appResources['zh-CN'], …uikitResources['zh-CN'], },}); TUITranslateService.useI18n('en-US');
四、更新词条翻译
如果默认的词条翻译不满足你的需求,你可以更新词条翻译,可以按照如下步骤进行更新。
从 node_modules/@tencentcloud/chat-uikit-react-native/ 中复制 i18n 放到你项目的根目录下,并重命名为 i18n-uikit , 根据需要对翻译内容进行修改。修改完成后, uikitResources 修改为从你本地 import。
import uikitResources from './i18n-uikit';
五、新增语言类型
如果你需要新增一种语言,可以从 node_modules/@tencentcloud/chat-uikit-react-native/i18n 中复制 en-US 放到你项目的根目录下的 i18n 中, 并命名为新语言的名字(例如: 'zh-TW') , 并对翻译内容进行修改即可。
六、使用翻译接口
如果你的 App 需要使用翻译引擎提供的翻译能力,可以按照如下方式使用。
例如你新增了一个 Login 模块的翻译词条,需要对 【用户名】实现国际化,Login 模块词条定义如下:
en-US :
export const Login = { USER_NAME: 'UserName',};
zh-CN :
export const Login = { USER_NAME: '用户名',};
在 Login 页面中使用翻译函数:
import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';TUITransalteService.t('Login.USER_NAME')
关于切换语言如何实现,你可以参见 UIKit Demo 源码 。