restackx-core

前端快速开发框架,可适用与web及react-native。

Web

快速开始

如何快速使用restackx-cli搭建项目

cd /项目路径
npm i 安装依赖
如果使用restackx-cli搭建项目，只需restackx run运行。

store

自创建store：例如一个model文件（PageModel.js）

const store = {
  "PageModel":new PageModel()
}
//使用this.context.store.PageModel得到PageModel对象;

为了store的简单使用，可使用demo中定制的store。restackx-core将自动读取后缀名为"store.js"的文件，通过handleModels会返回store.

import {observable, computed, reaction} from 'mobx'
import {handleModels} from 'restackx-core'
const modelContext = require.context('../', true, /. store.js$/)
	
var models = handleModels(modelContext)
export default models

router

restackx-core默认使用BrowserRouter,也可更换其它router(react-router-dom的使用)。具体替换方法:

<App store={Store} router={BrowserRouter} routes={routes}/>

routes

restackx-core提供了路由的入口，导入指定路由可方便我们管理,具体事例：

import React from 'react';
import {Route, Switch} from 'react-router-dom'
import App from '../modules/demo/App';
import Page1 from '../modules/demo/Page1'
import PageTwo from '../modules/demo/Page2'

export default (
  <Route path="/">
    <App>
      <Switch>
        <Route exact path="/" component={Page1}/>
        <Route path="/pagetwo" component={PageTwo}/>
      </Switch>
    </App>
  </Route>
);

react-native

快速集成

1. cd 工程根目录创建react-native工程（react-native init app --version 0.44.3）
2. npm i restackx-core --save 安装restackx-core
3. react-native run-ios

如何搭建react-native工程

restackx-core框架集成了mobx,mobx-react以及react-router-native，其中observer 是mobx-react单独提供的，用以将React组件转变成响应式组件，inject连接store，为组件提供提数据及状态 observer([stores], Component) 或 @inject([stores])。

store

import {observable} from "mobx";

import Launch from './models/launch.model';
import TopBar from './models/TopBar.model';

const models = {
  launch: new Launch(),
  topBar: new TopBar(),
}
export default observable(models);
//调用方法：this.props.store.launch获取Launch 对象

router

在restackx-core/react-native中使用的是NativeRouter，它这是为native提供了相应的路由。 具体使用可参照NativeRouter.

routes

在native app中route并不存在，而是通过导航来管理界面。而在restackx-core/react-native中使用react-router-native来实现原生route的功能，routes的具体管理：

const Routes = (
  <View style={{flex:1}}>
    <Switch>
      <Route exact path="/" component={LaunchPage}/>
      <Route path="/app" component={App}/>
      <Route path="/main" component={Main}/>
    </Switch>
  </View>
);

注意:

使用MobX需要安装一些 babel 插件，以支持 ES7 的 decorator 特性：

npm i babel-plugin-transform-decorators-legacy babel-preset-react-native-stage-0 --save-dev

在 .babelrc 文件中配置 babel 插件：

{
  'presets': ['react-native'],
  'plugins': ['transform-decorators-legacy']
}