RN与JS交互之-事件机制

本文的应用场景是，原生在获取一些能力之后，需要将结果发送给JS端，由JS端做进一步的处理。

Native端：

1，创建模块

#import <React/RCTBridgeModule.h>

#import <React/RCTEventEmitter.h>

@interface  XXX : RCTEventEmitter < RCTBridgeModule >

@end

2，导出。

RCT_EXPORT_MODULE();

RCT_EXPORT_MEHTOD();

3, 发消息：

[self  sendEventWithName:@"XXXXX"body:@{@"XX1": ''xx1'',

@"XX2": ''xx2''

@"XX3": ''xx3''}];

JS端

1，创建一个Native消息的接受器。

import{ NativeEventEmitter, NativeModules } from 'react-native';

const nativeEventSubscriber =newNativeEventEmitter( NativeModules.XXX );

2,订阅消息。--componentDidMount

const subscription =  nativeEventSubscriber.addListener(

eventName,

(info) => {

//js deal native message body.

} 

);

3,取消订阅。--componentWillUnmount

subscription.remove();

性能优化：

如果native端发出的消息，JS端没有订阅处理，那么对性能来说，这个开销是不必要的。react-native提供了一个模块被订阅和解除订阅的时机。

原生模块根据消息是否被订阅，来决定要不要发出消息事件。