react-native-i18n
原创
一、准备阶段
1.react-native-i18n第三方多语言库
使用yarn：yarn add react-native-i18n；
使用npm：npm install react-native-i18n --save；
2.react-native link react-native-i18n
二、项目中使用
1.首先是新建英文版本的配置文件，en/index.js
export default {
home: {
tab_home: 'Home',
tab_demo: 'Demo',
exit: 'exit?',
},
demo: {
dialog: 'dialog',
button: 'button',
switch: 'switch',
}
};
2.然后是中文的zh/index.js
export default {
home: {
tab_home: '首页',
tab_demo: '例子',
exit: '是否退出?',
},
demo: {
dialog: '提示框',
button: '按钮',
switch: '开关',
}
};
3.默认的语言环境
上面写了2种语言配置，那么哪种作为初始化的呢？在业务层调用前，我们可以先进行预设
新建文件i18n/index.js
import i18n from 'react-native-i18n';
import en from './en';
import zh from './zh';
i18n.defaultLocale = 'en';
i18n.fallbacks = true;
i18n.translations = {
en,
zh,
};
export {i18n};
这边进行了一些预设，默认语境为en，允许fallbacks状态（为true时，顺序向下遍历翻译），预设转换的文件就2个，一个en一个zh，这个你也可以自行后续添加根据需求而定。
4.页面调用
import {i18n} from './src/i18n/index';
......
<Text>{i18n.t('home.buy_me_coffee')}</Text>
I18n.t('home')中的home参数就是在zh.js、en.js文件中的语言配置项。
具体显示内容会随着语言环境调用相应的语言配置文件，呈现给用户相应的语言内容。
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;
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。