安裝mobx組件

npm install mobx mobx-react --save

安裝裝飾器

因?yàn)闀?huì)用到ES7的裝飾器（會(huì)適當(dāng)?shù)暮?jiǎn)化代碼），所以在此安裝一下

npm install babel-plugin-transform-decorators-legacy --save-dev

然后在.babelrc文件中配置，啟用一下這個(gè)插件

"plugins": ["transform-decorators-legacy"]

注意：transform-decorators-legacy 需放在首位，參考issue

實(shí)現(xiàn)

創(chuàng)建一個(gè)store文件，把所有store放里面，在根RootStore里，把其他store實(shí)例化

/**
 * Description:根store
 *
 * Author: zoe
 * Time: 2018/5/21 0016
 */
import { observable,action } from 'mobx'

class RootStore {
    constructor() {
        this.nameStore = new NameStore();
        this.ageStore = new AgeStore();
    }
}

class NameStore{

    //被觀察的字段
    @observable
    name = 'Zoey';

    //被觀察的操作
    @action
    setName(newName){
        this.name=newName;
    }
}

class AgeStore{

    @observable
    age = '18';

    @action
    setAge(newAge){
        this.age=newAge;
    }
}

export default new RootStore();

在根布局上，使用provider實(shí)現(xiàn)全局注冊(cè)，rootStore為未來(lái)用到的地方inject的名字

import React, { PureComponent } from 'react';
import TestPage from "./app/TestPage";
import { Provider } from 'mobx-react'
import stores from './app/stores'

export default class App extends PureComponent {
    render() {
        return (
            <Provider rootStore={stores}>
                <TestPage/>
            </Provider>
        );
    }
}

在需要使用的地方，使用inject方法注入store，observer為觀察者

/**
 * Description:
 *
 * Author: zoe
 * Time: 2018/5/21 0017
 */
import React, { Component } from 'react';
import {
    Text,
    StyleSheet,
    View,
} from 'react-native';

import { observer, inject } from "mobx-react";

@inject('rootStore')
@observer
export default class TestPage extends Component {

    nameStore=this.props.rootStore.nameStore;
    ageStore=this.props.rootStore.ageStore;

    onChange() {
        this.nameStore.setName("Jack");
        this.ageStore.setAge("20");
    }

    render() {
        return (
            <View style={styles.container}>
                <Text>{'姓名：'+this.nameStore.name+'\n 年齡：'+this.ageStore.age}</Text>
                <Text style={styles.btn} onPress={() => this.onChange()}>點(diǎn)我換換</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container : {
        flex : 1,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor : 'white',
    },btn:{
        marginTop:20,
        fontSize:20,
        fontWeight :'200',
        color :'black'
    }
});

按鈕點(diǎn)擊前

按鈕點(diǎn)擊后

傳送門(mén)