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的方式发送请求的方式发送一个请求到服务端,但是处理这个请求的过程其实 ...
随机推荐
- 原生javascript禁用和屏蔽鼠标右键
(function(){ var doc=document, ua = navigator.userAgent.toLowerCase(), check = function(r){return r. ...
- Cogs 56. 质数取石子(博弈)
质数取石子 ★★ 输入文件:stonegame.in 输出文件:stonegame.out 简单对比 时间限制:1 s 内存限制:128 MB 问题描述 DD 和 MM 正在玩取石子游戏.他们的游戏规 ...
- 深入基础(二)练习题,REPL交互解析器
NPM 关于npm命令其实不算很多很多,起码比dos命令少不少呢废话少说npm命令大全and各个命令用处持续更新中..来自园子内另外一位大神~:http://www.cnblogs.com/P ...
- python 之 字符串的常用方法
split()函数: 返回以指定的字符将字符串分割成多个元素的列表 my_str = 'name is wangxiaoming' print(my_str.split()) #默认不写参数表示按空格 ...
- 第2组 团队Git现场编程实战
目录 组员职责分工(1 2分) github 的提交日志截图(2 1分) 程序运行截图(3 3分) 程序运行环境(4 1分) GUI界面(5 5分) 基础功能实现(6 10分) 鼓励有想法且有用的功能 ...
- Hadoop hadoop 机架感知配置
机架感知脚本 使用python3编写机架感知脚本,报存到topology.py,给予执行权限 import sys import os DEFAULT_RACK="/default-rack ...
- windows--zabbix-agent添加主机
1.首先在 C 盘根目录下创建 zabbix 的文件夹 2.将需要的文件拖到该文件夹内(bin/win64) 3.修改 windows 配置文件(zabbix.agent.win.conf)的 ...
- 2018-2019 20165226 Exp 8 Web基础
2018-2019 20165226 Exp 8 Web基础 目录 一.实验内容说明及基础问题回答 二.实验过程 1.Web前端:HTML 2.Web前端j:avascipt 3.Web后端:MySQ ...
- 乌龙茶生产过程中挥发性成分吲哚的形成 | Formation of Volatile Tea Constituent Indole During the Oolong Tea Manufacturing Process
吲哚是啥?在茶叶成分中的地位?乌龙茶?香气,重要的前体,比如色氨酸Trp.IAA. Indole is a characteristic volatile constituent in oolong ...
- 微信小程序之自定义底部弹出框动画
最近做小程序时,会经常用到各种弹框.直接做显示和隐藏虽然也能达到效果,但是体验性太差,也比较简单粗暴.想要美美地玩,添加点动画还是非常有必要的.下面做一个底部上滑的弹框. wxml <view ...