RN與JS交互之-封裝iOS原生模塊

本文要講的交互場(chǎng)景是JS調(diào)用原生方法拗盒,最后由原生方法將結(jié)果回調(diào)到JS里面闸与。

react-native是在原生的基礎(chǔ)上浩峡,將接口調(diào)用統(tǒng)一為js可岂。也就是說,react-native調(diào)起原生的能力非常重要翰灾。

本文基于react-native 0.44.3

1,引入頭文件

#import <React/RCTBridgeModule.h>

2缕粹,遵守協(xié)議

@interface BaseNativeModule :? NSObject? <RCTBridgeModule>

3稚茅,導(dǎo)出模塊

@implementation? BaseNativeModule

RCT_EXPORT_MODULE( moduleName ); //用于導(dǎo)出模塊,可以設(shè)置導(dǎo)出的模塊名致开,默認(rèn)就是類名峰锁。

@end

4,導(dǎo)出方法:

RCT_EXPORT_METHOD(addEvent:(NSString*)name location:(NSString*)location)

{

//在js控制臺(tái)上打印log信息双戳。

RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);

}

這個(gè)方法是一個(gè)實(shí)例方法虹蒋。

5,js端調(diào)用飒货。

import? { NativeModules } from 'react-native

NativeModules.XXX.addEvent( param1, param2 );

需要注意魄衅,jsbundle加載需要一個(gè)js線程,在jsbundle加載的時(shí)候塘辅,react-native會(huì)去配置NativeModules晃虫,它是一個(gè)對(duì)象,或者看成是一個(gè)map扣墩,key就是模塊名哲银,value就是原生的對(duì)象。一個(gè)key對(duì)應(yīng)的原生對(duì)象只有一個(gè)呻惕,也就是說無論在RN頁面的哪個(gè)地方調(diào)用這個(gè)原生模塊荆责,實(shí)際調(diào)用的是同一個(gè)對(duì)象,需要考慮對(duì)象狀態(tài)的問題亚脆。

6做院,js回調(diào)

橋接到Javascript的方法返回值類型必須是void。React Native的橋接操作是異步的濒持,在queue里面異步執(zhí)行键耕,所以如果要返回結(jié)果給Javascript,就必須通過回調(diào)或者觸發(fā)事件來進(jìn)行柑营。這里講的是回調(diào)屈雄。回調(diào)對(duì)應(yīng)于iOS端就是通過block來回調(diào)的官套。

js回調(diào)的特點(diǎn)棚亩,發(fā)起方是js,必須是js端先發(fā)起虏杰,然后由native方回調(diào)結(jié)果到j(luò)s端處理讥蟆。

6.1 RCTResponseSenderBlock

這個(gè)block接受一個(gè)數(shù)組參數(shù),數(shù)組里面有兩個(gè)元素纺阔,第一個(gè)參數(shù)用于表示錯(cuò)誤信息瘸彤,第二個(gè)參數(shù)可以是一個(gè)數(shù)組,也可以是一個(gè)對(duì)象笛钝,總之第二個(gè)代表原生方法的返回結(jié)果质况,第一個(gè)代表獲取成功還是失敗愕宋。

6.2 Promise樣式的回調(diào)。一般用于js端try-catch結(jié)構(gòu)结榄,和Promise調(diào)用中贝。

RCTPromiseResolveBlock,對(duì)應(yīng)js里面的resolve臼朗。

RCTPromiseRejectBlock邻寿,對(duì)應(yīng)js里面的reject。

7视哑,多線程

js代碼的執(zhí)行是在js線程里面绣否,原生模塊的執(zhí)行默認(rèn)是在一個(gè)串行的GCD queue里面異步執(zhí)行的。對(duì)于原生模塊的執(zhí)行來說挡毅,默認(rèn)一個(gè)串行的GCD queue是不夠的蒜撮,我們有時(shí)候需要指定模塊所有任務(wù)執(zhí)行所在的queue。

這個(gè)可以通過重寫methodQueue的getter方法

?- (dispatch_queue_t)methodQueue

{

return dispatch_get_main_queue();

}

