React.js Web应用添加乌尔都语支持及双语适配技术咨询

绝对有可行方案！我之前帮项目做过乌尔都语的适配，给你整理一套完整的流程，涵盖国际化、布局适配和输入支持：

最成熟的方案是用 i18next + react-i18next，它不仅支持多语言切换，还能完美适配乌尔都语这种从右到左（RTL）的语言。

步骤1：安装依赖 #

先把需要的包装上：

npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector

• i18next：核心国际化库
• react-i18next：React 绑定层
• i18next-http-backend：从远程加载翻译文件
• i18next-browser-languagedetector：自动检测浏览器语言

步骤2：配置 i18n 实例 #

在项目根目录创建 i18n.js 文件：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend) // 加载远程翻译文件
  .use(LanguageDetector) // 自动检测语言
  .use(initReactI18next) // 绑定 React i18next
  .init({
    fallbackLng: 'en', // 默认语言
    debug: false,
    interpolation: {
      escapeValue: false, // React 已经自动转义，不需要额外处理
    },
    supportedLngs: ['en', 'ur'], // 支持的语言
  });

export default i18n;

然后在 index.js 里导入这个配置：import './i18n';

步骤3：准备翻译文件 #

在 public 目录下创建翻译文件结构：

public/
└── locales/
    ├── en/
    │   └── translation.json
    └── ur/
        └── translation.json

en/translation.json 示例：

{
  "welcome": "Welcome to our App",
  "switch_lang": "Switch to Urdu",
  "enter_text": "Enter your text here"
}

ur/translation.json 示例：

{
  "welcome": "خوش آمدید",
  "switch_lang": "انگریزی میں تبدیل کریں",
  "enter_text": "اپنا یہاں متن درج کریں"
}

步骤4：在组件中使用翻译 #

用 useTranslation Hook 轻松获取翻译文本，还能实现语言切换：

import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();

  const toggleLanguage = () => {
    const newLang = i18n.language === 'en' ? 'ur' : 'en';
    i18n.changeLanguage(newLang);
  };

  return (
    <div className={i18n.language === 'ur' ? 'rtl' : ''}>
      <h1>{t('welcome')}</h1>
      <button onClick={toggleLanguage}>{t('switch_lang')}</button>
      {/* 输入框部分后面单独讲 */}
    </div>
  );
}

export default App;

乌尔都语是从右到左书写的，所以必须调整页面布局方向，否则内容会错乱：

方法1：CSS 动态切换方向 #

在你的全局 CSS 文件里添加：

.rtl {
  direction: rtl;
  text-align: right;
}

.rtl .some-left-aligned-component {
  text-align: left; /* 个别需要保持左对齐的组件单独调整 */
}

然后像上面的示例一样，给根元素动态添加 rtl 类，就能让整个页面适配乌尔都语的阅读方向。

方法2：用 Tailwind CSS（如果用的话） #

Tailwind 自带 RTL 支持，只要配置好，就能用 dir="rtl" 或者 rtl: 前缀来调整样式，比如：

<div dir={i18n.language === 'ur' ? 'rtl' : 'ltr'}>
  <h1 className="rtl:text-right ltr:text-left">{t('welcome')}</h1>
</div>

现代浏览器默认支持乌尔都语输入，只要用户系统安装了乌尔都语输入法就行，但我们可以做一些优化提升体验：

1. 翻译占位符 #

把输入框的 placeholder 也用翻译文本，让用户更清晰：

<input 
  type="text" 
  placeholder={t('enter_text')}
  className={i18n.language === 'ur' ? 'rtl' : ''}
/>

2. 自动切换输入方向 #

可以监听输入内容，自动判断是乌尔都语还是英语，切换输入框的方向：

import { useState, useEffect } from 'react';

function UrduInput() {
  const [value, setValue] = useState('');
  const [direction, setDirection] = useState('ltr');

  // 匹配乌尔都语/阿拉伯语字符的正则
  const urduRegex = /[\u0600-\u06FF]/;

  useEffect(() => {
    if (urduRegex.test(value)) {
      setDirection('rtl');
    } else {
      setDirection('ltr');
    }
  }, [value]);

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      style={{ direction }}
      placeholder="متن درج کریں / Enter text"
    />
  );
}

3. 限制仅输入乌尔都语（可选） #

如果需要输入框只能接收乌尔都语文本，可以添加验证：

const handleInput = (e) => {
  const urduOnlyRegex = /^[\u0600-\u06FF\s]*$/;
  if (urduOnlyRegex.test(e.target.value) || e.target.value === '') {
    setValue(e.target.value);
  }
};

• 翻译文件要找懂乌尔都语的人核对，避免翻译错误
• 测试不同设备的乌尔都语输入法，确保输入流畅
• 一些第三方组件（比如日期选择器、表格）可能需要单独适配 RTL 布局，建议查看组件文档的 RTL 支持

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