react native 使用mobx

最新推荐文章于 2024-04-04 19:45:30 发布

代码就是bug

最新推荐文章于 2024-04-04 19:45:30 发布

阅读量945

点赞数 1

文章标签： react native reactjs

本文链接：https://blog.csdn.net/XKFC1/article/details/124169243

版权

安装

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));