react native 集成 mobx

使用的版本:

"mobx": "^4.2.1"
"mobx-react": "^5.1.2"
"react": "16.3.1"
"react-native": "0.55.4"

因为安卓的jscore有些问题，所以mobx 5.x版本无法使用，会出错，更改为4.x即可。

首先创建项目

react-native init rnmobxdemo

进入该项目创建基本的结构

image.png

1. 在目录中新建src文件夹，把App.js拖入其中
2. 在src文件夹中新建store文件夹，在其中新建message.js文件，这是mobx有关的文件了。
3. 编辑message.js，写一个简单的message mobx

import { observable, computed, action } from 'mobx';

class Message {

  @observable
  message = "example message";

  @action
  setMessage(value) {
    this.message = value;
  }
}

export default new Message();

现在对App.js进行修改

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  ActivityIndicator, Button
} from 'react-native';

import { observer } from 'mobx-react';
import Message from './store/message';

@observer
export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        <Text>{Message.message}</Text>
          <Button
            onPress={() => this.changeMessage()}
            title="Click Me"/>
      </View>
    );
  }

  changeMessage() {
    Message.setMessage("Click on me!")
  }
}

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