即时通信 IM React（国际化语言）

一、概述

·en-US – 英语（美国）

·zh-CN – 简体中文

·zh-TW – 繁体中文

·ja-JP – 日语

·ko-KR – 韩语

·auto – 自动检测

其中，自动检测（auto）会按以下优先级选择语言：

1. 浏览器语言设置。

2. 系统语言设置。

3. 默认回退到 en-US。

二、基础配置

请使用 UIKitProvider 包装你的应用，并配置语言选项：

import React from 'react';import { UIKitProvider } from '@tencentcloud/chat-uikit-react';function App() { return ( <UIKitProvider language="zh-CN"> <YourApp /> </UIKitProvider> );}

三、在组件外切换语言

import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-react';function App() { const [lang, setLang] = useState<'en-US' | 'zh-CN' | 'zh-TW' | 'ja-JP' | 'ko-KR'>('en-US'); return ( <div> <button onClick={() => setLang('zh-CN')}>中文</button> <button onClick={() => setLang('en-US')}>English</button> <div>{`当前的语言是: ${lang}`}</div> <UIKitProvider language={lang} theme="light" > <ConversationList /> </UIKitProvider> </div> );}

四、在组件内切换语言

在组件内可以使用 useUIKit Hook 访问国际化功能，但由于 useUIKit Hook 是基于 Context 实现的，因此不能在 <UIKitProvider /> 外部调用。

import React from 'react';import { useUIKit, UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-react';function LanguageSwitch() { const { t, language, setLanguage } = useUIKit(); return ( <div> <div>{当前的语言是: ${language}}</div> <div>{t('Search.Searching')}</div> <button onClick={() => setLanguage('en-US')}>English</button> <button onClick={() => setLanguage('zh-CN')}>中文</button> </div> );}function ChatApp() { return ( <UIKitProvider language="en-US"> <LanguageSwitch /> </UIKitProvider> );}

五、总结

UIKit React 国际化系统提供了完整的多语言支持解决方案，具有以下优势：

·简单易用：通过 Provider 模式轻松集成。

·功能完整：支持动态切换、自动检测、自定义资源。

·性能优异：基于成熟的 i18next 库。

·类型安全：完整的 TypeScript 支持。

·可扩展：支持插件和自定义配置。

遵循这篇档的实践教程，你可以构建出优秀的多语言应用体验。