美文网首页
RN 端 与IOS原生的交互通信

RN 端 与IOS原生的交互通信

作者: 沫toghayn丶in | 来源:发表于2019-07-23 18:11 被阅读0次

    最近在公司做一个 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()
    
    

    然后 有几种通信方式

    1. 定义导出的方法名
    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)
    }
    })
    }
    
    
    1. 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);
      })
    }
    
    
    1. 还有一种就是通知模式, 与前两者不同,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来添加监听,但先好像已经被遗弃

    相关文章

      网友评论

          本文标题:RN 端 与IOS原生的交互通信

          本文链接:https://www.haomeiwen.com/subject/srwalctx.html