当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 详解React-Native全球化多语言切换工具库react-native-i18n

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

开篇啰嗦–阶段感悟

最近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翻译库，他支持各种格式和内容的换算和语言内容的切换，地址如下：

那么翻译转换这块是 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更美味。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网