Skip to content

Commit 81b8a04

Browse files
committed
Update/.md
1 parent 7c50c77 commit 81b8a04

File tree

4 files changed

+116
-133
lines changed

4 files changed

+116
-133
lines changed

README.md

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
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+

examples/rn-demo/index.ios.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11

22
const { AppRegistry } = require('react-native');
33
const setup = require('./src/js/index');
4-
// import setup from './coreDemo/test'
54
AppRegistry.registerComponent('app', setup);

examples/rn-demo/src/js/routes.js

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
import React, {Component} from 'react';
2-
32
import NavBar from './component/NavBar'
4-
53
import HomePage from './class/home/HomePage';
64
import Message from './class/message/Message';
75
import Application from './class/application/Application';
86
import Personal from './class/personal/Personal';
9-
107
import MenuBar from './component/MenuBar'
11-
128
import { NativeRouter, Route, Link} from 'react-router-native';
13-
14-
159
import {View} from 'react-native'
1610

1711
var route = [

restackx-core.md

Lines changed: 0 additions & 126 deletions
This file was deleted.

0 commit comments

Comments
 (0)