5ACF79A333C7F62349D712BC29EC5BA9.jpg
C8412602F259771C656EF19DD62A93A0.jpg
B20051984E994AB1EE5588476BE245B7.jpg
應留言的要求，我覺得需要花點時間整理一下關於多語言的資料了，獻給各位小夥伴希望能帶給大家一些思路。由於一些特殊的原因上圖項目不好做爲開源項目提供給大家，所以我自己寫了一個小demo（
源碼見文尾），廢話不多說開始正題。
準備階段：
-
react-native-i18n 第三方多語言庫
安裝:yarn add react-native-i18n -
react-native-device-info 用戶獲取系統本地語言環境
安裝:yarn add react-native-device-infoandreact-native link react-native-device-info
實踐階段：
在項目中創建zh.js、en.js、I18n.js三個js文件，DataRepository.js是一個我自定義的數據持久化類，在這個demo中的作用是存取用戶改變後的語言環境，直接拷貝過去就可以用(不是必須的)。
image.png
代碼分別爲：
zh.js
export default {
english: '英文',
chinese: '中文',
changeToEnglish: '切換到英文',
changeToChinese: '切換到中文',
changeToSystem: '切換到系統語言',
}
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 };
重點方法、屬性講解
-
I18n.t(): 使用頻率是最高的，舉個栗子：
<Text style={styles.welcome}>
{I18n.t('english')}
</Text>
以上I18n.t('english')中的english參數就是在zh.js、en.js文件中的語言配置項
image.png
image.png
具體顯示內容會隨着語言環境調用相應的語言配置文件，呈現給用戶相應的語言內容。
-
I18n.getLanguages獲取用戶首選的語言環境 -
I18n.locale: 設置本地語言環境。 -
I18n.defaultLocale首選默認語言 -
I18n.fallbacks: 看文檔說明我理解的意思是：如果獲取到的系統語言類似en_USen-GB這樣的，插件初始化的時候發現沒有en_US.jsen-GB.js，這個時候如果設置了I18n.fallbacks = true;系統就會按這樣的（en_USen.js）順序去查找文件，就會去找有一個en.js這樣的文件， 官方建議使用I18n.fallbacks = true;
更多關於i18n-js 的屬性和方法請 點擊這裏查看
ios需要配置語言環境：
image.png
使用過程中發現一個刷新的問題：
我在使用過程中發現調用了I18n.locale=‘我設置的語言’後，當前的界面語言並沒有改變，而其他界面的語言已經改變了，就比如說我上面截圖的側滑菜單，當我在側滑菜單切換語言後發現側滑菜單裏面的語言並沒有發現變化，而首頁的語言環境已經改變了，我不知道爲什麼，摸索最後找到了一種解決方案（可能不是最佳方案，但是解決了刷新當前界面語言的問題，如果有更好的方法歡迎👏分享），解決方案：調用一下setState（無論設置的這個state屬性在render中有沒有被使用，都有效）。 具體代碼看App.js，我項目中有使用localeLanguage所以我把改變後的語言存到state中
this.setState({
localeLanguage: I18n.locale
});
image.png
image.png