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

咱们首先定义了一个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中跑起来！