RN 端与IOS原生的交互通信

最近在公司做一个 RN 项目, 其中因为对接了一些友盟推送等功能,于是需要和原生通信数据,于是上网查了下,这类资料在网上已经有许多了,在这就做个整理,也为自己加深印象

首先 RN 与 IOS 通信,在原生端需创建一个bridge ,并遵守<RCTBridgeModule>协议


#import <React/RCTBridgeModule.h>

@interface PushModule : NSObject<RCTBridgeModule>

其次,在@implementation中导出 Module,这里,当导出 module,也就是RCT_EXPORT_MODULE()之后,RN 中引用这个 module,就会自动创建一个对象,IOS 原生这边不要额外 alloc 或者 new 一个新对象

@implementation PushModule

RCT_EXPORT_MODULE()

然后有几种通信方式

定义导出的方法名

RCT_EXPORT_METHOD(pushEvent:(NSString *)event callback:(RCTResponseSenderBlock)callback){
  NSLog(@"----对React Native提供调用方法,Callback---%@",event);
  NSString *callbackData = @"原生数据被RN调用"; //准备回调回去的数据
  callback(@[[NSNull null],callbackData]);
}

定义一个方法后,RN 就可通过NativeModules获取到对于 Module后调用相应方法,event是 RN 传给 IOS 的值,IOS 这边可通过 callback 这个 block 回调给 RN 数据

callBackEvent (){
NativeModules.PushModule.pushEvent(('RN->原生的数据'),(error, events) => {
if (error) {
console.log(error);
        }else {
alert(events)
}
})
}

promise实现的回调函数
这种,原生这边区别不是很大, 但回调 block 得使用特定的

static RCTPromiseResolveBlock _resolve;//成功回调
static RCTPromiseRejectBlock _reject;//失败回调

RCT_REMAP_METHOD(pushPromisesEvent,
                 resolver:(RCTPromiseResolveBlock)resolve
                 rejecter:(RCTPromiseRejectBlock)reject){
  _resolve = resolve;
  _reject = reject;
 }

//异步回调函数

+(void) handleResult:(id)result{
  //原生Promises数据被RN调用
  if ([result isEqualToString:@"获取数据成功"]) {
     _resolve(@[result]);
  }else{
    //返回错误信息
    NSError *error=[NSError errorWithDomain:result code:101 userInfo:nil];
       _reject(@"no_events", @"There were no events", error);
  }
}

RN 调用方法

NativeModules.PushModule.pushPromisesEvent().then((events)=>{
alert(events+1111)
}).catch((e)=>{
// alert(e)
        console.log("错误信息------"+e);
  })
}

还有一种就是通知模式, 与前两者不同,IOS 原生 module 不仅要遵守协议,还要继承RCTEventEmitter类

#import <React/RCTEventEmitter.h>
#import <React/RCTBridgeModule.h>
@interface PushModule : RCTEventEmitter<RCTBridgeModule>

在 .m 的实现中有几个继承方法需要实现

//IOS 回传给 RN 的通知方法
- (NSArray*)supportedEvents{
  return @[@"Notice_name"]
}

- (void)startObserving
{
  [PushTool sharedPushTool].isReady = YES;
  [[NSNotificationCenter defaultCenter] addObserver:self
                                           selector:@selector(notice:)
                                               name:@"event-notice"
                                             object:nil];
}

-(void)notice:(NSNotification*)notification
{
  NSDictionary*obj = notification.object;
  [self sendEventWithName:@"Notice_name" body:obj];
}

在 RN 这边添加监听

 var module   = new    NativeEventEmitter(NativeModules.PushModule)
module.addListener('Notice_name',(data)=>this.message(data));

之前 IOS 也可以和安卓那边统一,使用DeviceEventEmitter来添加监听,但先好像已经被遗弃

最后编辑于：2019.07.23 18:15:24

RN 端 与IOS原生的交互通信

RN 端与IOS原生的交互通信