React Native开发指南React Native开发React Native开发经验集

react native 多语言国际化组件react-nativ

2017-10-16  本文已影响2880人  目标全栈

一个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遇到的坑。

上一篇下一篇

猜你喜欢

热点阅读