tencent cloud

React Native
下载PDF
最后更新时间：2024-12-19 14:28:51
React Native
最后更新时间： 2024-12-19 14:28:51
下载PDF

功能描述

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





使用默认语言包

初始化语言包

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 localization
TUITranslateService.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 ：



在 Login 页面中使用翻译函数：
import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
TUITransalteService.t('Login.USER_NAME')
关于切换语言如何实现，您可以参见 UIKit Demo 源码 。

本页内容是否解决了您的问题？
您也可以 联系销售 或 提交工单 以寻求帮助。
是
否

文档反馈