一、准备阶段
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;