reactnative在app開(kāi)發(fā)中的應(yīng)用研究

焦鋒

摘要：React Native是2015年FaceBook研究的一種新的開(kāi)發(fā)APP的技術(shù)，通過(guò)JavaScript語(yǔ)言來(lái)開(kāi)發(fā)APP，且有一次開(kāi)發(fā)隨處使用的理念。因此，也是目前最火的APP前言技術(shù)之一。本文主要對(duì)該技術(shù)在APP開(kāi)發(fā)中的應(yīng)用進(jìn)行研究，主要從開(kāi)發(fā)方式、熱更新特點(diǎn)和方法等多個(gè)方面進(jìn)行研究。

關(guān)鍵詞：React Native；app；熱更新；JavaScript

中圖分類(lèi)號(hào)：TN929.53 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007-9416（2017）06-0109-01

1 單純的React Native APP應(yīng)用

單純的React Native應(yīng)用，實(shí)際上就可以理解成是原生應(yīng)用的一個(gè)Activity，通過(guò)啟動(dòng)著一個(gè)Activity之后，就通過(guò)JS中的各個(gè)state狀態(tài)，來(lái)刷新各個(gè)View界面，然后一個(gè)APP應(yīng)用就誕生了。在這種APP應(yīng)用中，主要是由組件組成中，各個(gè)組件組裝成一個(gè)大的View。而View 主要是通過(guò)state和props來(lái)獲取所有的數(shù)據(jù)以及數(shù)據(jù)改變時(shí)更新View界面。在這種應(yīng)用中，采用的是盒子布局方式，這種布局方式與原生不同，具有很大的靈活性，分主軸和次軸。然后分別可以設(shè)置其樣式。

2 原生APP與React Native APP混合開(kāi)發(fā)的應(yīng)用

2.1 React Native Activity的自定義

如果進(jìn)行一個(gè)RN項(xiàng)目開(kāi)發(fā)，初始化項(xiàng)目之后，就會(huì)有一個(gè)Activity是繼承RnActivity的。如果進(jìn)行混合開(kāi)發(fā)時(shí)，由于我們的Activity可能要做很多工作，還想繼承我們?cè)腁ctivity。因此，就可以自定義一個(gè)RN的Activity，無(wú)須繼承官網(wǎng)的Activity。假如，我們已經(jīng)有了一個(gè)BaseActivity。內(nèi)部可以使用路由進(jìn)行跳轉(zhuǎn)。但是混合開(kāi)發(fā)明顯不行，否則將無(wú)法正常的在RN和原生界面之間進(jìn)行來(lái)回跳轉(zhuǎn)。即便可以，復(fù)雜度也會(huì)大大增加。經(jīng)過(guò)嘗試，在一個(gè)混合項(xiàng)目中，可以有若干個(gè)RN的Activity，每一個(gè)Activity可以開(kāi)發(fā)一個(gè)功能。只需要修改上文中的index.android。只要把入口修改了，它就會(huì)從不同的入口去找，同時(shí)在js入口文件中，要進(jìn)行注冊(cè)。

2.2 原生與JS之間的相互調(diào)用

對(duì)于JS方法來(lái)說(shuō)，是離不開(kāi)原生應(yīng)用的，React Native開(kāi)發(fā)的實(shí)質(zhì)還是進(jìn)行的原生開(kāi)發(fā)。而且有很多東西，比如硬件的mac、域名獲取或者其他只有原生方法能夠?qū)崿F(xiàn)的功能，就必須通過(guò)原生方法來(lái)實(shí)現(xiàn)，然后由JS端進(jìn)行調(diào)用。JS調(diào)用原生的方法相對(duì)來(lái)說(shuō)比較簡(jiǎn)單，只需要在原生中注冊(cè)Module，然后在方法名之前寫(xiě)上標(biāo)識(shí)@react method 即可。在JS端通過(guò)NativeModules 這個(gè)API就可以進(jìn)行調(diào)用。如果想要進(jìn)行Activity之間的相互跳轉(zhuǎn)，該JS的activity可以使用currentActivity來(lái)找到。然后想要跳轉(zhuǎn)到原生其他的Activity就比較容易。

3 React Native技術(shù)應(yīng)用到APP中的優(yōu)勢(shì)

（1）熱更新：在當(dāng)前的APP應(yīng)用開(kāi)發(fā)中，熱更新是一個(gè)非常重要的能力。如果這個(gè)應(yīng)用沒(méi)有熱更新的能力，將意味著無(wú)法及時(shí)的展示自己想要展示的內(nèi)容給用戶(hù)，尤其是電商或者社交類(lèi)應(yīng)用，他們的APP更新能力都很頻繁，沒(méi)有熱更新的能力，將無(wú)法及時(shí)的推送最重要的更新給用戶(hù)。對(duì)于IOS開(kāi)發(fā)者來(lái)說(shuō)，兩周以上的審核周期更是要命，每次開(kāi)發(fā)迭代一個(gè)版本都必須要通過(guò)IOS的審核機(jī)制進(jìn)行審核，如果采用熱更新的方式，就可以繞過(guò)審核機(jī)制。因此，React Native所具有的熱更新能力是非常重要的。React Native的熱更新功能，主要是通過(guò)更新Bundle文件來(lái)實(shí)現(xiàn)。對(duì)于一個(gè)RN應(yīng)用來(lái)說(shuō)，Bundle文件就是要加載的前端內(nèi)容。只要更新了Bundle文件，就是更新了整個(gè)APP，因此只需要做一個(gè)后臺(tái)服務(wù)，這個(gè)后臺(tái)服務(wù)具有上傳下載Bundle文件的能力。然后在客戶(hù)端每次打開(kāi)的時(shí)候向服務(wù)端發(fā)送請(qǐng)求，看是否有最新的Bundle文件，并進(jìn)行下載替換即可完成熱更新的工作。

（2）代碼重用度高：目前碼農(nóng)的成本是越來(lái)越高，因此代碼的可重用是很重要的一點(diǎn)，代碼平臺(tái)無(wú)關(guān)性也是每一個(gè)技術(shù)人員所喜歡的。React Native的Android版本和IOS版本的代碼可以80%以上共用，這在當(dāng)前主流的原生開(kāi)發(fā)中是難以置信的。同時(shí)由于React Native技術(shù)是從PC端的React技術(shù)演變而來(lái)，因此React Native的絕大多數(shù)代碼也可以轉(zhuǎn)化為React來(lái)使用，進(jìn)行PC端的前端開(kāi)發(fā)，因此，一次開(kāi)發(fā)就可以三次使用大大的降低了人力成本和時(shí)間成本，對(duì)于企業(yè)來(lái)說(shuō)是非?？上驳摹?/p>

（3）開(kāi)發(fā)效率高，漏洞修復(fù)快：因?yàn)樗a重用度高，且有熱更新的優(yōu)勢(shì)，因此，也就有了第三個(gè)優(yōu)點(diǎn)，開(kāi)發(fā)效率比較高，且由于它的開(kāi)發(fā)方法的不同，無(wú)需每次修改都要通過(guò)編譯安裝看效果，且采用模塊化的開(kāi)發(fā)，大大的提升了開(kāi)發(fā)的效率。由于可實(shí)時(shí)更新Bundle文件，達(dá)到每次啟動(dòng)APP應(yīng)用都可以使用最新的，因此可快速修復(fù)漏洞。endprint