Taro国际化 taro-i18n组件

1.安装插件,在项目的根目录下打开命令行,执行

npm i --save taro-i18n

2.创建 locales.ts文件 ,例子中是放在utils文件夹下的,实际上你可以将该文件放在你项目的任意位置

//locales.ts文件内容
export default function get(value: any={}): any{
  return {

    //en 和 zh是语言类型,可以新增语言或重命名
    'en': {
      'test': 'this is test text',
      'testParam': `Resend in ${value.time} s`,
      'testMultiParam': value.name+'go to'+value.school
    },
    'zh': {
      'test': '这是测试文本',
      'testParam': `${value.time}秒后重发`,
      'testMultiParam': value.name+'去上'+value.school
    }
  }
}

3. 在app文件(app.tsx或app.js,根据你的项目使用的是ts还是js决定,以下是ts的例子)中引入组件,并初始化组件

//文件最上方引入组件
import i18n from 'taro-i18n'

//导入步骤2中你建的 locales.ts文件,我是放在utils文件夹下,具体以你实际位置为准
import locales from './utils/locales'


//在生命周期方法中初始化组件
componentWillMount(){

  //1.使用系统语言的初始化方法,第一个参数是:语言类型 第二个参数是:词语仓库
  // Taro.getSystemInfo().then((result)=>{
  //   i18n.t = new i18n(result.language,locales)
  // })

  //2.使用给定的语言初始化方法,第一个参数是:语言类型 第二个参数是:词语仓库
  i18n.t = new i18n('zh',locales)
}

4. 简单使用

在页面或组件中引用 import i18n from 'taro-i18n' 在需要的地方 i18n.t._('test'),显示效果 '这是测试文本'

5. 带参数使用

同样需要在页面或组件中引用 import i18n from 'taro-i18n'

//locales.ts 中
'testParam': `${value.time}秒后重发`,

也可以用其他写法,作用一样

 //locales.ts 中
 'testParam': value.time+'秒后重发',

使用i18n.t._('testParam',{'time':'60'}) 显示效果 '60秒后重发'

可以有多个参数,但注意参数名一致,列如这里的 time 对应 value.time,多参数例子如下:

 //locales.ts 中
 'testMultiParam': value.name+'去上'+value.school,

使用i18n.t._('testMultiParam',{'name':'小明','school':'明珠小学'}) 显示效果 '小明去上明珠小学'

6.手动修改语言类型

i18n.t.setLocale('en')

7.以上步骤即可正常使用国际化组件

附上github地址:https://github.com/MinaAndLuoXia/Taro-i18n 好用可以去点星