美文网首页
react-native与原生Objective-C的通信

react-native与原生Objective-C的通信

作者: sweetwine | 来源:发表于2018-05-18 18:04 被阅读0次

    Objective-C向react-native发送消息

    当需要使用oc向rn发送消息时,只需要导入头文件RCTBridge.h以及RCTEventDispatcher.h,并在需要发送消息的地方添加代码

    [self.bridge.eventDispatcher sendAppEventWithName:eventName body:eventBody];
    

    但是如果使用这种方式则会出现一则警告:

    'sendAppEventWithName:body:'is deprecated: Subclass RCTEventEmitter instead

    因此,我们可以使用RCTEventEmitter对象进行发送消息,最简单的方式,我们可以让消息发送类继承自RCTEventEmitter,然后在需要发送消息的地方添加代码

    [self sendAppEventWithName:eventName body:eventBody];
    

    这样就不会再有警告了,但是此时如果运行项目的话程序就会崩溃,通过断点可以看到代码卡在了RCTAssert(RCTClassOverridesInstanceMethod(self, @selector(supportedEvents)), @"You must override the ‘supportedEvents’ method of %@", self);这里,所以我们需要复写supportedEvents方法:

    - (NSArray<NSString *> *)supportedEvents
    {
      return @[eventName];
    }
    

    这时,消息发送端的代码已经写好了。
    当rn想要接收来自oc的消息时,需要添加监听者,如果使用的是RCTEventEmitter对象发送的消息的话,添加监听者的方式是:

    /*
      OCClassName:消息发送类类名
      eventBody:oc传过来的消息实体,可作为参数在coding处使用
      eventName:string类型,需要和oc类中定义的一致
    */
    var NativeAppEventEmitter = NativeModules.OCClassName;
    var eventObject = new NativeEventEmitter(NativeAppEventEmitter);
    this.listener = eventObject.addListener(
        'eventName', (eventBody) => {
          // coding
        }
    );
    

    如果使用的是RCTEventDispatcher对象发送的消息,也就是使用[self.bridge.eventDispatcher sendAppEventWithName:eventName body:eventBody];进行消息发送的话,则可以使用更简单的监听者添加方式:

    this.listener = NativeAppEventEmitter.addListener(
        'eventName', (eventBody) => {
            // coding
         }
    );
    

    react-native向Objective-C发送消息

    react-native向oc发送消息很简单,需要让oc接收类遵守RCTBridgeModule协议,然后调用两个宏:

    /*
      此宏介意包含一个参数,用来指定js访问此模块的名字
      也可以不指定,那么久默认使用oc的类名
    */
    RCT_EXPORT_MODULE(); 
    /*
      此宏是为了抛出react-native可以调用的方法
      方法名以及参数类型根据项目需求自行定义
    */
    RCT_EXPORT_METHOD(methodName: (NSString *)msg) {
      NSLog(@"react-native 传来了 %@",msg);
    }
    

    使用react-native向oc发送消息,则需要在rn处添加

    // OCClassName为消息接收类的类名
    var sendCenter = NativeModules.OCClassName;
    // sendMessage要与在oc类中声明的方法一致
    sendCenter.sendMessage('message');
    

    相关文章

      网友评论

          本文标题:react-native与原生Objective-C的通信

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