DeviceEventEmitter React-Native 发送和接受消息(事件监听器)
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={下载海报}
/>
调用
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);
});
})
}
DeviceEventEmitter React-Native 发送和接受消息(事件监听器)的更多相关文章
- kafka模拟客户端发送、接受消息
producer 消息的生成者,即发布消息 consumer 消息的消费者,即订阅消息 broker Kafka以集群的方式运行,可以由一个或多个服务组成,服务即broker zook ...
- linux上kafka模拟客户端发送、接受消息
producer 消息的生成者,即发布消息 consumer 消息的消费者,即订阅消息 broker Kafka以集群的方式运行,可以由一个或多个服务组成,服务即broker zook ...
- java 操作 RabbitMQ 发送、接受消息
例子1 Producer.java import java.io.IOException; import java.util.concurrent.TimeoutException; import c ...
- [技术博客]react native事件监听、与原生通信——实现对通知消息的响应
在react native中会涉及到很多页面之间的参数传递问题.静态的参数传递通常利用组件的Props属性,在初始化组件时即可从父组件中将参数传递到子组件中.对于非父子关系的组件来说,无法直接传递参数 ...
- ActiveMQ实现消息的发送与接受
activemq是apache的一个JMS接口的实现产品,java中定义了JMS规范,虽然RocketMQ,kafka现在比较火,但是还是建议先学一下activeMQ再学其他两个就容易很多 首先可以下 ...
- H5、React Native、Native应用对比分析
每日更新关注:http://weibo.com/hanjunqiang 新浪微博!iOS开发者交流QQ群: 446310206 "存在即合理".凡是存在的,都是合乎规律的.任何新 ...
- react native 布局注意点
一.react native中很多是ES6语法. 1行.表示是js的严格模式. 'use strict';严格模式中变量必须先声明,然后赋值.定义等:还有就是this的绑定. 2行到8行.导入依赖,可 ...
- C++服务器设计(五):多设备类型及消息事件管理
在传统的服务器系统中,服务器仅针对接收到的客户端消息进行解析,并处理后回复响应.在该过程中服务器并不会主动判断客户端类型.但在现实中,往往存在多种类型的客户端设备,比如物联网下的智能家居系统,就存在智 ...
- React Native 网络层分析
文:志俊(沪江Web前端) 本文原创,转载请注明作者及出处 在使用React Native开发中,我们熟练的采用JavaScript的方式发送请求的方式发送一个请求到服务端,但是处理这个请求的过程其实 ...
随机推荐
- RookeyFrame 迁移 线下Model 新增属性 迁移 到数据库
在类库 Rookey.BusSys.Operate(类库) -> InitOperate.cs(类) -> App_Start(方法) 添加代码(举例): ToolOperate.Rep ...
- mock模拟后台数据
import Mock from 'mockjs' const Random = Mock.Random // 获取random对象,随机生成各种数据,具体请翻阅文档 const domain = ' ...
- flutter 省市区选择器 city_pickers 的简单实用
Github地址:https://github.com/hanxu317317/city_pickers packages地址: https://pub.flutter-io.cn/packages/ ...
- 《挑战30天C++入门极限》新手入门:关于C++中的内联函数(inline)
新手入门:关于C++中的内联函数(inline) 在c++中,为了解决一些频繁调用的小函数大量消耗栈空间或者是叫栈内存的问题,特别的引入了inline修饰符,表示为内联函数. 可能说到这里,很 ...
- linux 常用性能优化
linux 常用性能优化 1. 优化内核相关参数 配置文件/etc/sysctl.conf 配置方法直接将参数添加进文件每条一行. sysctl -a可以查看默认配置 sysctl -p 执行并检测是 ...
- 【洛谷】P2568 GCD
前言 耻辱,我这个OI界的耻辱! 题目描述 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对.输入格式 一个整数N输出格式答案输入输出样例 输入 4 ...
- 前端优化DNS预解析
写在前面 今天再看一同事写的代码,发现了这样<link rel="dns-prefetch" href="//hm.baidu.com">这个代码, ...
- 开源JS图片裁剪插件
开源JS图片裁剪插件 一.总结 一句话总结: 要用点赞最高的插件,这样适用性最好,效果最好,出问题的概率也最低,这里电脑端和手机端都可以用的建议用 cropper.js 二.5款好用的开源JS图片裁剪 ...
- Jira 入门【转】
JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领域.它是一个集 项目计划.任务分配.需求管理.错误跟踪 ...
- tansition-group 使用方法
<transition-group name="breadcrumb"> <el-breadcrumb-item v-for="(item,index) ...