OC與React Native事件交互

前言:
由于前面講解手勢沖突中涉及到OC和RN事件的交互問題,有的小伙伴不太清楚,我在這里就簡單的介紹幾種使用場景。
準(zhǔn)備:
OC與RN的交互,首先需要?jiǎng)?chuàng)建一個(gè)橋接類(RNBridgeModule)進(jìn)行管理:

RNBridgeModule.h文件

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import <React/RCTBridgeModule.h>
/**
 *  RN和iOS/OC橋接模塊
 */
@interface RNBridgeModule : NSObject<RCTBridgeModule>

@end
RNBridgeModule.m文件

#import "RNBridgeModule.h"
#import <React/RCTBridge.h>
#import <React/RCTEventDispatcher.h>

解釋:
如果原生的方法要被JavaScript進(jìn)行訪問,那么該方法需要使用RCT_EXPORT_METHOD()宏定義進(jìn)行聲明。
該聲明的RNInvokeOCCallBack方法有兩個(gè)參數(shù):
   第一個(gè)參數(shù)代表從JavaScript傳過來的數(shù)據(jù),
   第二個(gè)參數(shù)是回調(diào)方法,通過該回調(diào)方法把原生信息發(fā)送到JavaScript中。

@interface TTRNBridgeModule ()

@end
@implementation TTRNBridgeModule

@synthesize bridge = _bridge;
RCT_EXPORT_MODULE(TTRNBridgeModule)

#pragma mark --RN調(diào)用OC方法,不需要傳值和回調(diào)值
RCT_EXPORT_METHOD(rnCallNativeToMain){
      dispatch_async(dispatch_get_main_queue(), ^{
});
}

#pragma mark --RN調(diào)用OC方法,傳值過來和不需要回調(diào)值
RCT_EXPORT_METHOD(rnCallNaticeToReaderBook:(NSDictionary *)dictionary){
TTLog(@"%@",dictionary);
dispatch_async(dispatch_get_main_queue(), ^{

});
}
#pragma mark --RN調(diào)用OC方法,傳值過來和需要回調(diào)值
RCT_EXPORT_METHOD(rnInvokeisLoginCallBack:(NSDictionary *)dictionary callback:(RCTResponseSenderBlock)callback){
  NSDictionary *event =@{};
  callback(@[[NSNull null], event]);
}
#pragma mark ---下面的方法是OC調(diào)用RN中的方法,OC與RN的交互中,最麻煩的就是OC調(diào)用RN中的方法了,我盡量說得明白點(diǎn)吧,如果依然有不理解的,歡迎私信我!
#pragma mark ---開始訂閱通知事件
RCT_EXPORT_METHOD(refreshViewNotification){
  [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(refreshViewNotificationAction:) name:kNokNotificationNativeRefreshViewNotification object:nil];
}
#pragma mark ---調(diào)用RN上面方法
-(void)refreshViewNotificationAction:(NSNotification *)not{
  [self.bridge.eventDispatcher sendAppEventWithName:@"refreshView" body:nil];
}
@end

上面已經(jīng)定義完成了橋接中的方法,接下來,我們就去看看RN中如何和OC中相互調(diào)用吧

在需要交互的js文件中需要導(dǎo)入下面這個(gè)類
import {
    NativeModules,
} from 'react-native';
1、RN調(diào)用OC方法,不需要傳值
 NativeModules.RNBridgeModule.rnCallNativeToMain();
  說明:
   RNBridgeModule          OC中定義的橋接文件的名稱
   rnCallNativeToMain()    OC橋接中定義的方法名稱
2、RN調(diào)用OC方法,傳值過來和不需要回調(diào)值
 NativeModules.TTRNBridgeModule.rnCallNaticeToReaderBook(data)
3、RN調(diào)用OC方法,傳值過來和需要回調(diào)值
NativeModules.TTRNBridgeModule.rnInvokeisLoginCallBack(this.state.book, (error, event) => {
            alert(event.passportGid);
   });
4、OC調(diào)用RN中的方法
componentDidMount() {
      NativeModules.TTRNBridgeModule.refreshViewNotification();
      this.eventManager.init('refreshView', this.getBookdetail);
      初始化一個(gè)名稱為refreshView的通知隊(duì)列,
      如果觸發(fā)這個(gè)通知隊(duì)列,就會調(diào)用this.getBookdetail方法
}
      在oc中需要調(diào)用的地方發(fā)送一個(gè)通知
  [[NSNotificationCenter defaultCenter]postNotificationName:kNokNotificationNativeRefreshViewNotification object:nil];

總結(jié):
前面幾個(gè)方法可能都很好理解,最后一個(gè)可能有點(diǎn)不好理解,我后面有時(shí)間再上傳一個(gè)demo吧,這個(gè)講解,目前是我覺得最清楚的一種方式了,

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容