【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】移動(dòng)應(yīng)用跨平臺(tái)框架江湖將現(xiàn)終結(jié)者？速來(lái)參拜來(lái)自Facebook的React Native

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】移動(dòng)應(yīng)用跨平臺(tái)框架江湖將現(xiàn)終結(jié)者？速來(lái)參拜來(lái)自Facebook的ReactNative

February062015Facebook讓所有ReactConf的參與人員都可以初嘗ReactNative的源碼一個(gè)編寫(xiě)原生移動(dòng)應(yīng)用的方法。該方法運(yùn)用了React.js的所有強(qiáng)大的功能來(lái)將其應(yīng)用到原生應(yīng)用。你可以通過(guò)使用其內(nèi)嵌的基本元素來(lái)編寫(xiě)基于Javascript的組件，這些組件都是擁有著iOS和Android控件的支撐的。首先，我知道Facebook現(xiàn)在還沒(méi)有完全將其開(kāi)源是個(gè)很挫的事情啦，但他們現(xiàn)在正在將該項(xiàng)目往開(kāi)源的方向推進(jìn)了。他們現(xiàn)在正在把跟Facebook環(huán)境相關(guān)的代碼給移除掉并且正在準(zhǔn)備建立一套接受開(kāi)發(fā)人員對(duì)該開(kāi)源項(xiàng)目進(jìn)行貢獻(xiàn)和參與的流程。我認(rèn)為他們?cè)谂ν_(kāi)源這個(gè)方向推進(jìn)是個(gè)很好的事情，說(shuō)明他們真的很在意React社區(qū)了。相信這個(gè)項(xiàng)目很快就能完全開(kāi)源了。其實(shí)本人并不認(rèn)為開(kāi)源的步驟慢點(diǎn)是個(gè)根本性的錯(cuò)誤了。如果你認(rèn)為是的話(huà)我將很樂(lè)意跟你進(jìn)行探討，但請(qǐng)?jiān)试S我把該討論放在另外一個(gè)議題里面吧。因?yàn)槿绻惚辉撚懻摯驍嗨悸返脑?huà)，在這里你可能會(huì)錯(cuò)過(guò)我們今天對(duì)如何通過(guò)ReactNative編寫(xiě)原生移動(dòng)應(yīng)用的潮流已經(jīng)發(fā)生改變的討論。這種改變最大的地方就是它使用起來(lái)更像是在編寫(xiě)一個(gè)網(wǎng)路應(yīng)用。本人已經(jīng)算是開(kāi)發(fā)iOS應(yīng)用多年的老手了，故此我有著很多原生應(yīng)用開(kāi)發(fā)的經(jīng)驗(yàn)。在跟ReactNative勾搭上后，我只能用以下的表情來(lái)表達(dá)我的心情:相信我們都聽(tīng)過(guò)各種由Javascript驅(qū)動(dòng)的跨平臺(tái)原生應(yīng)用開(kāi)發(fā)框架，比如Titanium,

