位置: 编程技术 - 正文
推荐整理分享详解React-Native全球化多语言切换工具库react-native-i18n(react native community),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:react-native-elements,react-native-reanimated,react native realm,react-native-elements,react native realm,react-native-fs,react native realm,react-native-reanimated,内容如对您有帮助,希望把文章链接给更多的朋友!
开篇??篓C阶段感悟
最近2 -3个月基本都因为一些私事没怎么系统的工作和学习,途中看了几天Kotlin的东西写了些demo并且整了个小项目,但是整体状态不是很好,这些天看到些后码农的强势细思极恐。
现在大多数醒来就已经是中午,起得早去一下健身房,起的晚就家里宅一天。公司有事或者有其他家事就去协调/沟通/处理下,整个人感觉都提前进入养老状态(当然这个锅有一半是沉迷王者荣耀不可自拔,不太好)
最近项目上基本没啥事情了,然后让手下的小伙伴们对之前做的一些内容进行二次封装,然后他们引用了一个第三方国际化的库我觉得不错,然后看了看源码就分享下,希望大家用得上(虽然现在产品的受众群都是国内的,但是准备下好像没毛病?)
废话??峦炅耍?瞎婢兀?a rel="external nofollow" target="_blank" href=" (虽然我不怎么工作了,但是git还是每天会花时间看看)
库属性介绍:
项目地址: 属性 解释 支持RN版本 所有版本 支持平台 iOS+Android 是否需要NativeModule 是 是否可移植 是 是否含有jni模块 否
使用:
1.install (略,git里都写着了,就是npm那些事)
2.项目中使用
因为是一些静态属性引用,所以你用redux做储存替换也可以,直接做饮用也可以(本文拿en,zh为例)。
首先是建英文版本的配置文件,en/index.js
然后是中文的zh/index.js
属性名,结构是一致的只是属性不同,当然这里是静态的2个文件,如果场景需要可以服务端下发json,那就是完全动态的了,这部分看业务需求了。
2.1 默认的语言环境
我们在上面写了2种语言配置,那么哪种作为初始化的呢?在业务层调用前,我们可以先进行预设
in/index.js
这边进行了一些预设,默认语境为en,允许fallbacks状态(为true时,顺序向下遍历翻译),预设转换的文件就2个,一个en一个zh,这个你也可以自行后续添加根据需求而定。
2.2 业务层调用
先是倒包
import {in} from '你预设的index的目录';
调用(拿一个Toast做个例子)
两种输出结果如下:
源码分析
这个库的实现分为2部分,一部分是Native的版本判断等功能以及js部分的核心实现fnando/in-js
in-js是一个轻量级的js翻译库,他支持各种格式和内容的换算和语言内容的切换,地址如下: In.js做的那么Native做了些啥呢?我们来一探究竟(以安卓为例,苹果看不懂,抱歉)
Native代码就两个类,所以我之前说你直接把Native代码copy走然后项目依赖In.js也能达到这个效果
RNInPackage是一个普通的Package类,它的作用就是把我们的module加到主应用的getPackages()方法中的列表里,然后一起打进包里而已。
具体功能都在RNInModule里
加一个toast看下locale会出现什么
效果如下:
本想一探究竟内部的实现,结果是个不公开的类
总结:
首先Native那里获取本手机的LocaleList然后格式化取第一个元素交由In.js处理,然后In.js根据key选用一套有效的语言规则,再之后流程就和使用时候的顺序一样了。 整个库集成难度较低,使用起来比较简便,使用下来没碰到大坑,配合redux更美味。
上一篇:js 客户端打印html 并且去掉页眉、页脚的实例(js浏览器打印)
友情链接: 武汉网站建设