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

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');

最后编辑于：2018.05.18 18:08:58