基本用法
安装依赖包
npm i i18next react-i18next i18next-browser-languagedetector --save
i18next 提供了翻译的基本能力;
react-i18next 是 i18next 的一个插件,用来降低 react 的使用成本;
i18next-browser-languagedetector 是用来检测浏览器语言的插件。
创建项目目录
在项目入口文件同级,创建如下目录和文件
封装配置插件
i18n.tsx代码
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import enUsTrans from './en-us.json'
import zhCnTrans from './zh-cn.json'
i18n
// 检测用户当前使用的语言
// 文档: https://github.com/i18next/i18next-browser-languageDetector
.use(LanguageDetector)
// 注入 react-i18next 实例
.use(initReactI18next)
// 初始化 i18next
// 配置参数的文档: https://www.i18next.com/overview/configuration-options
.init({
debug: true,
// supportedLngs: ['zh', 'en'],
//选择默认语言,选择内容为上述配置中的key,即en/zh
fallbackLng: 'en',
interpolation: {
// not needed for react as it escapes by default
escapeValue: false,
},
resources: {
en: {
// 这里是我们的翻译文本
translation: enUsTrans
},
zh: {
translation: zhCnTrans
}
}
});
export default i18n;
en-us.json是经过专业人士的翻译JSON文件,列举部分代码
{
"Dashboard": "Dashboard",
"Guide": "Guide",
"FAQ": "FAQ",
...
}
zh-cn.json是对应的中文JSON文件,列举部分代码
{
"Dashboard": "看板",
"Guide": "操作指南",
"FAQ": "常见问题",
...
}
在入口文件中引入插件
import './locales/i18n.tsx'
在组件中使用时
import { useTranslation, Trans } from 'react-i18next';
const Component = () => {
const { t } = useTranslation();
return (
<div>
{t('Dashboard')}
</div>
);
}
export default Component;