react native 国际化(多语言)
2018-02-28 本文已影响562人
giants_one
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
