react native 國際化(多語言)

應留言的要求，我以爲須要花點時間整理一下關於多語言的資料了，獻給各位小夥伴但願能帶給你們一些思路。因爲一些特殊的緣由上圖項目很差作爲開源項目提供給你們，因此我本身寫了一個小demo（ 源碼見文尾），廢話很少說開始正題。

準備階段：

• react-native-i18n 第三方多語言庫 安裝: yarn add react-native-i18n
• react-native-device-info 用戶獲取系統本地語言環境 安裝: yarn add react-native-device-info and react-native link react-native-device-info

實踐階段：

在項目中建立zh.js、en.js、I18n.js三個js文件，DataRepository.js是一個我自定義的數據持久化類，在這個demo中的做用是存取用戶改變後的語言環境，直接拷貝過去就能夠用(不是必須的)。

代碼分別爲： 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文件中的語言配置項

具體顯示內容會隨着語言環境調用相應的語言配置文件，呈現給用戶相應的語言內容。

• I18n.getLanguages 獲取用戶首選的語言環境
• I18n.locale : 設置本地語言環境。
• I18n.defaultLocale 首選默認語言
• I18n.fallbacks : 看文檔說明我理解的意思是：若是獲取到的系統語言相似en_US en-GB這樣的，插件初始化的時候發現沒有en_US.js en-GB.js，這個時候若是設置了I18n.fallbacks = true;系統就會按這樣的（en_US en.js）順序去查找文件，就會去找有一個en.js這樣的文件， 官方建議使用I18n.fallbacks = true;

更多關於i18n-js 的屬性和方法請 點擊這裏查看

ios須要配置語言環境：

使用過程當中發現一個刷新的問題：

我在使用過程當中發現調用了I18n.locale=‘我設置的語言’後，當前的界面語言並無改變，而其餘界面的語言已經改變了，就好比說我上面截圖的側滑菜單，當我在側滑菜單切換語言後發現側滑菜單裏面的語言並無發現變化，而首頁的語言環境已經改變了，我不知道爲何，摸索最後找到了一種解決方案（可能不是最佳方案，可是解決了刷新當前界面語言的問題，若是有更好的方法歡迎👏分享），解決方案：調用一下setState（不管設置的這個state屬性在render中有沒有被使用，都有效）。 具體代碼看App.js，我項目中有使用localeLanguage因此我把改變後的語言存到state中

this.setState({
            localeLanguage: I18n.locale
        });
複製代碼

demo 在此 ，本次寫做到此，歡迎❤️⭐️👏指出錯誤或者發佈本身的看法探討，共勉。🤝