一個app如果想要走向國際必須要支持多語言,ios和android都可以用原生做到,但react native就比較麻煩了,最初的想法是封裝幾個js文件輸出每一個js封裝一種語言輸出,引用的時候用拼接路徑,但當我替換掉app里面所有的詞匯的時候,發現引用文件的路徑并不能拼接,這就很尷尬了。后來找到一個組件react-native-i18n,完美解決我的問題,下面放教程:
首先安裝,運行:npm install react-native-i18n --save
第二步,看你的react native版本,如果低于0.29,就運行:npm install -g rnpm 如果你的版本高于0.29則運行:react-native? link react-native-i18n (這個命令可以幫你自動配置環境,并且不會影響到其它需要link的組件);
如果你不想要自動配置的話,可以參考下面手動配置:
1.在./android/settings.gradle文件中添加下列代碼:
include':react-native-i18n'
project(':react-native-i18n').projectDir=newFile(rootProject.projectDir,'../node_modules/react-native-i18n/android')
2.在./android/app/build.gradle文件中加入下列代碼:
compile project(':react-native-i18n')
3.在./android/app/src/main/java/your/bundle/MainApplication.java中添加如下代碼:
importcom.AlexanderZaytsev.RNI18n.RNI18nPackage;
newRNI18nPackage()
完成之后去./android/build.gradle文件中看下這里:
如果不是25.0.2的話最好改為25.0.2,我并不確定一定要這樣做,但如果你的編譯出錯了,請修改這里。
全部改完之后請重新react-native run-android!!!
如果不重新跑的話是調用不了方法的。
做完之后就可以開始使用了,首先直接調用:
這樣先試試看是否可以使用了,如果可以使用,那我們就來封裝各種語言:
首先自己在項目新建一個文件夾名字隨意:
在文件夾內新建你需要的語言的js文件,我這里做一個英文和法語的js:
里面寫上對應的語言:
請注意,js的名字最好都是語言的縮寫,下面提供參考:
最后封裝方法,新建一個文件:
引用兩個文件,然后調用:
這樣就完成了,來看結果:
系統改為英語:
突然有個想法看看沒有支持的語言會變成什么:
看來如果沒有支持某種語言就會默認使用英語,我曾經試過分別調換這兩個的引入順序發現結果還是英語
這樣就可以實現react native的國際化了。
抱歉并不是我不想貼代碼,而是我現在是win10環境,我找不到哪里有貼代碼的選項,簡書確實不夠人性化,我寫一篇教程比我調試一個組件還要難。希望諸位誰知道如何貼代碼的話告訴我一下好嗎?
喜歡的的點一下贊,加個關注,我會持續更新各種react native遇到的坑。