React-Native全球化语言切换工具库react-native-i18n

转载请注明出处王亟亟的大牛之路

开篇啰嗦–阶段感悟
最近2 -3个月基本都因为一些私事没怎么系统的工作和学习，途中看了几天Kotlin的东西写了些demo并且整了个小项目，但是整体状态不是很好，这些天看到些95后码农的强势细思极恐。

现在大多数醒来就已经是中午，起得早去一下健身房，起的晚就家里宅一天。公司有事或者有其他家事就去协调/沟通/处理下，整个人感觉都提前进入养老状态（当然这个锅有一半是沉迷王者荣耀不可自拔，不太好）

最近项目上基本没啥事情了，然后让手下的小伙伴们对之前做的一些内容进行二次封装，然后他们引用了一个第三方国际化的库我觉得不错，然后看了看源码就分享下，希望大家用得上（虽然现在产品的受众群都是国内的，但是准备下好像没毛病？）

废话啰嗦完了，老规矩：https://github.com/ddwhan0123/Useful-Open-Source-Android （虽然我不怎么工作了，但是git还是每天会花时间看看）

---

库属性介绍：

项目地址：https://github.com/AlexanderZaytsev/react-native-i18n

属性 解释 支持RN版本 所有版本 支持平台 iOS+Android 是否需要NativeModule 是 是否可移植 是 是否含有jni模块 否

---

使用：

1.install （略，git里都写着了，就是npm那些事）

2.项目中使用

因为是一些静态属性引用，所以你用redux做储存替换也可以，直接做饮用也可以(本文拿en,zh为例)。

首先是建英文版本的配置文件，en/index.js

export default {    home: {        greeting: 'Greeting in en',        tab_home: 'Home',        tab_donate: 'Donate',        tab_demo: 'Demo',        language: 'language',        live_demo: 'Live Demo',        buy_me_coffee: 'Buy me a coffee',        gitee: 'Gitee',        star_me: 'Star me',        donate: 'donate',        exit: 'exit?',    },    donate: {        donate: 'donate us~~~',        donate_desc: '© 2017 Pactera Technology International Limited. All rights reserved.',    },    demo: {        dialog: 'dialog',        button: 'button',        switch: 'switch',        action_sheet: 'Action Sheet',    }};

然后是中文的zh/index.js

export default {    home: {        greeting: 'Greeting in zh',        tab_home: '首页',        tab_donate: '捐赠',        tab_demo: '例子',        language: '语言',        live_demo: '例子',        buy_me_coffee: '请我一杯coffee',        gitee: 'Gitee',        star_me: '关注我',        donate: '贡献',        exit: '是否退出?',    },    donate: {        donate: '支持我们～~',        donate_desc: '© 2017 Pactera Technology International Limited. All rights reserved.',    },    demo: {        dialog: '提示框',        button: '按钮',        switch: '开关',        action_sheet: '',    }};

属性名，结构是一致的只是属性不同，当然这里是静态的2个文件，如果场景需要可以服务端下发json,那就是完全动态的了，这部分看业务需求了。

---

2.1 默认的语言环境

我们在上面写了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，这个你也可以自行后续添加根据需求而定。

---

2.2 业务层调用

先是倒包
import {i18n} from '你预设的index的目录';

调用(拿一个Toast做个例子)

 ToastAndroid.show(i18n.t('home.exit'),ToastAndroid.SHORT);

两种输出结果如下：

---

源码分析

这个库的实现分为2部分，一部分是Native的版本判断等功能以及js部分的核心实现fnando/i18n-js

i18n-js是一个轻量级的js翻译库，他支持各种格式和内容的换算和语言内容的切换，地址如下：https://github.com/fnando/i18n-js

那么翻译转换这块是 I18n.js做的那么Native做了些啥呢？我们来一探究竟(以安卓为例，苹果看不懂，抱歉)

Native代码就两个类，所以我之前说你直接把Native代码copy走然后项目依赖I18n.js也能达到这个效果

RNI18nPackage是一个普通的Package类，它的作用就是把我们的module加到主应用的getPackages()方法中的列表里，然后一起打进包里而已。

具体功能都在RNI18nModule里

public class RNI18nModule extends ReactContextBaseJavaModule {  public RNI18nModule(ReactApplicationContext reactContext) {    super(reactContext);  }  //RN调用的控件名  @Override  public String getName() {    return "RNI18n";  }  //对取出的Locale列表进行格式化的方法  private String toLanguageTag(Locale locale) {    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {      return locale.toLanguageTag();    }    StringBuilder builder = new StringBuilder();    builder.append(locale.getLanguage());    if (locale.getCountry() != null) {      builder.append("-");      builder.append(locale.getCountry());    }    return builder.toString();  }  private WritableArray getLocaleList() {    WritableArray array = Arguments.createArray();    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {      //获取区域设置列表。这是获取区域的首选方法。      LocaleList locales = getReactApplicationContext()          .getResources().getConfiguration().getLocales();      for (int i = 0; i < locales.size(); i++) {        array.pushString(this.toLanguageTag(locales.get(i)));      }    } else {      array.pushString(this.toLanguageTag(getReactApplicationContext()          .getResources().getConfiguration().locale));    }    return array;  }  //js端可获取属性的列表  @Override  public Map<String, Object> getConstants() {    HashMap<String, Object> constants = new HashMap<String,Object>();    constants.put("languages", this.getLocaleList());    return constants;  }  //提供给js端调用的方法，用来获取默认的语言环境，回调方式用的是promise  @ReactMethod  public void getLanguages(Promise promise) {    try {      promise.resolve(this.getLocaleList());    } catch (Exception e) {      promise.reject(e);    }  }}

加一个toast看下locale会出现什么

Toast.makeText(getReactApplicationContext(),"locales.get(i) "+locales.get(i),Toast.LENGTH_LONG).show();

效果如下：

本想一探究竟内部的实现，结果是个不公开的类

总结：

首先Native那里获取本手机的LocaleList然后格式化取第一个元素交由I18n.js处理，然后I18n.js根据key选用一套有效的语言规则，再之后流程就和使用时候的顺序一样了。
整个库集成难度较低，使用起来比较简便，使用下来没碰到大坑，配合redux更美味。

---

demo项目会在完成第一版功能后开源，所以暂时还没有将该项目源码放出，敬请期待

有问题可以微信联系，当然得注明来意，不添加备注不会通过，谢谢（私人微信 非诚勿扰）

以后会同步微信发布，扫麦麦的码可以关注