React-Native配置多语言切换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';

......

{i18n.t('home.buy_me_coffee')}

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;

参考自：https://www.jianshu.com/writer#/notebooks/25412168/notes/40126075