A页面注册通知:

import  {DeviceEventEmitter} from 'react-native';
//…
//调用事件通知
DeviceEventEmitter.emit('xxxName',param);
//xxxName:通知的名称 param:发送的消息(传参)

B页面接收通知:

componentDidMount(){
var self = this;
this.listener =DeviceEventEmitter.addListener('xxxName',function(param){ // use param do something
});
}
//xxxName:通知的名称 param:接收到的消息(传参) componentWillUnmount(){
this.listener.remove();
} //在componentWillUnmount 内需要我们手动移除通知

我的页面在获取到用户数据后:

  //注册监听事件,时间名称:changeMine  传参:jsonData.avatar(头像url)
DeviceEventEmitter.emit('changeMine',jsonData.avatar);

tabbar.js文件

componentDidMount(){

    var self = this;
this.listener = DeviceEventEmitter.addListener('changeMine',function(url){
self.setState({
avatar:url
})
}); //通知开始,获取到url,调用setState 方法,刷新状态机,这时候实时的刷新了‘我的’图标 //最后别忘了移除通知
componentWillUnmount(){
this.listener.remove();
}

使用实例:

1.  点击底部按钮 触发分享朋友圈 / 下载海报图片(包括二维码)

//触发
_share(type = undefined) {
if (this.props.type === 'letter') {
DeviceEventEmitter.emit('_getSharePage', type); //全局注册分享事件
}
} <Button
onPress={() => {
this._share('wechat')
}}
title={分享到微信}
/> <Button
onPress={() => {
this._share('save')
}}
title={下载海报}
/>

调用


import ViewShot, {captureRef} from "react-native-view-shot";   //将React Native视图捕获到图像。

import QRCode from 'react-native-qrcode-svg';   //将React Native图片生成二维码
 
import CameraRoll from "@react-native-community/cameraroll"; //这里需要pod很多个文件
 
import {check, PERMISSIONS, RESULTS} from 'react-native-permissions';  //获取手机权限  

componentDidMount() {
// Toast.hide();
this.listener = DeviceEventEmitter.addListener('_getSharePage', (params) => {
captureRef(this.refs.viewShot, { //通过 ViewShot 绑定的ref来设置截图的类型大小格式
format: "jpg",
quality: 1.0,
result: 'tmpfile',
// snapshotContentContainer:true }).then(
uri => { //uri就是返回的图片地址
switch (params) {
case 'qq':
break;
case 'wechat':
let message = {
platform: "wechat_session",
type: 'image',
imagePath: uri
};
JShareModule.share(message, (map) => {
if (map.state === 'success') {
// Toast.message('分享成功')
}
}, (map) => {
Toast.message('请安装微信后尝试')
// console.log("share failed, map: " + map);
})
break;
case 'pyq':
let wechat = {
platform: "wechat_timeLine",
type: 'image',
imagePath: uri
};
JShareModule.share(wechat, (map) => {
// Toast.message('分享成功')
}, (map) => {
Toast.message('取消分享')
})
break;
case 'weibo':
break;
default:
// if(!this.state.select){
// Toast.message('请选择封面图')
// return;
// }
if (Platform.OS === 'ios') { check(PERMISSIONS.IOS.PHOTO_LIBRARY).then(response => {
// if (response === 'authorized') { // } else {
// Toast.message('保存相片的权限没开启,请在iPhone的“设置-隐私”选项中,允许修改您的相册') // }
switch (response) {
case RESULTS.UNAVAILABLE:
console.log(
'This feature is not available (on this device / in this context)',
);
break;
case RESULTS.DENIED:
console.log(
'The permission has not been requested / is denied but requestable',
);
break;
case RESULTS.GRANTED:
console.log('The permission is granted');
CameraRoll.saveToCameraRoll(uri,'photo').then(res => {
Toast.message('邀请好友截图保存成功');
}).catch(err => { Toast.message(err);
})
break;
case RESULTS.BLOCKED:
console.log('The permission is denied and not requestable anymore');
break;
}
}).catch(err => {
console.log('看看错误是什么',err);
Toast.message('有错误找原因')
})
} else {
try {
PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
).then(granted => {
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
CameraRoll.saveToCameraRoll(uri, 'photo').then(res => {
Toast.message('邀请好友截图保存成功');
}).catch(err => {
Toast.message(err);
})
} else {
Toast.message('保存失败, 请授予权限');
}
}).catch(err => {
Toast.message('保存失败, 请授予权限');
}) } catch (err) {
Toast.message('保存失败, 请授予权限');
}
}
break;
}
},
error => {
Toast.message(error); }
).catch(err => {
console.log(err);
});
})
}
 <ViewShot ref="viewShot" >
      <QRCode
        value={Config.domain + '/web/register?invite_code=' + this.props.inviteCode}
        size={168}
        bgColor='#000'
        fgColor='white'
      />
 </ViewShot>
 

