|
| 1 | + |
| 2 | +# restackx-core |
| 3 | + |
| 4 | +前端快速开发框架,可适用与web及react-native。 |
| 5 | + |
| 6 | +## Web |
| 7 | +#### 快速开始 |
| 8 | + |
| 9 | +[如何快速使用restackx-cli搭建项目](https://github.com/PepperYan/restackx-cli) |
| 10 | + |
| 11 | +``` |
| 12 | +cd /项目路径 |
| 13 | +npm i 安装依赖 |
| 14 | +如果使用restackx-cli搭建项目,只需restackx run运行。 |
| 15 | +``` |
| 16 | +#### store |
| 17 | +1. 自创建store:例如一个model文件(PageModel.js) |
| 18 | + |
| 19 | + const store = { |
| 20 | + "PageModel":new PageModel() |
| 21 | + } |
| 22 | + //使用this.context.store.PageModel得到PageModel; |
| 23 | +2. 为了store的简单使用,可使用demo中定制的store。restackx-core将自动读取后缀名为"store.js"的文件,通过handleModels会返回store. |
| 24 | + |
| 25 | + import {observable, computed, reaction} from 'mobx' |
| 26 | + import {handleModels} from 'restackx-core' |
| 27 | + const modelContext = require.context('../', true, /. store.js$/) |
| 28 | + var models = handleModels(modelContext) |
| 29 | + export default models |
| 30 | + |
| 31 | + |
| 32 | + |
| 33 | +#### router |
| 34 | +restackx-core默认使用BrowserRouter,也可更换其它router([react-router-dom的使用](https://reacttraining.com/react-router/web/api/BrowserRouter))。具体替换方法: |
| 35 | + |
| 36 | + <App store={Store} router={BrowserRouter} routes={routes}/>, |
| 37 | + |
| 38 | +#### routes |
| 39 | +restackx-core提供了路由的入口,导入指定路由可方便我们管理,具体事例: |
| 40 | + |
| 41 | + import React from 'react'; |
| 42 | + import {Route, Switch} from 'react-router-dom' |
| 43 | + import App from '../modules/demo/App'; |
| 44 | + import Page1 from '../modules/demo/Page1' |
| 45 | + import PageTwo from '../modules/demo/Page2' |
| 46 | + |
| 47 | + export default ( |
| 48 | + <Route path="/"> |
| 49 | + <App> |
| 50 | + <Switch> |
| 51 | + <Route exact path="/" component={Page1}/> |
| 52 | + <Route path="/pagetwo" component={PageTwo}/> |
| 53 | + </Switch> |
| 54 | + </App> |
| 55 | + </Route> |
| 56 | + ); |
| 57 | + |
| 58 | + |
| 59 | + |
| 60 | +## react-native |
| 61 | + |
| 62 | +#### 快速集成 |
| 63 | + |
| 64 | + 1. cd 工程根目录创建react-native工程(react-native init app --version 0.44.3) |
| 65 | + 2. npm i restackx-core --save 安装restackx-core |
| 66 | + 3. react-native run-ios |
| 67 | + 也可在package.json中配置restackx-core依赖,再执行npm install。 |
| 68 | + |
| 69 | +[如何搭建react-native工程](https://facebook.github.io/react-native/docs/getting-started.html) |
| 70 | + |
| 71 | +#### store |
| 72 | + import HomePageModel from './models/HomePage.model'; |
| 73 | + import MenuBarModel from './models/MenuBar.model'; |
| 74 | + //这里添加所要导入的xxx.model.js |
| 75 | + const store = { |
| 76 | + "HomePage" : new HomePageModel(), |
| 77 | + "MenuBarModel" : new MenuBarModel(), |
| 78 | + } |
| 79 | + |
| 80 | +#### router |
| 81 | + 在restackx-core/react-native中所使用的router:NativeRouter,这是为native提供的react-router-native。 |
| 82 | +使用说明请参照[NativeRouter](https://reacttraining.com/react-router/native/api/NativeRouter). |
| 83 | + |
| 84 | +#### routes |
| 85 | +在native app中可通过导航进行管理界面,但是route并不存在。想要实现route的功能可使用react-router-native: |
| 86 | + |
| 87 | + var route = [ |
| 88 | + { |
| 89 | + "title":"Home", |
| 90 | + "path":"/", |
| 91 | + },{ |
| 92 | + "title":"Message", |
| 93 | + "path":"/Message", |
| 94 | + }]; |
| 95 | + const Routes = ( |
| 96 | + <View style={{flex:1}}> |
| 97 | + <NavBar /> |
| 98 | + <Route exact path={route[0].path} component={HomePage}/> |
| 99 | + <Route path={route[1].path} component={Message}/> |
| 100 | + <MenuBar routes={route} initRoute={route[0]}/> |
| 101 | + </View> |
| 102 | + ); |
| 103 | + |
| 104 | + |
| 105 | +#### 注意: |
| 106 | +使用[MobX](https://mobx.js.org/)需要安装一些 babel 插件,以支持 ES7 的 decorator 特性: |
| 107 | + |
| 108 | + npm i babel-plugin-transform-decorators-legacy babel-preset-react-native-stage-0 --save-dev |
| 109 | + |
| 110 | +在 .babelrc 文件中配置 babel 插件: |
| 111 | + |
| 112 | + { |
| 113 | + 'presets': ['react-native'], |
| 114 | + 'plugins': ['transform-decorators-legacy'] |
| 115 | + } |
| 116 | + |
0 commit comments