安装
yarn add mobx mobx-react @babel/plugin-proposal-decorators
配置
在项目 babel.config.js 添加以下配置
plugins: [
['@babel/plugin-proposal-decorators', { 'legacy': true }]
]
新建文件 mobx/js; 位置 名字不重要,只要能找到就行
import { observable, action } from "mobx";
class RootStore {
// observable 表示数据可监控 表示是全局数据
@observable name = "hello";
// action行为 表示 changeName是个可以修改全局共享数据的方法
// 新增地块数组
@observable points = [];
@action changeName(name) {
this.name = name;
}
// 修改新增地块数组
@action changePoints(arry) {
this.points = arry;
}
}
export default new RootStore();
在app.js 挂载
import * as React from 'react';
//引入导航
import Nav from './src/route/index';
// 引入全局变量
import "./src/comm/global";
// 引入自己建的mobx
import rootStore from "./src/mobx";
import { Provider} from "mobx-react";
function App() {
return (
//
<Provider rootStore={rootStore} >
<Nav>
</Nav>
</Provider>
);
}
export default App;
在类组件中使用
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import {inject,observer } from "mobx-react";
@inject("rootStore") // 注入 用来获取 全局数据的
@observer // 当全局发生改变了 组件的重新渲染 从而显示最新的数据
class Sub1 extends Component {
changeName = () => {
// 修改全局数据
this.props.rootStore.changeName(Date.now());
}
render() {
console.log(this);
return (
<View><Text onPress={this.changeName}>{this.props.rootStore.name}</Text></View>
);
}
}
export default Index;
在函数组件中使用
import React, { useState } from "react";
import { Text, View, TouchableOpacity, ImageBackground, StyleSheet, Image, Alert, TextInput } from "react-native";
// 自定义顶部导航栏
import Navbar from '../../commponts/Navbar/index';
import {inject,observer } from "mobx-react";
import storage from "../../comm/storage";
import request from "../../comm/request";
import Toast from "../../commponts/toast";
import Loading from "../../commponts/loading";
// @inject("rootStore") // 注入 用来获取 全局数据的
// @observer // 当全局发生改变了 组件的重新渲染 从而显示最新的数据
const Index=(props)=>{
//
let EasyToast=null;
let EasyLoading=null;
function changeName() {
props.rootStore.changeName( Date.now())
console.log(props.rootStore.name)
}
return (
<View style={{flex:1}}>
<View><Text onPress={changeName}>{props.rootStore.name}</Text></View>
</View>
)
}
const styles=StyleSheet.create({
})
export default inject('rootStore')(observer(Index));