I18N Development

Tauri 国际化开发

安装 react-i18next

pnpm add i18next react-i18next i18next-browser-languagedetector

配置

i18n.ts

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";

import zhCN from "./locales/zh-CN.json";
import enUS from "./locales/en-US.json";

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      "zh-CN": { translation: zhCN },
      "en-US": { translation: enUS },
    },
    fallbackLng: "zh-CN",
    interpolation: { escapeValue: false },
  });

export default i18n;

翻译文件

// locales/zh-CN.json
{
  "app": {
    "title": "我的应用",
    "welcome": "欢迎，{{name}}！"
  },
  "menu": {
    "file": "文件",
    "edit": "编辑",
    "help": "帮助"
  },
  "action": {
    "save": "保存",
    "cancel": "取消",
    "delete": "删除",
    "confirm": "确认"
  }
}

// locales/en-US.json
{
  "app": {
    "title": "My App",
    "welcome": "Welcome, {{name}}!"
  },
  "menu": {
    "file": "File",
    "edit": "Edit",
    "help": "Help"
  },
  "action": {
    "save": "Save",
    "cancel": "Cancel",
    "delete": "Delete",
    "confirm": "Confirm"
  }
}

使用

在组件中使用

import { useTranslation } from "react-i18next";

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

  return (
    <header>
      <h1>{t("app.title")}</h1>
      <p>{t("app.welcome", { name: "Alice" })}</p>
      <select
        value={i18n.language}
        => i18n.changeLanguage(e.target.value)}
      >
        <option value="zh-CN">中文</option>
        <option value="en-US">English</option>
      </select>
    </header>
  );
}

在 main.tsx 中初始化

import "./i18n"; // 在 App 之前导入

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

常见错误