PhoneGap,以及其他各種各樣的允許不同層面與原生環(huán)境進(jìn)行轉(zhuǎn)化的項(xiàng)目。所有這些框架看起來(lái)都是比較挫的：無(wú)論你現(xiàn)在是想把一個(gè)網(wǎng)絡(luò)應(yīng)用包裝在一個(gè)WebView里面，或者是想要硬套HTML&CSS這套很難用來(lái)構(gòu)建移動(dòng)應(yīng)用的技術(shù)。對(duì)于后者，你幾乎無(wú)時(shí)無(wú)刻不在直面原生對(duì)象，這在性能方面來(lái)說(shuō)注定就是一個(gè)失敗的嘗試。ReactNative就不一樣，它的布局方面其實(shí)是運(yùn)行在一個(gè)獨(dú)立的線(xiàn)程里面的，所以UI主線(xiàn)程就能如往常一樣的盡可能的空閑出來(lái)進(jìn)行界面動(dòng)畫(huà)等的呈現(xiàn)處理(它同時(shí)也提供了flexbox

來(lái)簡(jiǎn)化布局，這可并不是所有框架都能提供出來(lái)的)。這里你僅僅需要淺嘗就能領(lǐng)略到ReactNative所隱藏的無(wú)限潛力。它工作起來(lái)會(huì)讓你感覺(jué)你是在做網(wǎng)絡(luò)開(kāi)發(fā)一樣的舒暢。而事實(shí)上你確是在開(kāi)發(fā)著一個(gè)真實(shí)的原生應(yīng)用，事實(shí)上是根本分不出來(lái)這里面的區(qū)別的。在UI層面上，這事實(shí)上是根本沒(méi)有區(qū)別的，使用到的都是像正常一樣眩眼滑動(dòng)的原生的UIViews。這其實(shí)都是軟件工程的功勞。同時(shí)這就完全進(jìn)一步的證明了一個(gè)事實(shí)就是React.js是構(gòu)建一個(gè)跨平臺(tái)應(yīng)用的正確方式。我可以使用該方式來(lái)像編寫(xiě)一個(gè)網(wǎng)絡(luò)應(yīng)用一樣來(lái)編寫(xiě)一個(gè)原生應(yīng)用。我們完全可以從今開(kāi)始把DOM作為一個(gè)實(shí)現(xiàn)的細(xì)節(jié)，就好像UIViews一樣。我不否認(rèn)我是很喜歡網(wǎng)絡(luò)編程的，但如果我們一步步的埋頭慢慢的認(rèn)真檢查每一個(gè)錯(cuò)誤，我們就很容易把一些重大的問(wèn)題跟忽略掉。網(wǎng)絡(luò)編程的方式來(lái)編寫(xiě)應(yīng)用從根本上說(shuō)就是個(gè)很古怪的事情：HTML加上CSS所造成的混亂會(huì)對(duì)各種框架制造路障而不是讓它們變得更好。也許ReactNative會(huì)最終是一個(gè)指引你回到正確的道路上面來(lái)的正確方式。我期盼著看到它是如何讓網(wǎng)絡(luò)編程方式變成一個(gè)更好的移動(dòng)應(yīng)用編程方式。我們不要把它想象成一個(gè)和網(wǎng)絡(luò)編程背道而馳的東西，而要把它想象成是一個(gè)從網(wǎng)絡(luò)編程進(jìn)入到另外一個(gè)方向的原型。到了這里你是否已經(jīng)感覺(jué)眼花繚亂無(wú)所適從了？沒(méi)事，我將會(huì)通過(guò)示例告訴你ReactNative是如何工作的！當(dāng)然你可以在這里和這里通過(guò)視頻學(xué)到更多的這方面的知識(shí)了。ReactNative使用的是iOS上的JavaScriptCore來(lái)運(yùn)行Javascript(Android和其他平臺(tái)將會(huì)在將來(lái)進(jìn)行支持)。重要的一點(diǎn)是它將Javascript放在一個(gè)獨(dú)立的線(xiàn)程上運(yùn)行(其他框架如Titanium也是這樣做的)。你使用Javascript來(lái)編寫(xiě)一個(gè)控件跟使用React.js其實(shí)沒(méi)有太大的區(qū)別，除了你應(yīng)該使用的是如View和Text而非div和a之外。你將會(huì)獲得使用React生成UI組件的所有的優(yōu)點(diǎn)(保守的說(shuō)，這是非常牛X的!!!)。請(qǐng)謹(jǐn)記，JavaScript不僅僅是一門(mén)語(yǔ)言，它還是一個(gè)平臺(tái)。存在著大量的優(yōu)秀的"JS轉(zhuǎn)換"工具供你使用。ReactNative將你在另外一個(gè)線(xiàn)程通過(guò)Javascript編寫(xiě)的UI以最小數(shù)量的數(shù)據(jù)發(fā)送給UI主線(xiàn)程來(lái)把它橋接轉(zhuǎn)換成原生的組件。比如把一個(gè)View轉(zhuǎn)換成UIView。最贊的地方是你不需要擔(dān)心你的UI主線(xiàn)程的更新來(lái)現(xiàn)實(shí)最新的改動(dòng)；你只要聲明你將需要UI基于某種狀態(tài)進(jìn)行橋接轉(zhuǎn)換就行了，React使用的是一個(gè)獨(dú)特的算法把最小量的必須的改動(dòng)發(fā)送到該橋接來(lái)反映UI的變化(天地會(huì)珠海分舵注：如果你清楚增量存儲(chǔ)的概念的話(huà)將會(huì)很容易理解這句話(huà))。編寫(xiě)原生UI從未如此的簡(jiǎn)單，況且這將不會(huì)有如播放動(dòng)畫(huà)卡頓等諸如此類(lèi)的問(wèn)題的出現(xiàn)，因?yàn)镴S是在一個(gè)獨(dú)立于UI主線(xiàn)程的線(xiàn)程中運(yùn)行的。動(dòng)畫(huà)播放將會(huì)比吃了瀉藥還要順暢！基于ReactNative的一個(gè)OpenGL應(yīng)用我的第一個(gè)ReactNative應(yīng)用其實(shí)并不是一個(gè)傳統(tǒng)的應(yīng)用：我編寫(xiě)的是一個(gè)波前對(duì)象模型演示應(yīng)用。我個(gè)人一直對(duì)游戲開(kāi)發(fā)比較感興趣，但是我對(duì)編寫(xiě)原生UI卻很反感。ReactNative剛好給了我一個(gè)使用編寫(xiě)網(wǎng)頁(yè)UI的方式來(lái)編寫(xiě)原生UI的方案。我保證你將會(huì)看到大量的使用原生導(dǎo)航和動(dòng)畫(huà)之類(lèi)的傳統(tǒng)應(yīng)用演示。我認(rèn)為通過(guò)非常簡(jiǎn)便的把ReactNative置身于OpenGL控件上面來(lái)完成相應(yīng)的工作是一項(xiàng)很酷的事情。去把ReactNative集成在你的項(xiàng)目里面其實(shí)是個(gè)很簡(jiǎn)單的事情，你只需要在你的控制器種創(chuàng)建一個(gè)RCTRootView，然后告訴它你的JS是擺在哪里，并把它添加到窗口上面就完成了。在我的嘗試中，我是首先創(chuàng)建了一個(gè)OpenGL的控件，然后把RCTRootView作為一個(gè)子控件添加到該控件上面。該集成的過(guò)程是完全一個(gè)***的過(guò)程，哦，不好意思，是一個(gè)完全毫無(wú)痛苦的過(guò)程。(天地會(huì)珠海分舵注：近來(lái)被電視和路邊廣告轟炸的暈了，到處都是***之類(lèi)的廣告，看到無(wú)痛兩個(gè)字就立刻神經(jīng)反射的聯(lián)系到***來(lái)了)你可以按下Cmd+R來(lái)立刻刷新你的UI來(lái)現(xiàn)實(shí)你修改的任何更新。這里僅僅RCTRootView會(huì)進(jìn)行更新，所以我可以很容易的對(duì)ui進(jìn)行修改然后刷新ui來(lái)獲得最近的修改，而并不需要重新加載OpenGL層。以下是一個(gè)控件示例，一個(gè)用來(lái)列出可用文件列表并在其中一項(xiàng)被點(diǎn)擊后加載一個(gè)網(wǎng)格的ObjList控件。這里將會(huì)用到一個(gè)和其他任何原生應(yīng)用一樣的原生的用來(lái)僅僅在控件內(nèi)部進(jìn)行滾動(dòng)顯示的ListView控件，但在這里進(jìn)行使用確實(shí)一個(gè)極其簡(jiǎn)單的事情。var

