React-Native + Mobx一步步构建项目

前言

前提是你已经搭好环境，并且能跑起来;
否则的话先进行：Mac环境搭建,目标：ios

本项目使用的依赖：

  "dependencies": {
    "lodash": "^4.17.5",
    "mobx": "^4.1.0",
    "mobx-react": "^5.0.0",
    "native-base": "^2.3.5",
    "react": "^16.3.0-alpha.1",
    "react-native": "0.54.4",
    "react-navigation": "^1.5.8"
  },

准备工作

1. 安装相应依赖：mobx 和 mobx-react;

npm i mobx mobx-react --save

2. 安装一些 babel 插件，以支持 ES7 的 decorator 特性:

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

3. 打开 .babelrc 没有就创建一个，配置 babel 插件:

touch .babelrc

写入：

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

补充：ES7装饰器语法在编译器可能会报错；我这里用的是vscode，分享解决办法：

1. 找到 首选项 > 设置 > 工作区设置;
2. 加入以下代码：

    "javascript.implicitProjectConfig.experimentalDecorators": true

至此准备工作已经差不多了，接下来写代码。。。

---

加入Mobx

1. 根目录下新建 js文件夹； js下新建store文件夹；

2. store下新建index.js 作用是合并每个store到一个store中去，最终通过 <Provider {...store}>方式注入<App/>;

3.分别在store下新建几个js，示例：

// home
import { observable, action } from "mobx";

class HomeStore {
  @observable text; // 注册变量，使其成为可检测的
  @observable num;

  constructor() {
    this.num = 0; // 初始化变量，可以定义默认值
    this.text = "Hello, this is homePage!!!";
  }

  @action  // 方法推荐用箭头函数的形式
  plus = () => {
    this.num += 1;
  };

  @action
  minus = () => {
    this.num -= 1;
  };
}

const homeStore = new HomeStore(); 

export { homeStore };

// user
import { observable, action } from "mobx";

class UserStore {
  @observable userInfo;
  @observable text;

  constructor() {
    this.userInfo = "123";
    this.text = "Hello, this is UserPage!!!";
  }

  @action
  getListData = () => {
    fetch(`http://yapi.demo.qunar.com/mock/5228/record/list`)
      .then(
        action("fetchRes", res => {
          return res.json();
        })
      )
      .then(
        action("fetchSuccess", data => {
          return (this.userInfo = data);
        })
      )
      .catch(
        action("fetchError", e => {
          console.log(e.message);
        })
      );
  };
}

const userStore = new UserStore();

export { userStore };

4. 通过index文件合并：

import { homeStore } from "./home";
import { saleStore } from "./sale";
import { userStore } from "./user";

const store = { homeStore, saleStore, userStore };

export default store;

5. 在组件中使用Mobx：

js目录下新建tabs文件夹，新建HomeScreen.js

import React, { Component } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { connect } from "mobx-react";
import { observer, inject } from "mobx-react";
import { Button, Container } from "native-base";
import Headers from "../common/components/header";

@inject(["homeStore"]) // 注入对应的store
@observer // 监听当前组件
class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.store = this.props.homeStore; //通过props来导入访问已注入的store
    this.state = {
    };
  }

  render() {
    const { text, num } = this.store;
    return (
      <Container>
        <Headers 
        title="首页" 
        type='index' 
        navigation={this.props.navigation}
        />
        <Text>{text}</Text>
        <Button primary onPress={() => this.store.plus()}>
          <Text>add</Text>
        </Button>
        <Text>{num}</Text>
        <Button primary onPress={() => this.store.minus()}>
          <Text>Minu</Text>
        </Button>
      </Container>
    );
  }
}

export default HomeScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  }
});

6. 目前组件中还拿不到当前组件的store，接下来注入store；

在初始化的项目结构中，项目运行的入口文件是index.js,注册了同级目录下的App.js;

// index.js

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('demo', () => App);

由于需要在App.js上套入store 所以改写结构，

1. js文件夹下新建App.js

touch App.js

可以把根目录下App.js的内容copy过来，然后删掉根目录下App.js文件;

2. js目录下新建 setup.js 文件；

import React from "react";
import { Provider } from "mobx-react";
import App from "./App";
import store from "./store";

export default function setup() {
  class Root extends React.Component {
    render() {
      return (
        <Provider {...store}>
          <App />
        </Provider>
      );
    }
  }
  return Root;
}

3. 修改index启动页代码：

import { AppRegistry } from 'react-native';
import setup from "./js/setup";

AppRegistry.registerComponent('******', () => setup());

现在store已经注入，在每个组件中也可以拿到当前store的数据了；可以进行代码开发了；