tencent cloud

文档反馈

React Native

最后更新时间:2024-12-19 14:28:51

    功能描述

    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 源码
    
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持