使用 DeviceEventEmitter 控制别的页面

在 native 开发中,我们可以使用广播实现事件的订阅和事件的触发,从而实现不在该页面但是可以调用该页面的方法。

在 React Native 中,我们也可以使用 DeviceEventEmitter 实现类似的功能

该方法是官方 API,调用时,直接引用就行了。

import {
    View,
    DeviceEventEmitter
} from 'react-native';

如果我们要实现

  • 在A页面:点击按钮传递参数到B页面
  • 在B页面:使用接收的参数刷新列表

操作如下

  • 在B页面实现事件的监听,假设我们将事件命名为 refreshListListener
// 加载页面时,添加事件监听
componentDidMount() {
    this.emitter =     
    DeviceEventEmitter.addListener('refreshListListener', (param) => {
        refreshList(param)
    });
}
...
// 页面卸载时,删除事件监听
componentWillUnmount() {
    this.emitter.remove()
}
  • 在A页面中,发送消息,触发B页面订阅的事件
<TouchableOpacity 
    onPress={() => {
        DeviceEventEmitter.emit('refreshListListener', {name: 'jerry', age: 100});
    }
}>
    <Text>刷新B页面的列表</Text>
</TouchableOpacity>

本文结束,欢迎大家加群共同学习

QQ群:672509442

😊😊😊😊

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,067评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,822评论 25 709
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,555评论 1 11
  • 她背着身,挑拣着纸箱里小的,或有些疤痕的梨子,五六个,装在袋子里,笑眯眯地递过来:别人送的,吃不完,你拿去吃吧。 ...
    铭玥咏全阅读 421评论 1 3
  • 坚持有规律的运动已经近两年了。一开始的目的就是想让自己有一个好身体,一年以前我就是一个活脱脱的药罐子。从生完孩子到...
    展颉阅读 684评论 0 3