i18next国际化语言的使用

安装

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>
//如果要切换其他语言，需要去设置更改