本文的應(yīng)用場(chǎng)景是迁匠,原生在獲取一些能力之后辰狡,需要將結(jié)果發(fā)送給JS端橘蜜,由JS端做進(jìn)一步的處理菊匿。
Native端:
1,創(chuàng)建模塊
#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>
@interface? XXX : RCTEventEmitter < RCTBridgeModule >
@end
2计福,導(dǎo)出跌捆。
RCT_EXPORT_MODULE();
RCT_EXPORT_MEHTOD();
3, 發(fā)消息:
[self? sendEventWithName:@"XXXXX"body:@{@"XX1": ''xx1'',
@"XX2": ''xx2''
@"XX3": ''xx3''}];
JS端
1,創(chuàng)建一個(gè)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();
性能優(yōu)化:
如果native端發(fā)出的消息说订,JS端沒有訂閱處理抄瓦,那么對(duì)性能來說,這個(gè)開銷是不必要的陶冷。react-native提供了一個(gè)模塊被訂閱和解除訂閱的時(shí)機(jī)钙姊。
原生模塊根據(jù)消息是否被訂閱,來決定要不要發(fā)出消息事件埂伦。