国际化i18next+react-i18next

440 阅读2分钟

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.配置及初始化

  1. 在src下新建i18n文件夹,在该文件下新建三个文件:
    -config.ts
    -en.json
    -zh.json
  2. config.ts文件的写法
  3. 在app的index.tsx中引入配置
    import './i18n/config'
  4. 在函数式组件中使用


  5. 切换语言及获取语言(基本逻辑):

    i18n.language 可以直接获得当前的语言
    i18n.changeLanguage(lang: string) 切换到当前参数的语言

拓展的使用方法

  1. 返回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"

  1. 插值表达式的用法
    i18next 提供了插值的用法以用于在翻译的内容中存在变量的情况

在翻译的文本中添加插值名称:

en: {

translation: { // 这里是我们的翻译文本

Test: 'this is test, count is {{count}}' //添加插值名称

}

}

在标签中使用时的写法:
<p> {t('test', { count: count })} </p> // t函数第二个参数是返回值的配置项,添加变量名称

更多请看官方文档

www.i18next.com/