首页 >web前端 >js教程 >React-Native全球化多语言切换工具库react-native-i18n详解

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

小云云原创: 2017-12-28 11:28:573644浏览

本文主要介绍了详解React-Native全球化语言切换工具库react-native-i18n,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

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

使用：

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

2.项目中使用

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

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

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

然后是中文的zh/index.js

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

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

2.1 默认的语言环境

我们在上面写了2种语言配置，那么哪种作为初始化的呢？在业务层调用前，我们可以先进行预设

i18n/index.js

import i18n from &#39;react-native-i18n&#39;;
import en from &#39;./en&#39;;
import zh from &#39;./zh&#39;;

i18n.defaultLocale = &#39;en&#39;;
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(&#39;home.exit&#39;),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更美味。

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

相关文章