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. Python和多线程(multi-threading)。这是个好主意码?列举一些让Python代码以并行方式运行的方法。

    Python并不支持真正意义上的多线程.Python中提供了多线程包,但是如果你想通过多线程提高代码的速度,使用多线程包并不是个好主意.Python中有一个被称为Global Interpreter ...

  2. 2019 ASP.NET / ASP.NET Core 学习路线 (有中文翻译)

    1. 点击此处查看 一个了不起的.NET Core 库.工具.框架和软件的集合 2. 以下路线 适用于 ASP NET 与 ASP NET Core (建议另存为到本地, 然后再查看) 点击此处查看 ...

  3. CAS5.3服务环境搭建

    什么是Overlay overlay可以把多个项目war合并成为一个项目,并且如果项目存在同名文件,那么主项目中的文件将覆盖掉其他项目的同名文件.使用maven 的Overlay配置实现无侵入的改造c ...

  4. js-关于异步原理的理解和总结

    我们经常说JS是单线程的,比如Node.js研讨会上大家都说JS的特色之一是单线程的,这样使JS更简单明了,可是大家真的理解所谓JS的单线程机制吗?单线程时,基于事件的异步机制又该当如何,这些知识在& ...

  5. CentOs7设置主机名称,以及主机名称和ip的对应关系

    一.修改主机名称 在CentOS7中有三种定义的主机名:静态的(static).瞬态的(transient).和灵活的(pretty).静态主机名也称为内核主机名,是系统在启动时从/etc/hostn ...

  6. Linux测试硬盘读性能的常用工具-hdparm

    通常情况下可以使用fdisk.df等命令查看硬盘的分区情况以及当前已使用空间大小.剩余空间大小等信息.但是如果要查看硬盘的硬件信息如 硬盘型号.序列号.已运行时间等信息该用什么工具查看呢? 在Linu ...

  7. linux内核在挂载ramdisk的过程中报错"RAMDISK: incomplete write (10739 != 32768)"如何处理?

    1. 原因 ramdisk大小不够 2. 解决方法 在启动变量bootargs中添加参数"ramdisk_size=10000000"即可

  8. flutter drawer 自定义图标 icon 手动打开drawer

    方法1:GlobalKey import "package:flutter/material.dart"; class Test extends StatefulWidget { ...

  9. [转载] Ubuntu上Firefox字体太小--高分屏背锅

    版权声明:本文为CSDN博主「mythinker2」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/myth ...

  10. 查看Oracle中是否有锁表

    转: 查看Oracle中是否有锁表 2018-04-23 17:59 alapha 阅读(19450) 评论(0) 编辑 收藏 一.用dba用户登录,或者将用户赋权为DBA用户 命令: su - or ...