此外跪呈,如果一個(gè)模塊里面的幾個(gè)任務(wù)段磨,個(gè)別任務(wù)需要在一個(gè)特殊的線程里面執(zhí)行,那么只去在任務(wù)執(zhí)行的邏輯里面耗绿,指定該任務(wù)執(zhí)行所在的線程苹支。

RCT_EXPORT_METHOD(doSomethingExpensive:(NSString *)param callback:(RCTResponseSenderBlock) callback)

{

? ? ? ? dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT,0), ^{

????????// 在這里執(zhí)行長(zhǎng)時(shí)間的操作...

????????// 你可以在任何線程/隊(duì)列中執(zhí)行回調(diào)函數(shù)callback(@[...]); });

}

在模塊之間共享分發(fā)隊(duì)列:

?methodQueue方法會(huì)在模塊被初始化的時(shí)候被執(zhí)行一次,然后會(huì)被React Native的橋接機(jī)制保存下來缭乘,所以你不需要自己保存隊(duì)列的引用沐序,除非你希望在模塊的其它地方使用它琉用。但是堕绩,如果你希望在若干個(gè)模塊中共享同一個(gè)隊(duì)列,則需要自己保存并返回相同的隊(duì)列實(shí)例邑时;僅僅是返回相同名字的隊(duì)列是不行的奴紧。

8,參數(shù)類型轉(zhuǎn)換晶丘。

js與原生互相調(diào)用黍氮,除了方法簽名的不同,參數(shù)類型也是不同的浅浮,要把參數(shù)類型對(duì)應(yīng)起來沫浆。react-native框架本身做了一些轉(zhuǎn)換。包括下面這些:

string (NSString)

number ( NSInteger, float, double, CGFloat, NSNumber)

boolean (BOOL,NSNumber)

array (NSArray) 包含本列表中任意類型

object (NSDictionary) 包含string類型的鍵和本列表中任意類型的值

function (RCTResponseSenderBlock)

除此以外滚秩,任何RCTConvert類支持的的類型也都可以使用(參見RCTConvert了解更多信息)专执。RCTConvert還提供了一系列輔助函數(shù),用來接收一個(gè)JSON值并轉(zhuǎn)換到原生Objective-C類型或類郁油。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末本股,一起剝皮案震驚了整個(gè)濱河市攀痊,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌拄显,老刑警劉巖苟径,帶你破解...
    沈念sama閱讀 217,509評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異躬审,居然都是意外死亡棘街,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門盒件,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蹬碧,“玉大人,你說我怎么就攤上這事炒刁《鞴粒” “怎么了?”我有些...
    開封第一講書人閱讀 163,875評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵翔始,是天一觀的道長(zhǎng)罗心。 經(jīng)常有香客問我,道長(zhǎng)城瞎,這世上最難降的妖魔是什么渤闷? 我笑而不...
    開封第一講書人閱讀 58,441評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮脖镀,結(jié)果婚禮上飒箭,老公的妹妹穿的比我還像新娘。我一直安慰自己蜒灰,他們只是感情好弦蹂,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著强窖,像睡著了一般凸椿。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上翅溺,一...
    開封第一講書人閱讀 51,365評(píng)論 1 302
  • 那天脑漫,我揣著相機(jī)與錄音,去河邊找鬼咙崎。 笑死优幸,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的褪猛。 我是一名探鬼主播网杆,決...
    沈念sama閱讀 40,190評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了跛璧?” 一聲冷哼從身側(cè)響起严里,我...
    開封第一講書人閱讀 39,062評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎追城,沒想到半個(gè)月后刹碾,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡座柱,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3 335
  • 正文 我和宋清朗相戀三年迷帜,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片色洞。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡戏锹,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出火诸,到底是詐尸還是另有隱情锦针,我是刑警寧澤,帶...
    沈念sama閱讀 35,559評(píng)論 5 345
  • 正文 年R本政府宣布置蜀,位于F島的核電站奈搜,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏盯荤。R本人自食惡果不足惜馋吗,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望秋秤。 院中可真熱鬧宏粤,春花似錦、人聲如沸灼卢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽芥玉。三九已至蛇摸,卻和暖如春备图,著一層夾襖步出監(jiān)牢的瞬間灿巧,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工揽涮, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留抠藕,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2 370
  • 正文 我出身青樓蒋困,卻偏偏與公主長(zhǎng)得像盾似,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2 354

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