DeviceEventEmitter React-Native 发送和接受消息(事件监听器)的更多相关文章

  1. kafka模拟客户端发送、接受消息

    producer   消息的生成者,即发布消息 consumer   消息的消费者,即订阅消息 broker     Kafka以集群的方式运行,可以由一个或多个服务组成,服务即broker zook ...

  2. linux上kafka模拟客户端发送、接受消息

    producer   消息的生成者,即发布消息 consumer   消息的消费者,即订阅消息 broker     Kafka以集群的方式运行,可以由一个或多个服务组成,服务即broker zook ...

  3. java 操作 RabbitMQ 发送、接受消息

    例子1 Producer.java import java.io.IOException; import java.util.concurrent.TimeoutException; import c ...

  4. [技术博客]react native事件监听、与原生通信——实现对通知消息的响应

    在react native中会涉及到很多页面之间的参数传递问题.静态的参数传递通常利用组件的Props属性,在初始化组件时即可从父组件中将参数传递到子组件中.对于非父子关系的组件来说,无法直接传递参数 ...

  5. ActiveMQ实现消息的发送与接受

    activemq是apache的一个JMS接口的实现产品,java中定义了JMS规范,虽然RocketMQ,kafka现在比较火,但是还是建议先学一下activeMQ再学其他两个就容易很多 首先可以下 ...

  6. H5、React Native、Native应用对比分析

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博!iOS开发者交流QQ群: 446310206 "存在即合理".凡是存在的,都是合乎规律的.任何新 ...

  7. react native 布局注意点

    一.react native中很多是ES6语法. 1行.表示是js的严格模式. 'use strict';严格模式中变量必须先声明,然后赋值.定义等:还有就是this的绑定. 2行到8行.导入依赖,可 ...

  8. C++服务器设计(五):多设备类型及消息事件管理

    在传统的服务器系统中,服务器仅针对接收到的客户端消息进行解析,并处理后回复响应.在该过程中服务器并不会主动判断客户端类型.但在现实中,往往存在多种类型的客户端设备,比如物联网下的智能家居系统,就存在智 ...

  9. React Native 网络层分析

    文:志俊(沪江Web前端) 本文原创,转载请注明作者及出处 在使用React Native开发中,我们熟练的采用JavaScript的方式发送请求的方式发送一个请求到服务端,但是处理这个请求的过程其实 ...

随机推荐

  1. Leetcode32. 最长有效括号

    32. 最长有效括号 做法 \(f_{i}\)以\(i\)结尾的最长匹配 前提为\(s[i]=')'\) \(s[i-1]='('\),则\(f[i]=f[i-2]+2\) \(s[i-1]=')'\ ...

  2. Hadoop NameNode 元数据以及查看元数据的方式

    HDFS中NameNode工作机制1.NameNode的主要功能(1)负责客户端请求的响应: (2)负责元数据的管理. 2.元数据管理namenode对数据管理采用了三种存储形式: (1)内存元数据: ...

  3. [转载] 浏览器Browser对同域名下的请求并发数量

    原文链接:https://blog.csdn.net/a562550212/article/details/79552713 另附原文作者贴的一个知乎地址,几个答主讲的非常好  https://www ...

  4. arts打卡13周

    算法: 报数序列是一个整数序列,按照其中的整数的顺序进行报数,得到下一个数.其前五项如下: 1. 12. 113. 214. 12115. 1112211 被读作  "one 1" ...

  5. various system release [online]

    1. 金丝雀发布 Canary 简单的金丝雀测试一般通过手工测试验证,复杂的金丝雀测试需要比较完善的监控基础设施配合,通过监控指标反馈,观察金丝雀的健康状况,作为后续发布或回退的依据. 金丝雀发布,一 ...

  6. 【Tomcat】本地域名访问配置

    原路径:localhost:8080/jsja 1.把8080端口改为80端口 打开%TOMCAT_HOME%/conf/server.xml <Connector connectionTime ...

  7. iTop汉化

  8. https://pingcap.com/blog-cn/flame-graph/

    https://pingcap.com/blog-cn/flame-graph/ 因为 TiKV 是自己内部使用了 jemalloc,并没有用系统的 malloc,所以我们不能直接用 perf 来探查 ...

  9. ActiveMQ处理模式

    一.PTP处理模式(Queue) 消息生产者生产消息发送到queue中,然后消息消费者从queue中取出并且消费消息. 消息被消费以后,queue中不再有存储,所以消息消费者不可能消费到已经被消费的消 ...

  10. Eclipse 的快捷键以及文档注释、多行注释的快捷键 一、多行注释快捷键

    一.多行注释快捷键 1.选中你要加注释的区域,用ctrl+shift+C 或者ctrl+/ 会加上//注释2.先把你要注释的东西选中,用shit+ctrl+/ 会加上/*    */注释 3.以上快捷 ...