你的位置:首页 > 网页设计

[网页设计]ReactMix框架,让你实现一套js代码,基于ReactNative在H5,App都能完美跑起来,Write Once,Run Anywhere


ReactNative框架推出已经有一段时间了,相信很多小伙伴都在尝试实现Write Once, Run Anywhere的梦想,比如淘宝的ReactWeb等等,但是这些框架都局限于因为ReactNative本省的局限性,比如不支持CSS,不支持DOM操作,不支持选择器等等,而没有办法实现Js代码的全平台统一,现在通过全新的ReactMix框架,你可以让你的代码不仅可以在ReactNative上跑起来,实现安卓和iOS代码的统一,而且同样一份代码也可以在PC,H5上跑起来,到底有多神气?让我们来一探ReactMix框架(https://github.com/xueduany/react-mix)的奥秘吧!

ReactMix框架是基于ReactNative框架实现的,目标是完全兼容现有的H5开发方式的新一代框架ReactMix, 相信大家已经使用ReactNative去开发各自的应用有一段时间了,在这段时间,因为ReactNative的API频繁变动,且文档不全,而对于已经习惯写js,css开发的前端工作者来说,ReactNative又是一种新的开发模式,现在ReactMix就是为了解决大家现在遇到的这些问题而来了。

我们通过中间层,来使得ReactNative,能支持现有的HTML5的js+ dom api + css的开发模式,完美的支持常用的

  • css className
  • 支持了css基本单位px, pt, rem
  • 彻底解决了ios安卓尺寸样式不统一的问题,基于rem的度量方式,而且自适应不同的屏幕和分辨率,再也不用为未来更大屏的设备写兼容代码了
  • 多个className的组合,或者className继承关系
  • css选择器,支持id, className, tag选择器
  • 支持Dom选择器,你可以使用#id, .className, TagName去定位和查找节点
  • 支持常用的js dom event api,支持例如onclick
  • 支持常用的dom操作api,比如insertBefore, html等等,你经常使用的api
  • 支持ReactNative代码的分割打包,这样你可以把reactnative的框架代码保存在app本地,但是业务代码通过在线直连的方法更新,保证网络传输量最小

首先我们来看一个例子

在ReactNative里面,在不同的设备,比如安卓或者iOS,都要有一个入口文件,比如iOS叫做index.ios.js,安卓叫做index.android.js,这个是默认的入口,当然你可以修改,对于reactmix来说,入口文件就是index.js

image

我们首先定义了一个navigator作为全局导航的存在,对于H5来说,我们实现了navigator控件的兼容

image

这样我们可以保证一套代码,只要API一致,就可以实现一样的功能,类似这样的原理,我们同步翻译常用的reactnative在h5开发中需要使用的控件

image

而在H5的实现上分别调用不同的对应实现

image

因为reactnative没有window对象,首先我们要给他实现一个window对象,然后把我们需要的常用的控件,挂到window上,这样我们在使用的时候就不需要再在具体的页面里面require了

比如Div 和Span

image

image

我们把这些常用的tag都挂在window之后,在我们的具体的页面里面,我们就可以不require,直接调用,就像这样

image

在H5开发里面,最常用的是block元素和inline元素,就是div和span,但是在reactnative里面没有,那么怎么办,我们就造一个

image

image

类似于shadow dom的做法,我们把自定义的组件Div同步翻译成reactnative的view,把span同步翻译成为text

然后我们还要解决className的兼容问题,要让reactnative支持常用的选择器,我们实现了

image

比如说这样的css,有id选择器,有className选择器,有className的继承,className的合并,我们要在reactnative里面实现,那么我们就要重构reactnative的自定义函数的render方法,在里面做文章

首先我们要让所有的元素都继承与一个基类,类似HTML的Dom Element

image

image

然后在render方法里面对于绕过reactnative自生的style,做增强的解析,来实现类似的CSS体系

同理Dom API也是一样,

另外对于reactnative来说,click是没有的,touch也是没有的,但是有类似的,需要2次封装,所以我们统一包装起来,对于h5开发者来说,就当做正常html+js开发既可以,只要正常实现touch的注册,我们给你类似于标准的Event Object

image

另外对于app开发和h5开发来说,每次设备的分辨率变大,或者出了新设备,都有一项工作叫做适配?对吧,而reactnative的样式是没有单位的,我们给他实现了单位比如px,pt,rem

而基于rem又实现了全平台统一的度量系统,就是说只要你是按照rem的定义的和模型,在同样大小分辨率的设备上,保证你的代码出来的效果是完全一样的

image

 

怎么样?对于这套框架,是不是有点动心了,快来体验一下吧,后续我们会陆续给大家详细解密ReactNative的核心原理,以及继续完善ReactMix,让标准的js代码可以平滑的在app中跑起来!