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中跑起來！