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的开发模式，完美的支持常用的
首先我们来看一个例子
在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中跑起来！
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。