iOS原生给React-Native的js发通知

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

import "RCTBridgeModule.h"

@interface RNBridgeModule : NSObject

@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();

}

通信已经实现。