即时通信 IM React

概述
UIKit React 组件库提供了完整的国际化（i18n）解决方案，基于 i18next 构建，支持多语言动态切换，默认支持以下语言：
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 支持。
可扩展：支持插件和自定义配置。
﻿
遵循本文档的实践教程，您可以构建出优秀的多语言应用体验。 
React

本页目录：

概述

快速开始

基础配置

在组件外切换语言

在组件内切换语言

总结
