i18next的优势
· 基于i18next不仅限于react,学一次就可以用在其它地方,例如vue等前端框架
· 提供多种组件在hoc、hook和class的情况下进行国际化操作
· 技术和文档相对成熟,目前还没有i18next解决不了的国际化问题
· 插件的支持,比如可以用插件检测当前系统的语言环境
· 适合服务端的渲染
i18next+react-i18next使用方法:
1.安装i18next和react-i18next
npm install react-i18next i18next --save
或
yarn add react-i18next i18next --save
2.配置及初始化
- 在src下新建i18n文件夹,在该文件下新建三个文件:
-config.ts
-en.json
-zh.json - config.ts文件的写法
- 在app的index.tsx中引入配置
import './i18n/config' - 在函数式组件中使用
- 切换语言及获取语言(基本逻辑):
i18n.language 可以直接获得当前的语言
i18n.changeLanguage(lang: string) 切换到当前参数的语言
拓展的使用方法
- 返回object和数组:
t函数默认返回字符串,但是通过配置参数可以返回object和array参数:
eg:语言json文件:
{
"object":{
"res1":"a",
"res2":"b"
},
"array":['a','b','c']
}
返回object:t('object',{returnObjects:true});
返回数组: t('array',{returnObjects:true});
并支持合并数组:在init时配置参数{ joinArrays: true },
i18n.t('array',{joinArrays:'+'}); // -> "line1+line2+line3"
- 插值表达式的用法
i18next 提供了插值的用法以用于在翻译的内容中存在变量的情况
在翻译的文本中添加插值名称:
en: {
translation: { // 这里是我们的翻译文本
Test: 'this is test, count is {{count}}' //添加插值名称
}
}
在标签中使用时的写法:
<p> {t('test', { count: count })} </p> // t函数第二个参数是返回值的配置项,添加变量名称