react-native相互通信

react-native的双向通信

demo项目下载

react->native

实现提供给react的模块，模块需要实现RCTBridgeModule协议，然后暴露给react的类名和希望react调起的方法

例如：

iOS project：

RNNativeBridgeModule.h

#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"

@interface RNNativeBridgeModule : NSObject  <RCTBridgeModule>

- (void)sendMsg;

@end

RNNativeBridgeModule.m

#import "RNNativeBridgeModule.h"


@implementation RNNativeBridgeModule

RCT_EXPORT_MODULE()

RCT_EXPORT_METHOD(AddEvent:(NSDictionary *)dictionary)
{
    NSLog(@"接收到RN传过来的数据为:%@",dictionary);
    // Date is ready to use!
}

React端：

导入：

var { NativeModules } = require('react-native');
var RNNativeBridgeModule = NativeModules.RNNativeBridgeModule;

调用：

RNNativeBridgeModule.AddEvent({'name':'huangcheng'});

iOS->react

在iOS初始化的时候，需要实例一个RCTRootView

基本我们初始化都是：

RCTRootView *view = [[RCTRootView alloc]initWithBundleURL:jsCodeLocation moduleName:@"demo" initialProperties:nil launchOptions:nil];

这里面需要仔细阅读源码（我还没怎么看）
这种方式会给view生成一个RCTBridge,同时会把这个bridge传给所有实现协议的模块，引用的只需要

@synthesize bridge = _bridge;

这里给react发送消息，需要通过bridge的eventDispatcher，简单做法就是：

[self.rtView.bridge.eventDispatcher sendAppEventWithName:@"EventReminder" body:@{@"name":@"huangcheng"}];

这时候需要在react端监听：

导入:

import { NativeAppEventEmitter } from 'react-native';

添加监听：

NativeAppEventEmitter.addListener(
         'EventReminder',
          (reminder) => {
            let errorCode=reminder.errorCode;
            //msg:reminder.name获取获取的消息
            }
          }
         );

react->native并且回调结果给react

在之前的原生模块中加入如下模式的方法

RCT_EXPORT_METHOD(RNInvokeOCCallBack:(NSDictionary *)dictionary callback:(RCTResponseSenderBlock)callback){
    NSLog(@"接收到RN传过来的数据为:%@",dictionary);
    NSArray *events = [[NSArray alloc] initWithObjects:@"黄成",@"huangcheng", nil];
    callback(@[[NSNull null], events]);
}

react端调用：

RNNativeBridgeModule.RNInvokeOCCallBack({'name':'huangcheng'}, (error,events)=>{
                //events:events获取到的数据
          })