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


Posted in Javascript onNovember 03, 2017

开篇??篓C阶段感悟

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

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

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

废话??峦炅耍?瞎婢兀?a rel="external nofollow" target="_blank" href="https://github.com/ddwhan0123/Useful-Open-Source-Android">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);

两种输出结果如下:

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

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

源码分析

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

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

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

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

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();

效果如下:

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

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

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

总结:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 图片切换插件(代码比较少)
May 07 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 #Javascript
微信小程序自动客服功能
Nov 02 #Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 #Javascript
微信小程序实现图片放大预览功能
Oct 22 #Javascript
极简主义法编写JavaScript类
Nov 02 #Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 #Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 #Javascript
You might like
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
浅析php工厂模式
2014/11/25 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
Python OS模块常用函数说明
2015/05/23 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
英语专业毕业个人求职自荐信
2013/09/21 职场文书
电厂厂长岗位职责
2014/01/02 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
《四季》教学反思
2014/04/08 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
企业职业病防治方案
2014/05/29 职场文书
新党章心得体会
2014/09/04 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
现货白银电话营销话术
2015/05/29 职场文书
爱国主义主题班会
2015/08/14 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
Win11查看设备管理器
2022/04/19 数码科技