Technology moves fast! ⚡ Don't get left behind.🚶 Subscribe to our mailing list to keep up with latest and greatest in open source projects! 🏆


Subscribe to our mailing list

react-mix

Base on react-native, plan to support all CSS gramma, and all js dom event, and all h5 framework, our object is write once, run anywhere!

Subscribe to updates I use react-mix


Statistics on react-mix

Number of watchers on Github 394
Number of open issues 8
Average time to close an issue less than a minute
Main language JavaScript
Open pull requests 0+
Closed pull requests 0+
Last commit about 3 years ago
Repo Created over 3 years ago
Repo Last Updated over 1 year ago
Size 1.07 MB
Organization / Authorxueduany
Contributors1
Page Updated
Do you use react-mix? Leave a review!
View open issues (8)
View react-mix activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating react-mix for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

React Mix

React Mix enables you to build all platform application base on React-Native. We create a mid-layer to support all CSS gramma, all JS dom event, all H5 framework on React-Native, and We have done these:

  • support CSS className
  • support CSS unit, px, pt, rem, em
  • unify box model measurement on all platform by CSS rem
  • support CSS two or more className combine or inherit, such as (.className1 .className2 .className3...)inhreit , (.className1.className2.className3)combine
  • support CSS selector(part done, progress), have support #id, .className, tagName
  • support DOM selector(part done, progress), have support $('#id'), $('.className'), $('TagName'), $('CSS3 selector')(by sizzle)
  • support DOM event, like onTouchXXXX, onLoad, onClick...eg(done)
  • support DOM Manipulation API like JQuery(part done, progress), have support part JQuery DOM API, all done until February
  • support ReactNative Bundle into two part, not single release, one is like common part, include nessesary component, bigger one, another is business code, smaller.(done, read react-native.js.split.build.js)
  • and more...

  • add a big game demo 2048 , can both run iOS/Android/H5 , more detail see sourcecode

Both support ReactNative Android and IOS, more UI component is still in dev!

We promise , we do not change any react-native core code, we only do auto translate tools!

Have Support CSS Function

  • className
  • css unit, px , pt, em , rem
  • #id
  • .className
  • TagName
  • .className combine, like .a.b.c
  • .className inherit like .a .b .c

Have Support JQuery API

  • $, you can use $('#id'), $('.className') to find a instance
  • addClass
  • removeClass
  • hasClass
  • css
  • before
  • append
  • html
  • offset
  • attr
  • parent, because we simulate a DOM tree
  • on(=addEventListener)
  • off(=removeEventListener)

Have Support LocalStorage

  • API like web browser localstorage, example see ./reactnative/example_localstorage.js

Have Support Animation API

  • requestAnimationFrame
  • setInterval
  • setTimeout

Introduction

ReactNativeH5ReactMix, ReactNativeReactNativeAPIjs,cssReactNativeReactMix

ReactNativeHTML5js+ dom api + css

  • css className
  • csspx, pt, rem
  • iosrem
  • classNameclassName
  • cssid, className, tag
  • Dom#id, .className, TagName
  • js dom event apionclick
  • domapiinsertBefore, htmlapi
  • ReactNativereactnativeapp

  • 20482048,index.ios.js, index.android.js

HTML+CSS+JSreactnativeiOS,andorid,winphone,H5,PC

Getting Started

  • githubnpm installreactnativenpm install
  • Macinstall.sh,npm install./reactnativenpm install
  • npmcsswebjs./reactnaitvenpmreactnative
  • reactnativewebH5
  • lightningStormreactnativehtmlcssdom api./reactnative/common/LightningStorm.js
  • iosreactnativedemo
  • HTMLDivreactnativeViewSpanreactnativeText, ImgreactnativeImageDiv, Span, ImgHTML
  • : iOSindex.ios.js,index.android.jsimportlightningStormindex.js
  • H5html./web/index.htmlindex.build.jswebpack.config.jsiOSindex.ios.js
  • cssreactcssreact.css.build.jsnodecss
  • webpack.config.jsH5reactnativeindex.ios.jsH5
  • H5appcss./csscssAPIincludeCSS
  • CSSReactNativedisplaymedia query
  • jsUI ComponentUIReactMixUIReactReactNative

Getting Help

  • issuexueduanyang1985@163.com[mailto:xueduanyang1985@163.com]

Documentation

http://www.cnblogs.com/xueduanyang/p/5125781.html

http://www.cnblogs.com/xueduanyang/p/5128690.html

react-native

reactnative

  • cssreact.css.build.jsreactjscss
  • index.ios.js
  • commonUI
  • index.js
  • common/LightningStorm.js
  • common/rnreactnativeUInative
  • webcommon/htmlH5UI,common/rnAPI
  • reactnativedemo

Demo

js+ html

react-mix open issues Ask a question     (View All Issues)
  • almost 3 years error in run android
  • about 3 years npm install failed
  • about 3 years includeCSS 是在运行时处理,可以参考这个模块:react-native-css-loader,在“编译”阶段处理。
  • about 3 years 请问,我想把react-weui放到react-mix里用,是否可以?如果可以应该怎么做?谢谢
  • about 3 years Application native has not been registered
  • about 3 years :app:compileDebugJavaWithJavac FAILED
  • over 3 years 安卓报错找不到lightningstorm,ios 没有
  • over 3 years reactmix之前在css继承存在一定的bug,现在修复了,各位关注的朋友可以了解一下
react-mix list of languages used
Other projects in JavaScript