安装
npm install react-i18next i18next --save
创建文件夹与文件
以下只展示了三个文件的语言例子
中文(zh_CN.json
):
{
"text":"测试",
"day":"天"
}
白俄罗斯(be_BY.json
):
{
"text":"Праверка",
"day":"дзень"
}
韩语(ko_KR.json
):
{
"text":"테스트 하 다.",
"day":"하늘."
}
引入
在src目录下创建i18n.ts
(项目是react+typescript
来写的)
再npm
安装一下 i18next-browser-languagedetector
然后下面是这个文件的所有结构
import LanguageDetector from 'i18next-browser-languagedetector';
import i18n from 'i18next';
import en_US from './locales/en_US.json';
import zh_CN from './locales/zh_CN.json';
import ko_KR from './locales/ko_KR.json';
import ja_JP from './locales/ja_JP.json';
import be_BY from './locales/be_BY.json';
import {initReactI18next} from 'react-i18next';
let lang = localStorage.getItem("language");
if (!lang) {
lang = 'zh_CN';
localStorage.setItem("language", 'zh_CN');
}
i18n
.use(LanguageDetector)
.use(initReactI18next)
.init({
resources: {
en_US: {
translation: en_US,
},
zh_CN: {
translation: zh_CN,
},
ko_KR: {
translation: ko_KR,
},
ja_JP: {
translation: ja_JP,
},
be_BY: {
translation: be_BY,
},
},
fallbackLng: lang,
debug: false,
interpolation: {
escapeValue: false,
},
});
export default i18n;
使用
在要使用的文件里使用
import i18n from './i18n'
<div>{i18n.t("day")}</div> //天
<button onClick={()=>alert(i18n.t("text"))}>测试一下</button>
//如果要切换其他语言,需要去设置更改