1.安裝插件,在項(xiàng)目的根目錄下打開命令行,執(zhí)行
npm i --save taro-i18n
2.創(chuàng)建 locales.ts文件 ,例子中是放在utils文件夾下的,實(shí)際上你可以將該文件放在你項(xiàng)目的任意位置
//locales.ts文件內(nèi)容
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}秒后重發(fā)`,
'testMultiParam': value.name+'去上'+value.school
}
}
}
3. 在app文件(app.tsx或app.js,根據(jù)你的項(xiàng)目使用的是ts還是js決定,以下是ts的例子)中引入組件,并初始化組件
//文件最上方引入組件
import i18n from 'taro-i18n'
//導(dǎo)入步驟2中你建的 locales.ts文件,我是放在utils文件夾下,具體以你實(shí)際位置為準(zhǔn)
import locales from './utils/locales'
//在生命周期方法中初始化組件
componentWillMount(){
//1.使用系統(tǒng)語言的初始化方法,第一個(gè)參數(shù)是:語言類型 第二個(gè)參數(shù)是:詞語倉庫
// Taro.getSystemInfo().then((result)=>{
// i18n.t = new i18n(result.language,locales)
// })
//2.使用給定的語言初始化方法,第一個(gè)參數(shù)是:語言類型 第二個(gè)參數(shù)是:詞語倉庫
i18n.t = new i18n('zh',locales)
}
4. 簡單使用
在頁面或組件中引用 import i18n from 'taro-i18n' 在需要的地方 i18n.t._('test'),顯示效果 '這是測試文本'
5. 帶參數(shù)使用
同樣需要在頁面或組件中引用 import i18n from 'taro-i18n'
//locales.ts 中
'testParam': `${value.time}秒后重發(fā)`,
也可以用其他寫法,作用一樣
//locales.ts 中
'testParam': value.time+'秒后重發(fā)',
使用i18n.t._('testParam',{'time':'60'}) 顯示效果 '60秒后重發(fā)'
可以有多個(gè)參數(shù),但注意參數(shù)名一致,列如這里的 time 對(duì)應(yīng) value.time,多參數(shù)例子如下:
//locales.ts 中
'testMultiParam': value.name+'去上'+value.school,
使用i18n.t._('testMultiParam',{'name':'小明','school':'明珠小學(xué)'}) 顯示效果 '小明去上明珠小學(xué)'
6.手動(dòng)修改語言類型
i18n.t.setLocale('en')
