在react native中会涉及到很多页面之间的参数传递问题。静态的参数传递通常利用组件的Props属性,在初始化组件时即可从父组件中将参数传递到子组件中。对于非父子关系的组件来说,无法直接传递参数,此时可能会用到react-navigation来传递;此外,若要将异步函数、不可预料的事件执行等得到的参数用于页面刷新时,前述的方法都不太奏效。

DeviceEventEmitter

react-native中采用了DeviceEventEmitter来实现对事件的监听,实现非父子关系的页面之间的通信。具体来说,我们可以在一个页面中通过DeviceEventEmitter来对特定名称的事件进行监听,此后每当其它位置发送该名称的事件,都会触发这个监听的响应并执行对应的函数。

DeviceEventEmitter优点在于一次注册多次响应,并且注册后的监听事件是全局性的。不仅如此,通过DeviceEventEmitter还可以与原生模块进行交互。

基本语法

导入DeviceEventEmitter

首先要引入DeviceEventEmitter,DeviceEventEmitter在原生库中,直接引入即可:

import { DeviceEventEmitter } from 'react-native';

注册监听事件

通常来说我们会在组件加载完成后开始监听事件:

componentDidMount(){
this.emitter = DeviceEventEmitter.addListener('eventName’, function);
};

addListener('eventName’, function);拥有两个参数,第一个参数是监听事件的名称,为字符串类型;第二个参数是触发监听事件后的回调函数。

发送监听事件

注册监听后,我们可以在任意位置直接使用DeviceEventEmitter.emit('eventName',params)来广播一个事件。该函数也有两个参数。第一个参数同样为事件名称;第二个参数为可选项,用于参数的传递。

卸载监听事件

当页面卸载时,卸载监听事件:

componentWillUnmount() {
this.emitter.remove()
}

与原生通信

只需要在原生模块中广播该事件即可。具体代码如下:

private void sendEvent(ReactContext reactContext,String eventName, @Nullable WritableMap params) {
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName, params);
}

上述代码发送了一个名为eventName的包含params参数的事件,值得注意的是发送该事件的前提是react native环境已经加载完成,需要获取其上下文ReactContext。

示例——react native响应通知消息点击事件

react native无法直接监听广播事件,因此需要用到原生模块协助。此处通过两次监听事件,采用安卓原生广播+安卓与react native通信来实现react native对通知消息点击事件的响应。

获取通知内容

第一步采用通过安卓原生模块监听通知点击事件(参见安卓广播机制)并获取到通知携带的参数信息。

public static class NotificationReceiver extends BroadcastReceiver {
@Override
public void onReceive(Context context, Intent intent) {
if(intent.getAction().equals("androidNotification")){//响应通知事件
String params = intent.getExtras().getString("params");
if(params != null){
sendEventToRn("RNnotification",params);//发送事件给RN
}
}
}
} public static void sendEventToRn(String eventName, @Nullable String params){
//这里的模块中context已经获取
context.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit("notification", params);
}

'RNnotification','androidNotification'为静态注册的广播接收器。广播的发送需要在通知消息的设置处自定义。本项目中处理过程如下:

Intent intent =new Intent();
intent.setAction("androidNotification");
intent.putExtra("params",msg.getRaw().toString());
Activity currentActivity = MainActivity.getCurrentActivity();//这里获取的是当前activity
currentActivity.sendBroadcast(intent);

然后在react native中监听通知事件'RNnotification'

DeviceEventEmitter.addListener('notification',this.notification);
console.log('开始监听通知'); notification = (paramString) =>{
//...此处实现了根据参数导航到指定页面
}

大功告成。

[技术博客]react native事件监听、与原生通信——实现对通知消息的响应的更多相关文章

  1. [技术博客]React Native——HTML页面代码高亮&数学公式解析

    问题起源 原有博文显示时代码无法高亮,白底黑字的视觉效果不好. 原有博文中无法解析数学公式,导致页面会直接显示数学公式源码. 为了解决这两个问题,尝试了一些方法,最终利用开源类库实现了页面美化. (失 ...

  2. react入门----事件监听

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. react native 之 事件监听 和 回调函数

    同原生一样,react native 同样也有事件监听和回调函数这玩意. 场景很多,比如:A界面push到B界面,B界面再pop回A界面,可以给A界面传值或者告诉A刷新界面. 事件监听 事件监听类似于 ...

  4. React.js 小书 Lesson9 - 事件监听

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson9 转载请注明出处,保留原文链接和作者信息. 在 React.js 里面监听事件是很容易的事情 ...

  5. React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路

    React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...

  6. WebView使用详解(二)——WebViewClient与常用事件监听

      登录|注册     关闭 启舰 当乌龟有了梦想……       目录视图 摘要视图 订阅 异步赠书:Kotlin领衔10本好书      免费直播:AI时代,机器学习如何入门?      程序员8 ...

  7. 技术博客——微信小程序的架构与原理

    技术博客--微信小程序的架构与原理 在两个月的微信小程序开发过程中,我曾走了不少弯路,也曾被很多现在看来十分可笑的问题所困扰.这些弯路与困扰,基本上都是由于当时对小程序的架构理解不够充分,对小程序的原 ...

  8. ******IT公司面试题汇总+优秀技术博客汇总

    滴滴面试题:滴滴打车数据库如何拆分 前端时间去滴滴面试,有一道题目是这样的,滴滴每天有100万的订单,如果让你去设计数据库,你会怎么去设计? 当时我的想法是根据用户id的最后一位对某个特殊的值取%操作 ...

  9. ExtJs内的datefield控件选择日期过后的事件监听select

    [摘要]: 选择时间过后我们为什么需要监听事件?一般有这样一种情况,那就是用于比较两个时间大小或者需要判断在哪个时间点上需要做什么样的操作.基于这样的种种情况,我们很有必要琢磨一下datefield控 ...

随机推荐

  1. Kubemetes

    将应用docker化,配合ETCD.kubernetes等工具在容器的层面上实现高可用和负载均衡 容器化部署 容器化部署应用具有灵活.高效的使用资源,容器可以包含其所需的全部文件,如同在虚拟机上部署应 ...

  2. 【转载】C#中AddRange方法往ArrayList集合末尾添加另一个集合

    ArrayList集合是C#中的一个非泛型的集合类,是弱数据类型的集合类,可以使用ArrayList集合变量来存储集合元素信息,任何数据类型的变量都可加入到同一个ArrayList集合中,如果需要往一 ...

  3. 学习笔记之Python 3

    学习笔记之Python 3 教程 https://www.cnblogs.com/pegasus923/p/7624416.html 学习笔记之X分钟速成Python3 https://www.cnb ...

  4. Django:RestFramework之-------频率控制

    5.频率控制 5.1频率监控代码实现 import time VISIT_RECORD = {} class VisitThrottle(object): def __init__(self): #定 ...

  5. consul:connect

    官方文档:https://www.consul.io/docs/connect/index.html#getting-started-with-connect consul connect的功能类似与 ...

  6. 补充1:IDA的脚本IDC语言

    1.IDA脚本的打开与使用: IDA脚本两种语言:IDC(IDC,本地脚本语言)和Python 2.IDC语言介绍 1.IDC变量:IDC是一种松散的语言,没有明确的类型.使用3中数据类型,整数(ID ...

  7. vagrant 无法挂载共享目录

    Vagrant was unable to mount VirtualBox shared folders. This is usually because the filesystem " ...

  8. es聚合后排序

    注意: es版本至少6.1以上 语句: GET 76/sessions/_search { "size": 0, "query": { "bool&q ...

  9. 如何预防SQL注入

    归纳一下,主要有以下几点: 1.永远不要信任用户的输入.对用户的输入进行校验,可以通过正则表达式,或限制长度:对单引号和 双"-"进行转换等. 2.永远不要使用动态拼装sql,可以 ...

  10. 记录一次win2003服务器的IIS服务加载.flv后缀的资源报错404的处理方法

    问题:访问某个域名下的xxxx.flv资源,页面报错404. 解决思路: 1.权限是否给足 user权限给完全控制咯 如果你访问该域名下的其他资源无问题的话就不是介个原因了 2.MIME类型是否少了 ...