---

此中文文档会与官网文档保持同步

欢迎大家共同来完善此文档，为国内 MobX 爱好者提供一个更好的学习环境

Github 仓库: https://github.com/SangKa/mobx-docs-cn

目前文档已同步至 MobX 4，仍想阅读 MobX 3 文档，请移步至这里

关键字 react native mobx react-native-router-flux react-navigation

安装: yarn add mobx mobx-react -P。 要启用 ESNext 的装饰器, yarn add babel-plugin-transform-decorators-legacy babel-preset-react-native-stage-0 -D

配置.babelrc

image

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

1.观察者模式去理解mobx ------ 定义AppState -可观察

import {observable, action, computed} from 'mobx';
import {getProfile} from '../service/AccountDao'

class AppState {
    @observable
    profile = {};

    @action
    _getProfile() {
        getProfile(data => {
            this.profile = data;
        }, err => {

        })
    }

}

export default new AppState();

2.在Component中使用，观察者

import React, {PureComponent} from 'react';
import {Text} from 'react-native'
import {Base, Button, ImageLoad} from '../../component'
import {realSize, Metrics, Styles, Colors, Images} from '../../config/Theme';
import styles from './Mine.style';
import {observer} from 'mobx-react/native'
import AppState from '../../mobx/AppState'

@observer
export default class Personal extends PureComponent {
    render() {
      
        let profile = AppState.profile;
        console.log('mobx',profile)
        return (
            <Base>
                <Button
                    onPress={() => {
                        AppState._getProfile()
                    }}
                    btnStyle={styles.btn_avatar}>

                    <Text style={styles.btn_name}>头像</Text>

                    <ImageLoad
                        source={Images.mine_bg}
                        style={styles.personal_avatar}/>

                </Button>
                <Button
                    btnStyle={styles.personal_item}>

                    <Text style={styles.btn_name}>昵称</Text>

                    <Text style={styles.personal_name}>{profile.nick_name}</Text>

                </Button>

                <Button
                    btnStyle={styles.personal_item}>

                    <Text style={styles.btn_name}>性别</Text>

                    <Text style={styles.personal_name}>女</Text>

                </Button>

                <Button
                    btnStyle={styles.personal_item}>

                    <Text style={styles.btn_name}>注册日期</Text>

                    <Text style={styles.personal_name}>2018.08.08</Text>

                </Button>

            </Base>
        );
    }
}

mobx 搭配 react-native-router-flux的store处理

22411529050699_.pic.jpg

import React, {Component} from 'react';
import {Router} from 'react-native-router-flux';
import {Scenes} from './page';
import './config/GlobalParams';
import stores from './mobx'
import {Provider} from 'mobx-react/native';

export default class Root extends Component {
    

    render() {
        return <Provider {...stores}>
            <Router>
                {Scenes()}
            </Router>
        </Provider>
    }

}

UI处修改

import React, {PureComponent} from 'react';
import {Text} from 'react-native'
import {Base, Button, ImageLoad} from '../../component'
import {realSize, Metrics, Styles, Colors, Images} from '../../config/Theme';
import styles from './Mine.style';
import {observer, inject} from 'mobx-react/native'

@inject('AppState')
@observer
export default class Personal extends PureComponent {
    render() {
        console.log(this)
        const {AppState} = this.props;
        let profile = AppState.profile;

        return (
            <Base>
                <Button
                    onPress={() => {
                        AppState._getProfile()
                    }}
                    btnStyle={styles.btn_avatar}>

                    <Text style={styles.btn_name}>头像</Text>

                    <ImageLoad
                        source={Images.mine_bg}
                        style={styles.personal_avatar}/>

                </Button>
                <Button
                    btnStyle={styles.personal_item}>

                    <Text style={styles.btn_name}>昵称</Text>

                    <Text style={styles.personal_name}>{profile.nick_name}</Text>

                </Button>

                <Button
                    btnStyle={styles.personal_item}>

                    <Text style={styles.btn_name}>性别</Text>

                    <Text style={styles.personal_name}>女</Text>

                </Button>

                <Button
                    btnStyle={styles.personal_item}>

                    <Text style={styles.btn_name}>注册日期</Text>

                    <Text style={styles.personal_name}>2018.08.08</Text>

                </Button>

            </Base>
        );
    }
}