RN 集成到現(xiàn)有原生應(yīng)用小記

  • Unable to find a specification for 'boost-for-react-native' depended upon by Folly #18085

問題地址

解決的方案: pod update

  • React Native報錯:Application XXX has not been registered.

問題地址

RN 與原生之間的通信

從原生組件傳遞屬性到React Native

我們使用RCTRootView將React Natvie視圖封裝到原生組件中。RCTRootView是一個UIView容器,承載著React Native應(yīng)用命贴。同時它也提供了一個聯(lián)通原生端和被托管端的接口。

通過RCTRootView的初始化函數(shù)你可以將任意屬性傳遞給React Native應(yīng)用满粗。參數(shù)initialProperties必須是NSDictionary的一個實例。這一字典參數(shù)會在內(nèi)部被轉(zhuǎn)化為一個可供JS組件調(diào)用的JSON對象漠嵌。

NSArray *imageList = @[@"http://foo.com/bar1.png",
              @"http://foo.com/bar2.png"];

NSDictionary *props = @{@"images" : imageList};

RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                      moduleName:@"ImageBrowserApp"
                                     initialProperties:props];

RCTRootView同樣提供了一個可讀寫的屬性appProperties嚼黔。在appProperties設(shè)置之后,React Native應(yīng)用將會根據(jù)新的屬性重新渲染瓣颅。當然倦逐,只有在新屬性和之前的屬性有區(qū)別時更新才會被觸發(fā)。

從React Native傳遞屬性到原生組件

屬性的限制

跨語言屬性的主要缺點是不支持回調(diào)方法弄捕,因而無法實現(xiàn)自下而上的數(shù)據(jù)綁定僻孝。設(shè)想你有一個小的RN視圖,當一個JS動作觸發(fā)時你想從原生的父視圖中移除它守谓。此時你會發(fā)現(xiàn)根本做不到,因為信息需要自下而上進行傳遞您单。

雖然我們有跨語言回調(diào)(參閱這里)斋荞,但是這些回調(diào)函數(shù)并不總能滿足需求。最主要的問題是它們并不是被設(shè)計來當作屬性進行傳遞虐秦。這一機制的本意是允許我們從JS觸發(fā)一個原生動作平酿,然后用JS處理那個動作的處理結(jié)果。

其他的跨語言交互(事件和原生模塊)

如上一章所說悦陋,使用屬性總會有一些限制蜈彼。有時候?qū)傩圆⒉蛔阋詽M足應(yīng)用邏輯,因此我們需要更靈活的解決辦法俺驶。這一章描述了其他的在React Native中可用的通信方法幸逆。他們可以用來內(nèi)部通信(在JS和RN的原生層之間),也可以用作外部通信(在RN和純原生部分之間)。

React Native允許使用跨語言的函數(shù)調(diào)用还绘。你可以在JS中調(diào)用原生代碼楚昭,也可以在原生代碼中調(diào)用JS。在不同端需要用不同的方法來實現(xiàn)相同的目的拍顷。在原生代碼中我們使用事件機制來調(diào)度JS中的處理函數(shù)抚太,而在React Native中我們直接使用原生模塊導出的方法。

從原生代碼調(diào)用React Natvie函數(shù)(事件)
事件的詳細用法在這篇文章中進行了討論昔案。注意使用事件無法確保執(zhí)行的時間尿贫,因為事件的處理函數(shù)是在單獨的線程中執(zhí)行。

事件很強大踏揣,它可以不需要引用直接修改React Native組件帅霜。但是,當你使用時要注意下面這些陷阱:

由于事件可以從各種地方產(chǎn)生呼伸,它們可能導致混亂的依賴身冀。
事件共享相同的命名空間,因此你可能遇到名字沖突括享。沖突不會在編寫代碼時被探測到搂根,因此很難排錯。
如果你使用了同一個React Native組件的多個引用铃辖,然后想在事件中區(qū)分它們剩愧,name你很可能需要在事件中同時傳遞一些標識(你可以使用原生視圖中的reactTag作為標識)。
在React Native中嵌入原生組件時娇斩,通常的做法是用原生組件的RCTViewManager作為視圖的代理仁卷,通過bridge向JS發(fā)送事件。這樣可以集中在一處調(diào)用相關(guān)的事件犬第。

