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

在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) =>{
    //...此处实现了根据参数导航到指定页面
}

大功告成。

转载于:https://www.cnblogs.com/PureMan6/p/10888890.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用 React Native 进行 NFC 通信的简单示例代码: ```javascript import React, { Component } from 'react'; import { View, Text, Platform, NativeModules, NativeEventEmitter } from 'react-native'; const { NFCManager } = NativeModules; const nfcEmitter = new NativeEventEmitter(NFCManager); export default class App extends Component { constructor(props) { super(props); this.state = { nfcStatus: '未连接', nfcData: '', }; } componentDidMount() { nfcEmitter.addListener('NFCStatus', (status) => { this.setState({ nfcStatus: status }); }); nfcEmitter.addListener('NFCData', (data) => { this.setState({ nfcData: data }); }); if (Platform.OS === 'android') { NFCManager.start(); } } componentWillUnmount() { nfcEmitter.removeAllListeners('NFCStatus'); nfcEmitter.removeAllListeners('NFCData'); if (Platform.OS === 'android') { NFCManager.stop(); } } render() { return ( <View> <Text>NFC 状态:{this.state.nfcStatus}</Text> <Text>NFC 数据:{this.state.nfcData}</Text> </View> ); } } ``` 上述代码中,首先导入了 React Native 提供的一些组件和模块,包括 `View`、`Text`、`Platform`、`NativeModules` 和 `NativeEventEmitter` 等。 然后在组件的构造函数中初始化了状态 `nfcStatus` 和 `nfcData`,分别用于保存 NFC 的连接状态和数据。 接着在 `componentDidMount` 生命周期中,通过 `NativeEventEmitter` 监听了 `NFCStatus` 和 `NFCData` 两个事件,用于更新状态中的 NFC 状态和数据。 最后在 `render` 方法中,使用 `View` 和 `Text` 组件展示了 NFC 的状态和数据。 需要注意的是,上述代码中的 `NFCManager` 模块是自己编写的 Native Module,用于与原生代码进行交互,具体实现方式可以参考 React Native 官方文档中的相关章节。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值