react-native-i18n

2022-01-13 20:16:07 浏览数 (1)

一、准备阶段

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;

0 人点赞