React Native 使用DeviceEventEmitter实现事件监听和触发

最新推荐文章于 2023-03-13 15:38:54 发布

首席外科戴夫

最新推荐文章于 2023-03-13 15:38:54 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： react native DeviceEventEmitter

本文链接：https://blog.youkuaiyun.com/weixin_44557421/article/details/87944520

学习笔记专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何在React Native中利用DeviceEventEmitter进行跨组件通信，特别是在子页面或同级页面间操作时，当组件之间的联系较弱时，DeviceEventEmitter提供了一种事件监听和触发的方法。通过增加监听事件和触发事件的示例代码，阐述了其在实际项目中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React Native 使用DeviceEventEmitter实现事件监听和触发

业务场景：
在子页面或者同级页面进行了操作，组件之间联系很弱，这时可以用DeviceEventEmitter来实现事件监听

增加监听事件：


  componentDidMount() {
    this.updataFetchEmitter = DeviceEventEmitter.addListener(
      'fetchEmitter', () => {
        this.fetchData();
      },
    );
  }

  componentWillUnmount() {
    const removeEvent = eee => eee && eee.remove();
    removeEvent(this.updataFetchEmitter);
  }

触发监听事件：


  whenFinished() {
    DeviceEventEmitter.emit('fetchEmitter');
  }

完整代码 — PageA：

import React, { Component } from 'react';
import { View, Text,TouchableOpacity,DeviceEventEmitter } from 'react-native';
import { Navigation } from 'react-native-navigation';

export default class PageA extends Component {

  componentDidMount() {
    this.updataFetchEmitter = DeviceEventEmitter.addListener(
      'fetchEmitter', () => {
        Alert.alert(
		  '提示',
		  '这是从另一个纬度传来的消息，不要回复x3',
		  [
		  	{text:'回复',onPress: ()=> console.log('回复') },
		  	{text:'回复',onPress: ()=> console.log('回复') },
		  ],
	    );
      },
    );
  }

  componentWillUnmount() {
    const removeEvent = eee => eee && eee.remove();
    removeEvent(this.updataFetchEmitter);
  }

  toPageB() {
  	Navigation.push('/pageB');
  }

  render() {
    return (
      <View>
      	<TouchableOpacity onPress={this.toPageB}>
      		<Text>点我专跳到pageB</Text>
      	</TouchableOpacity>
      </View>
    )
  }  
}

PageB：

import React, { Component } from 'react';
import { View, Text,TouchableOpacity,DeviceEventEmitter } from 'react-native';
import { Navigation } from 'react-native-navigation';

export default class PageB extends Component {

  whenFinished() {
    DeviceEventEmitter.emit('fetchEmitter');
  	Navigaition.back();
  }

  render() {
    return (
      <View>
      	<TouchableOpacity onPress={this.whenFinished}>
      		<Text>点我点我</Text>
      	</TouchableOpacity>
      </View>
    )
  }  
}