react监听与 react native 监听

react 监听：

npm install events --save

新建一个 events.js，引入 events 包，并向外提供一个事件对象，供通信时使用：

import { EventEmitter } from "events";
export default new EventEmitter();

 

// -----------------A页面-----------------------


import emitter from "./events"

 // 触发自定义事件
emitter.emit("callMe","Hello")


// --------------B页面---------------------------

import emitter from "./events"

// B页面 监听到来自A页面后的行为
componentDidMount(){
   // 声明一个自定义事件
   this.eventEmitter = emitter.addListener("callMe",(msg)=>{
    this.setState({
         msg
     })
   });
}

// 组件销毁前移除事件监听
componentWillUnmount(){
   emitter.removeListener(this.eventEmitter);
}

react native 监听：

// ----------------------A页面---------------

import { DeviceEventEmitter } from "react-native";


// 发送监听事
 DeviceEventEmitter.emit("tagChange", () => {
    const flag = true;
    return flag;
 });





// ---------------------B页面---------------------

import { DeviceEventEmitter } from "react-native";

 componentDidMount() {
   
    // 监听到子页面传过来的状态更改后
    this.listener = DeviceEventEmitter.addListener("change", flag => {
      if (flag) {
         // 
      }
    });
  }

  // 在组件销毁的时候要将其移除
  componentWillUnmount() {
    if (this.listener) {
      this.listener.remove();
    }
  }