即时通信 IM React Native(国际化语言)

React Native UIKit 默认自带 英语、简体中文 语言包作为界面展示语言。根据此文档指引,可以以使用默认语言包,也可以根据你的需要实现定制化的国际化能力,包括新增语言,更新词条翻译内容。

相关产品
即时通信 IM 产品页,含版本规格、价格与购买入口。

一、初始化语言包

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 源码 。

赞 (0)
上一篇 4天前
下一篇 4天前