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. 22、BlockManager原理剖析与源码分析

    一.原理 1.图解 Driver上,有BlockManagerMaster,它的功能,就是负责对各个节点上的BlockManager内部管理的数据的元数据进行维护, 比如Block的增删改等操作,都会 ...

  2. UOJ226. 【UR #15】奥林匹克环城马拉松 [组合数学,图论]

    UOJ 思路 我们知道关于有向图欧拉回路计数有一个结论:在每个点入度等于出度的时候,答案就是 \[ t_w(G)\prod (deg_i-1)! \] 其中\(t_w(G)\)是以某个点为根的树形图个 ...

  3. UOJ#401. 【CTSC2018】青蕈领主 分治,FFT

    原文链接www.cnblogs.com/zhouzhendong/p/UOJ401.html 题解 首先,对于一个排列,它的连续段一定只有包含关系,没有相交关系. 我们可以据此得到一棵表示连续段的树. ...

  4. GO获取随机数

    使用的"math/rand"包. 基本随机数 a := rand.Int() b := rand.Intn(100) //生成0-99之间的随机数 fmt.Println(a) f ...

  5. 【caffe Blob】caffe中与Blob相关的代码注释、使用举例

    首先,Blob使用的小例子(通过运行结果即可知道相关功能): #include <vector> #include <caffe/blob.hpp> #include < ...

  6. #C++初学记录(遍历)

    hide handkerchief Problem Description The Children's Day has passed for some days .Has you remembere ...

  7. 转载【2017-05-20】OpenWrt 打印机共享专用固件 (trunk, r47249)

    [2017-05-20 更新]经过研究发现,Windows 共享打印机使用 RAW 数据(不是 RAW 协议)传输,因此 CUPS 可以去掉所有的过滤器和 PPD 文件.因此重新编译了 8M 的 ar ...

  8. RabbitMQ之Topic交换器模式开发

    Topic交换器,即主题模式,进行规则匹配. 一.Provider 配置文件 spring.application.name=provider spring.rabbitmq.host=192.168 ...

  9. Linux下java进程CPU占用率高分析方法(二)

    1. 通过 top 命令查看当前系统CPU使用情况,定位CPU使用率超过100%的进程ID:2. 通过 ps aux | grep PID 命令进一步确定具体的线程信息:3. 通过 ps -mp pi ...

  10. naxsi-waf-with-ui :dockerfile

    scollazo/naxsi-waf-with-ui Dockerfile - Docker Hubhttps://hub.docker.com/r/scollazo/naxsi-waf-with-u ...