React Native 状态管理 Mobx 使用

作者：蜗牛的学习方法
链接：https://www.jianshu.com/p/932b8e2746d0
来源：简书

1、初始化react-native项目

react-native init test

2、下载mobx 插件

npm i mobx mobx-react --save
or
yarn add mobx mobx-react --save

"mobx": "^5.9.4",
"mobx-react": "^5.4.3",
"@babel/core": "^7.4.0",

3、配置装饰器插件

//bable 7.0
yarn add  @babel/plugin-proposal-decorators --save

在项目的.babelrc或者是babel.config.js文件下配置：

"plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
]

4、在项目目录下建一个store文件夹，里面新建一个index.js

代码：

import {observable,action} from 'mobx';
var appStore = observable({
    counter: 0
});
appStore.addCount = action(()=>{
    appStore.counter+=1;
});
appStore.subCount = action(()=>{
    if(appStore.counter<=0){
        return;
    }
    appStore.counter-=1;
});
appStore.changeCount = action((key)=>{
    if(key<=0){
        appStore.counter=0;
    }
    appStore.counter=parseInt(key);
});
export default appStore

在项目底层app.js里面：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import {Provider} from 'mobx-react'
import store from './src/store'
import Home from './src/pages/home'

export default class App extends Component{
  render() {
    return (
      <Provider store={store}>
        <Home/>
      </Provider>
    );
  }
}
const styles = StyleSheet.create({
});

使用页面

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,TouchableOpacity,TextInput} from 'react-native';
import {observer, inject} from 'mobx-react';

@inject('store')
@observer
export default class Home extends Component{
    constructor(props){
        super(props);
        this.state={
            value:0
        }
    }
    componentWillMount(){
        console.log(this.props.store.counter)
    }
    sub=()=>{
        let {store}=this.props;
        store.subCount()
    }
    add=()=>{
        let {store}=this.props;
        store.addCount()
    }
    render() {
        let {store}=this.props
        return (
        <View style={styles.container}>
            <TouchableOpacity onPress={this.sub}>
                <Text>-</Text>  
            </TouchableOpacity>
            <TextInput style={{width:100,height:35,borderWidth:1}} value={store.counter.toString()}/>
            <TouchableOpacity onPress={this.add}>
                <Text>+</Text>  
            </TouchableOpacity>   
        </View>
        );
    }
}

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

完整目录

test.
├─ .buckconfig
├─ .eslintrc.js
├─ .flowconfig
├─ .gitattributes
├─ .gitignore
├─ .prettierrc.js
├─ .watchmanconfig
├─ app.json
├─ babel.config.js
├─ index.js
├─ metro.config.js
├─ package.json
├─ yarn-error.log
├─ yarn.lock
│
├─android
├─ios
├─node_modules
└─src
    ├─ Main.js
    ├─ TabScreen.js
    │
    ├─pages
    │  └─home
    │     └─ index.js
    │  
    └─store
       └─ index.js