從React Native中調(diào)用原生方法(原生模塊)

原生模塊是JS中也可以使用的Objective-C類锦积。一般來說這樣的每一個模塊的實例都是在每一次通過JS bridge通信時創(chuàng)建的。他們可以導出任意的函數(shù)和常量給React Native歉嗓。相關(guān)細節(jié)可以參閱這篇文章丰介。

事實上原生模塊的單實例模式限制了嵌入。假設(shè)我們有一個React Native組件被嵌入了一個原生視圖鉴分,并且我們希望更新原生的父視圖哮幢。使用原生模塊機制,我們可以導出一個函數(shù)志珍,不僅要接收預(yù)設(shè)參數(shù)橙垢,還要接收父視圖的標識。這個標識將會用來獲得父視圖的引用以更新父視圖伦糯。那樣的話柜某,我們需要維持模塊中標識到原生模塊的映射嗽元。 雖然這個解決辦法很復(fù)雜,它仍被用在了管理所有React Native視圖的RCTUIManager類中莺琳,

熱更新(react-native-update)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末还棱,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子惭等,更是在濱河造成了極大的恐慌珍手,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,539評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件辞做,死亡現(xiàn)場離奇詭異琳要,居然都是意外死亡,警方通過查閱死者的電腦和手機秤茅,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評論 3 396
  • 文/潘曉璐 我一進店門稚补,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人框喳,你說我怎么就攤上這事课幕。” “怎么了五垮?”我有些...
    開封第一講書人閱讀 165,871評論 0 356
  • 文/不壞的土叔 我叫張陵乍惊,是天一觀的道長。 經(jīng)常有香客問我放仗,道長润绎,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,963評論 1 295
  • 正文 為了忘掉前任诞挨,我火速辦了婚禮莉撇,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘惶傻。我一直安慰自己棍郎,他們只是感情好,可當我...
    茶點故事閱讀 67,984評論 6 393
  • 文/花漫 我一把揭開白布达罗。 她就那樣靜靜地躺著坝撑,像睡著了一般。 火紅的嫁衣襯著肌膚如雪粮揉。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,763評論 1 307
  • 那天抚笔,我揣著相機與錄音扶认,去河邊找鬼。 笑死殊橙,一個胖子當著我的面吹牛辐宾,可吹牛的內(nèi)容都是我干的狱从。 我是一名探鬼主播,決...
    沈念sama閱讀 40,468評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼叠纹,長吁一口氣:“原來是場噩夢啊……” “哼季研!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起誉察,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤与涡,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后持偏,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體驼卖,經(jīng)...
    沈念sama閱讀 45,850評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,002評論 3 338
  • 正文 我和宋清朗相戀三年鸿秆,在試婚紗的時候發(fā)現(xiàn)自己被綠了酌畜。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,144評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡卿叽,死狀恐怖桥胞,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情考婴,我是刑警寧澤贩虾,帶...
    沈念sama閱讀 35,823評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站蕉扮,受9級特大地震影響整胃,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜喳钟,卻給世界環(huán)境...
    茶點故事閱讀 41,483評論 3 331
  • 文/蒙蒙 一屁使、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧奔则,春花似錦蛮寂、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至抽莱,卻和暖如春范抓,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背食铐。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1 272
  • 我被黑心中介騙來泰國打工匕垫, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人虐呻。 一個月前我還...
    沈念sama閱讀 48,415評論 3 373
  • 正文 我出身青樓象泵,卻偏偏與公主長得像寞秃,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子偶惠,可洞房花燭夜當晚...
    茶點故事閱讀 45,092評論 2 355

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