使用的版本:
"mobx": "^4.2.1"
"mobx-react": "^5.1.2"
"react": "16.3.1"
"react-native": "0.55.4"
因為安卓的jscore有些問題兴革，所以mobx 5.x版本無法使用搀暑，會出錯，更改為4.x即可舱呻。
首先創(chuàng)建項目
react-native init rnmobxdemo
進(jìn)入該項目創(chuàng)建基本的結(jié)構(gòu)
image.png
- 在目錄中新建src文件夾，把App.js拖入其中
- 在src文件夾中新建store文件夾，在其中新建message.js文件份名，這是mobx有關(guān)的文件了。
- 編輯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();
現(xiàn)在對App.js進(jìn)行修改
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',
}
});