ObjList

=

React.createClass({

//

a

few

methods

clipped

selectModel:

function(file)

{

controller.loadMesh(file);

},

renderRow:

function(file)

{

return

View(

null,

TouchableHighlight(

{

onPress:

()

=>

this.selectModel(file),

underlayColor:

'rgba(0,

0,

0,

.6)'

},

Text({

style:

{

height:

30,

color:

'white'

}},

file)

)

);

},

render:

function()

{

var

source

=

this.getDataSource(ps.files);

return

ListView({

style:

{

flex:

1

},

renderRow:

this.renderRow,

dataSource:

source

});

}

});在我的App控件里面我有一個(gè)handlSearch方法來(lái)相應(yīng)文本輸入的改變。這里我對(duì)控件的狀態(tài)做一些改變，一邊讓?xiě)?yīng)用和ObjList控件接受到最新的狀態(tài)改變來(lái)將最新的文件列表給顯示出來(lái)。handleSearch:

function(e)

{

var

text

=

e.nativeEvent.text;

var

files

=

allFiles.filter(x

=>

x.indexOf(text.toLowerCase())

!==

-1);

this.setState({

files:

files

});

}請(qǐng)注意ObjList控件里面的controller.loadMesh()這個(gè)調(diào)用。這其實(shí)是一個(gè)Objective-C的一個(gè)方法，這里我已經(jīng)把它做了一個(gè)導(dǎo)出標(biāo)識(shí)了，這樣橋接就會(huì)找到它并使它在JS中變成可用。跟橋接進(jìn)行協(xié)同工作其實(shí)是一個(gè)非常簡(jiǎn)單的事情，且將會(huì)變得越來(lái)越簡(jiǎn)單。以下就是loadMesh的實(shí)現(xiàn)代碼:-

(void)loadMesh:(NSString

*)path

{

RCT_EXPORT();

dispatch_async(dispatch_get_main_queue(),

^{

teapotNode_.material.diffuse

=

[self

randomColor];

teapotNode_.wavefrontMeshA

=

[REMeshCache

meshNamed:path];

[self

reset];

});

}RCT_EXPORT()將該方法標(biāo)識(shí)成使一個(gè)導(dǎo)出方法(事實(shí)上在其他地方實(shí)現(xiàn)的對(duì)該類(lèi)進(jìn)行實(shí)例化的工作會(huì)有點(diǎn)多)。這些方法將會(huì)在一個(gè)獨(dú)立的線(xiàn)程中被調(diào)用，但是我這里需要的使在主線(xiàn)程對(duì)該mesh進(jìn)行加載(因?yàn)檫@將會(huì)把數(shù)據(jù)加載到OpenGL當(dāng)中)，所以這里我網(wǎng)隊(duì)列中排隊(duì)了一塊運(yùn)行在主線(xiàn)程中的代碼。以下的視頻將會(huì)給大家一個(gè)更完整的演示：/embed/OPFf53fdUmQ在聲明的過(guò)程中