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`

1
2
3

import {
  NativeAppEventEmitter,
} from 'react-native';

申明订阅者

1	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移除监听

1
2
3

componentWillUnmount() {
    subscription.remove();
}

通信已经实现。