react-native----mobx 数据更新未更新视图

mobx在react中是全局数据管理库，相当于vue中的vuex

当前使用的版本

react版本号

16.13.1

react-native版本号

0.63.3

mobx版本号

^6.0.4

mobx-react版本号

^7.0.5

使用步骤

安装依赖
- mobx 核心库
- mobx-react 方便在react中使用mobx技术的库
- @babel/plugin-proposal-decorators

yarn add mobx mobx-react @babel/plugin-proposal-decorators

在babel.config.js添加一下配置

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

新建文件mobx/index.js用来存放全局数据

//无需通过observable和action等修饰器，直接在构造函数中使用makeAutoObservable来实现observable和action修饰器功能，使代码更加简洁。
import {makeAutoObservable} from 'mobx';
class RootStore{
    constructor(){
      makeAutoObservable(this)
    }
    name='lee';
    changeName(name){
      this.name=name
     
    }
}
export default new RootStore()

在项目目录下index.js文件中挂载
通过provider来挂载和传递

import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import { Provider } from 'mobx-react';
import RootStore from './mobx/index';
import Com from './view/Com'

// 调试network请求的
global.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || global.XMLHttpRequest
import React, { Component } from 'react'
export default class Index extends Component {
    render() {
        return (
            <Provider RootStore={RootStore}>
                <Com />
            </Provider>
        )
    }
}
AppRegistry.registerComponent(appName, () => Index);

在view/Com.js类组件中如何使用mobx

import React, { Component } from 'react'
import { Button, SafeAreaView, StatusBar, Text, View } from 'react-native'
import { inject, observer  } from 'mobx-react'

@inject('RootStore')
@observer
class Com extends Component {
    constructor(props) {
        super(props)
    }
    handChageName=()=>{
        this.props.RootStore.changeName('张三')
    }
    render() {
        let {name} =this.props.RootStore;
        console.log(name)
        return (
            <>
                <StatusBar barStyle='light-content'></StatusBar>
                <SafeAreaView style={{ backgroundColor: 'blue' }}>
                    <View style={{ height: '100%', backgroundColor: 'white' }}>
                        <Text onPress={this.handChageName} >修改</Text> 
                        <Text>{name}11</Text>
                    </View>
                </SafeAreaView>
            </>
        )
    }
}
export default Com

在view/Com.js函数组件中如何使用mobx

import { Button, SafeAreaView, StatusBar, Text, View } from 'react-native';
import {inject,observer} from 'mobx-react';
function Com(props) {
  let {name}=props.RootStore
  return (
    <View className="App">
     <Text>{name}</Text>
    </View>
  );
}

export default inject('RootStore')(observer(Com));