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