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

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

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

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

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