react native 多语言国际化组件react-nativ
一个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遇到的坑。