react-native+MobX

参考https://segmentfault.com/a/1190000014165693同事解决其发生的问题
1.版本

"mobx": "4.3.1",
"mobx-react": "5.1.0",
否则会报错


2.安装

yarn add babel-plugin-transform-decorators-legacy

yarn add babel-preset-react-native-stage-0

yarn add babel-plugin-transform-runtime

防止@无法识别

touch .babelrc

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

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); }) ); }; }
4.在store文件夹下创建一个index.js文件将刚刚创建的两个js文件引入到里面

import { homeStore } from "./home";
import { userStore } from "./user";
const store = { homeStore,userStore};

export default store;

5.在App.js中将其引入

import React,{Component} from 'react';
import {Provider} from 'mobx-react';
import AppStackNavigator from "./Router";
import store from './store';
export default class App extends Component{
    render(){
        return (
            <Provider {...store}>
                <AppStackNavigator></AppStackNavigator>
            </Provider>
        )
    }
}

6.调用状态机

import {observer,inject} from 'mobx-react';
@inject('homeStore') @observer；

<Text>状态管理器</Text>
<Text>{this.props.homeStore.name}</Text>
<Text>{this.props.homeStore.msg}</Text>