5ACF79A333C7F62349D712BC29EC5BA9.jpg
C8412602F259771C656EF19DD62A93A0.jpg
B20051984E994AB1EE5588476BE245B7.jpg
應(yīng)留言的要求愈腾，我覺得需要花點(diǎn)時(shí)間整理一下關(guān)于多語言的資料了榜配，獻(xiàn)給各位小伙伴希望能帶給大家一些思路祠汇。由于一些特殊的原因上圖項(xiàng)目不好做為開源項(xiàng)目提供給大家，所以我自己寫了一個(gè)小demo（
源碼見文尾）失暂，廢話不多說開始正題彼宠。
準(zhǔn)備階段：
-
react-native-i18n 第三方多語言庫
安裝:yarn add react-native-i18n -
react-native-device-info 用戶獲取系統(tǒng)本地語言環(huán)境
安裝:yarn add react-native-device-infoandreact-native link react-native-device-info
實(shí)踐階段：
在項(xiàng)目中創(chuàng)建zh.js、en.js弟塞、I18n.js三個(gè)js文件凭峡，DataRepository.js是一個(gè)我自定義的數(shù)據(jù)持久化類，在這個(gè)demo中的作用是存取用戶改變后的語言環(huán)境决记，直接拷貝過去就可以用(不是必須的)摧冀。
image.png
代碼分別為：
zh.js
export default {
english: '英文',
chinese: '中文',
changeToEnglish: '切換到英文',
changeToChinese: '切換到中文',
changeToSystem: '切換到系統(tǒng)語言',
}
en.js
export default {
english: 'english',
chinese: 'chinese',
changeToEnglish: 'change to english',
changeToChinese: 'change to chinese',
changeToSystem: 'change to System',
}
I18n.js
import I18n,{ getLanguages } from 'react-native-i18n'
import DeviceInfo from 'react-native-device-info'
import DataRepository from '../dao/DataRepository'
import en from './en'
import zh from './zh'
I18n.defaultLocale = 'en';
I18n.fallbacks = true;
I18n.translations = {
en,
zh,
};
I18n.localeLanguage = () => {
new DataRepository().fetchLocalRepository('localLanguage')
.then((res)=>{
I18n.locale = res;
})
.catch((error)=>{
I18n.locale = DeviceInfo.getDeviceLocale();
});
return I18n.locale;
};
export { I18n, getLanguages };
重點(diǎn)方法、屬性講解
-
I18n.t(): 使用頻率是最高的霉涨，舉個(gè)栗子：
<Text style={styles.welcome}>
{I18n.t('english')}
</Text>
以上I18n.t('english')中的english參數(shù)就是在zh.js按价、en.js文件中的語言配置項(xiàng)
image.png
image.png
具體顯示內(nèi)容會(huì)隨著語言環(huán)境調(diào)用相應(yīng)的語言配置文件惭适，呈現(xiàn)給用戶相應(yīng)的語言內(nèi)容笙瑟。
-
I18n.getLanguages獲取用戶首選的語言環(huán)境 -
I18n.locale: 設(shè)置本地語言環(huán)境。 -
I18n.defaultLocale首選默認(rèn)語言 -
I18n.fallbacks: 看文檔說明我理解的意思是：如果獲取到的系統(tǒng)語言類似en_USen-GB這樣的癞志，插件初始化的時(shí)候發(fā)現(xiàn)沒有en_US.jsen-GB.js往枷，這個(gè)時(shí)候如果設(shè)置了I18n.fallbacks = true;系統(tǒng)就會(huì)按這樣的（en_USen.js）順序去查找文件，就會(huì)去找有一個(gè)en.js這樣的文件凄杯， 官方建議使用I18n.fallbacks = true;
更多關(guān)于i18n-js 的屬性和方法請 點(diǎn)擊這里查看
ios需要配置語言環(huán)境：
image.png
使用過程中發(fā)現(xiàn)一個(gè)刷新的問題：
我在使用過程中發(fā)現(xiàn)調(diào)用了I18n.locale=‘我設(shè)置的語言’后错洁，當(dāng)前的界面語言并沒有改變，而其他界面的語言已經(jīng)改變了戒突，就比如說我上面截圖的側(cè)滑菜單屯碴，當(dāng)我在側(cè)滑菜單切換語言后發(fā)現(xiàn)側(cè)滑菜單里面的語言并沒有發(fā)現(xiàn)變化，而首頁的語言環(huán)境已經(jīng)改變了膊存，我不知道為什么导而，摸索最后找到了一種解決方案（可能不是最佳方案，但是解決了刷新當(dāng)前界面語言的問題隔崎，如果有更好的方法歡迎??分享）今艺，解決方案：調(diào)用一下setState（無論設(shè)置的這個(gè)state屬性在render中有沒有被使用，都有效）爵卒。 具體代碼看App.js虚缎，我項(xiàng)目中有使用localeLanguage所以我把改變后的語言存到state中
this.setState({
localeLanguage: I18n.locale
});
image.png
image.png
