iOS原生与React-Native通信(不依赖于视图控件)
最近在写RN项目的时候遇到一个问题:当接收到后台推送的消息或者其他应用跳转过来,需要打开APP并跳转到指定页面。
这个对于iOS原来来说比较方便。一个全部React-Native(本文称为RN)实现的APP,RN对于iOS原生来说就是一个RCTRootView
控制器。原生无法直接跳转RN的内部的控制器。必须要由iOS原生去通知RN并将参数传递给RN,由RN来进行跳转。
下面大致捋一下思路:
- 新建
RCTBridgeModule
的Module类 - 发通知告诉Module类与RN进行通信
- RN在合适的位置监听Module类中的方法,接收到原生信息后进行响应操作
iOS原生部分
新建RCTBridgeModule
的Module类
新建Module类,通过Module桥接与RN进行通信。这个module其实可以实现很多功能,比如自定义iOS原生视图控件、RN调取iOS原生的SDK等。当然本次要讲的是它实现iOS原生不基于控件与哦RN进行通信。
RNBridgeModule.h
新建RNBridgeModule.h,继承RCTBridgeModule
import <Foundation/Foundation.h>
import "RCTBridgeModule.h"
@interface RNBridgeModule : NSObject<RCTBridgeModule>
@end
RNBridgeModule.m
引入RCTEventDispatcher.h
,通过RCTEventDispatcher中的方法与RN进行通信。
这里需要想办法接收iOS原生其他控制器中传递过来消息,由于桥接文件不用在其他控制器中进行实例化,所以通过代理这思路可以放弃了。还是直接使用通知进行监听吧
import "RNBridgeModule.h"
import "RCTBridge.h"
import "RCTEventDispatcher.h"
@implementation RNBridgeModule
@synthesize bridge = _bridge;
RCT_EXPORT_MODULE()
// 注册通知监听,这里为确保程序起来就可以实现监听,选择了在初始化方法中实现。
-
(instancetype)init {
self = [super init];
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(receiveSalesNotifaction:) name:@"comeFromSales" object:nil];
return self;
}
// 接收通知后将通知传递的参数一起传递给RN
- (void)receiveSalesNotifaction:(NSNotification *)notify
{
[self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder" body:notify.object];
}
React-Native部分
找到合适的位置监听原生的传递过来的方法
这里建议是app.js或者是index.js中去实现,确保程序起来后就能监听到原生方法。
监听原生的方法
这里选择了app.js(index.android.js和index.ios.js均以它作为入口)
先引入NativeAppEventEmitter
import {
NativeAppEventEmitter,
} from 'react-native';
申明订阅者
let subscription; // 订阅者
监听并执行响应操作
componentDidMount() {
subscription = NativeAppEventEmitter.addListener(
'EventReminder',
(reminder) => {
const errorCode = reminder.errorCode;
if (errorCode === 0) {
console.log('====errorCode===');
this.setState({ msg: reminder.name });
} else {
console.log('====监听成功===');
}
}
);
}
在componentWillUnmount移除监听
componentWillUnmount() {
subscription.remove();
}
通信已经实现。