ReactMix框架，让你实现一套js代码，基于ReactNative在H5，App都能完美跑起来，Write Once,Run An...

jopen 9年前

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

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

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

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

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

比如Div 和Span

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

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

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

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

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

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

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

同理Dom API也是一样，

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

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

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

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

来自： http://www.cnblogs.com/xueduanyang/p/5125781.html