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>