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)系作者
  • 序言:七十年代末畔规,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子恨统,更是在濱河造成了極大的恐慌叁扫,老刑警劉巖三妈,帶你破解...
    沈念sama閱讀 211,376評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異莫绣,居然都是意外死亡畴蒲,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,126評論 2 385
  • 文/潘曉璐 我一進(jìn)店門对室,熙熙樓的掌柜王于貴愁眉苦臉地迎上來模燥,“玉大人,你說我怎么就攤上這事掩宜∧杪睿” “怎么了?”我有些...
    開封第一講書人閱讀 156,966評論 0 347
  • 文/不壞的土叔 我叫張陵牺汤,是天一觀的道長辽旋。 經(jīng)常有香客問我,道長檐迟,這世上最難降的妖魔是什么补胚? 我笑而不...
    開封第一講書人閱讀 56,432評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮锅减,結(jié)果婚禮上糖儡,老公的妹妹穿的比我還像新娘。我一直安慰自己怔匣,他們只是感情好握联,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,519評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著每瞒,像睡著了一般金闽。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上剿骨,一...
    開封第一講書人閱讀 49,792評論 1 290
  • 那天代芜,我揣著相機(jī)與錄音,去河邊找鬼浓利。 笑死挤庇,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的贷掖。 我是一名探鬼主播嫡秕,決...
    沈念sama閱讀 38,933評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼苹威!你這毒婦竟也來了昆咽?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,701評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎掷酗,沒想到半個(gè)月后调违,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,143評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡泻轰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,488評論 2 327
  • 正文 我和宋清朗相戀三年技肩,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片浮声。...
    茶點(diǎn)故事閱讀 38,626評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡亩鬼,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出阿蝶,到底是詐尸還是另有隱情,我是刑警寧澤黄绩,帶...
    沈念sama閱讀 34,292評論 4 329
  • 正文 年R本政府宣布羡洁,位于F島的核電站,受9級特大地震影響爽丹,放射性物質(zhì)發(fā)生泄漏筑煮。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,896評論 3 313
  • 文/蒙蒙 一粤蝎、第九天 我趴在偏房一處隱蔽的房頂上張望真仲。 院中可真熱鬧,春花似錦初澎、人聲如沸秸应。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽软啼。三九已至,卻和暖如春延柠,著一層夾襖步出監(jiān)牢的瞬間祸挪,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工贞间, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留贿条,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓增热,卻偏偏與公主長得像整以,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子钓葫,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,494評論 2 348

推薦閱讀更多精彩內(nèi)容