如何基于@azure/communication-react为自定义Web通话应用实现本地化？

1. 核心逻辑：用LocalizationProvider管理语言上下文 #

不管是否使用官方ControlBar，LocalizationProvider都是库中管理全局本地化的核心组件。它会为所有内置组件（包括你用到的MicrophoneButton、EndCallButton）提供语言资源支持，是实现需求的基础。

2. 默认获取操作系统语言 #

通过浏览器API获取系统语言，映射为库支持的语言代码（如zh-CN、en-US）：

// 兼容不同浏览器的语言获取方式
const getSystemLocale = () => {
  const systemLang = navigator.language || navigator.userLanguage;
  // 对语言代码做简化适配，比如将zh-TW、zh-HK统一映射为zh-CN（根据实际需求调整）
  return systemLang.startsWith('zh') ? 'zh-CN' : systemLang.split('-')[0];
};

3. 初始化语言并包裹应用 #

在应用根组件中，用LocalizationProvider包裹所有通话相关组件，初始化语言为系统默认值：

import { LocalizationProvider } from '@azure/communication-react';
import { useState } from 'react';

function CallApp() {
  // 初始语言设为系统语言
  const [currentLocale, setCurrentLocale] = useState(getSystemLocale());

  return (
    <LocalizationProvider locale={currentLocale}>
      {/* 自定义控制栏组件 */}
      <CustomControlBar 
        currentLocale={currentLocale} 
        setCurrentLocale={setCurrentLocale} 
      />
      {/* 其他通话核心组件（如CallAgent、VideoGallery等） */}
    </LocalizationProvider>
  );
}

4. 实现手动切换语言功能 #

在你的自定义控制栏中添加语言切换控件，通过更新currentLocale触发全局语言切换：

function CustomControlBar({ currentLocale, setCurrentLocale }) {
  // 定义支持切换的语言列表
  const supportedLocales = [
    { code: 'en-US', name: 'English' },
    { code: 'zh-CN', name: '中文' },
    { code: 'es-ES', name: 'Español' }
  ];

  return (
    <div className="custom-control-bar">
      {/* 内置按钮组件会自动读取LocalizationProvider的语言配置 */}
      <MicrophoneButton />
      <EndCallButton />
      
      {/* 语言切换下拉框 */}
      <select 
        value={currentLocale}
        onChange={(e) => setCurrentLocale(e.target.value)}
      >
        {supportedLocales.map(lang => (
          <option key={lang.code} value={lang.code}>{lang.name}</option>
        ))}
      </select>
    </div>
  );
}

5. 自定义文本的本地化（可选） #

如果控制栏中有自定义文本需要本地化，可以通过useLocalization钩子获取当前语言的资源，或自定义资源覆盖默认值：

import { useLocalization } from '@azure/communication-react';

function CustomStatusText() {
  const { strings } = useLocalization();
  // 使用库内置的本地化文本
  return <span>{strings.call?.connectionStatus?.connected}</span>;
}

// 若需自定义资源，可在LocalizationProvider中传入strings属性
<LocalizationProvider
  locale={currentLocale}
  strings={{
    call: {
      endCall: '终止通话' // 覆盖默认的结束通话文本
    }
  }}
>
  {/* 应用内容 */}
</LocalizationProvider>

内容的提问来源于stack exchange，提问作者Trupti