react-native的双向通信
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获取到的数据
})
网友评论