移動應(yīng)用跨平臺框架江湖將現(xiàn)終結(jié)者？速來參拜來自Facebook的React Native

React Native使用初探

February 06 2015

Facebook讓所有React Conf的參與人員都可以初嘗React Native的源碼---一個(gè)編寫原生移動應(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ā)人員對該開源項(xiàng)目進(jìn)行貢獻(xiàn)和參與的流程。我認(rèn)為他們在努力往開源這個(gè)方向推進(jìn)是個(gè)很好的事情，說明他們真的很在意React社區(qū)了。相信這個(gè)項(xiàng)目很快就能完全開源了。

其實(shí)本人并不認(rèn)為開源的步驟慢點(diǎn)是個(gè)根本性的錯誤了。如果你認(rèn)為是的話我將很樂意跟你進(jìn)行探討，但請?jiān)试S我把該討論放在另外一個(gè)議題里面吧。

因?yàn)槿绻惚辉撚懻摯驍嗨悸返脑?，在這里你可能會錯過我們今天對如何通過React Native編寫原生移動應(yīng)用的潮流已經(jīng)發(fā)生改變的討論。這種改變最大的地方就是它使用起來更像是在編寫一個(gè)網(wǎng)路應(yīng)用。

本人已經(jīng)算是開發(fā)iOS應(yīng)用多年的老手了，故此我有著很多原生應(yīng)用開發(fā)的經(jīng)驗(yàn)。在跟React Native勾搭上后，我只能用以下的表情來表達(dá)我的心情:

相信我們都聽過各種由Javascript驅(qū)動的跨平臺原生應(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)建移動應(yīng)用的技術(shù)。對于后者，你幾乎無時(shí)無刻不在直面原生對象，這在性能方面來說注定就是一個(gè)失敗的嘗試。React Native就不一樣，它的布局方面其實(shí)是運(yùn)行在一個(gè)獨(dú)立的線程里面的，所以UI主線程就能如往常一樣的盡可能的空閑出來進(jìn)行界面動畫等的呈現(xiàn)處理(它同時(shí)也提供了flexbox 來簡化布局，這可并不是所有框架都能提供出來的)。

這里你僅僅需要淺嘗就能領(lǐng)略到React Native所隱藏的無限潛力。它工作起來會讓你感覺你是在做網(wǎng)絡(luò)開發(fā)一樣的舒暢。而事實(shí)上你確是在開發(fā)著一個(gè)真實(shí)的原生應(yīng)用，事實(shí)上是根本分不出來這里面的區(qū)別的。在UI層面上，這事實(shí)上是根本沒有區(qū)別的，使用到的都是像正常一樣眩眼滑動的原生的UIViews。

這其實(shí)都是軟件工程的功勞。同時(shí)這就完全進(jìn)一步的證明了一個(gè)事實(shí)就是React.js是構(gòu)建一個(gè)跨平臺應(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è)錯誤，我們就很容易把一些重大的問題跟忽略掉。網(wǎng)絡(luò)編程的方式來編寫應(yīng)用從根本上說就是個(gè)很古怪的事情：HTML加上CSS所造成的混亂會對各種框架制造路障而不是讓它們變得更好。也許React Native會最終是一個(gè)指引你回到正確的道路上面來的正確方式。我期盼著看到它是如何讓網(wǎng)絡(luò)編程方式變成一個(gè)更好的移動應(yīng)用編程方式。我們不要把它想象成一個(gè)和網(wǎng)絡(luò)編程背道而馳的東西，而要把它想象成是一個(gè)從網(wǎng)絡(luò)編程進(jìn)入到另外一個(gè)方向的原型。

到了這里你是否已經(jīng)感覺眼花繚亂無所適從了？沒事，我將會通過示例告訴你React Native是如何工作的！當(dāng)然你可以在這里和這里通過視頻學(xué)到更多的這方面的知識了。

React Native使用的是iOS上的JavaScriptCore來運(yùn)行Javascript(Android和其他平臺將會在將來進(jìn)行支持)。重要的一點(diǎn)是它將Javascript放在一個(gè)獨(dú)立的線程上運(yùn)行(其他框架如Titanium也是這樣做的)。你使用Javascript來編寫一個(gè)控件跟使用React.js其實(shí)沒有太大的區(qū)別，除了你應(yīng)該使用的是如View和Text而非div和a之外。你將會獲得使用React生成UI組件的所有的優(yōu)點(diǎn)(保守的說，這是非常牛X的!!!)。請謹(jǐn)記，JavaScript不僅僅是一門語言，它還是一個(gè)平臺。存在著大量的優(yōu)秀的"JS轉(zhuǎn)換"工具供你使用。

React Native將你在另外一個(gè)線程通過Javascript編寫的UI以最小數(shù)量的數(shù)據(jù)發(fā)送給UI主線程來把它橋接轉(zhuǎn)換成原生的組件。比如把一個(gè)View轉(zhuǎn)換成UIView。最贊的地方是你不需要擔(dān)心你的UI主線程的更新來現(xiàn)實(shí)最新的改動；你只要聲明你將需要UI基于某種狀態(tài)進(jìn)行橋接轉(zhuǎn)換就行了，React使用的是一個(gè)獨(dú)特的算法把最小量的必須的改動發(fā)送到該橋接來反映UI的變化(天地會珠海分舵注：如果你清楚增量存儲的概念的話將會很容易理解這句話)。

編寫原生UI從未如此的簡單，況且這將不會有如播放動畫卡頓等諸如此類的問題的出現(xiàn)，因?yàn)镴S是在一個(gè)獨(dú)立于UI主線程的線程中運(yùn)行的。動畫播放將會比吃了瀉藥還要順暢！

基于React Native的一個(gè)OpenGL應(yīng)用

我的第一個(gè)React Native應(yīng)用其實(shí)并不是一個(gè)傳統(tǒng)的應(yīng)用：我編寫的是一個(gè)波前對象模型演示應(yīng)用。我個(gè)人一直對游戲開發(fā)比較感興趣，但是我對編寫原生UI卻很反感。React Native剛好給了我一個(gè)使用編寫網(wǎng)頁UI的方式來編寫原生UI的方案。

我保證你將會看到大量的使用原生導(dǎo)航和動畫之類的傳統(tǒng)應(yīng)用演示。我認(rèn)為通過非常簡便的把React Native置身于OpenGL控件上面來完成相應(yīng)的工作是一項(xiàng)很酷的事情。

去把React Native集成在你的項(xiàng)目里面其實(shí)是個(gè)很簡單的事情，你只需要在你的控制器種創(chuàng)建一個(gè)RCTRootView，然后告訴它你的JS是擺在哪里，并把它添加到窗口上面就完成了。在我的嘗試中，我是首先創(chuàng)建了一個(gè)OpenGL的控件，然后把RCTRootView作為一個(gè)子控件添加到該控件上面。該集成的過程是完全一個(gè)***的過程，哦，不好意思，是一個(gè)完全毫無痛苦的過程。(天地會珠海分舵注：近來被電視和路邊廣告轟炸的暈了，到處都是***之類的廣告，看到無痛兩個(gè)字就立刻神經(jīng)反射的聯(lián)系到***來了)

你可以按下Cmd+R來立刻刷新你的UI來現(xiàn)實(shí)你修改的任何更新。這里僅僅RCTRootView會進(jìn)行更新，所以我可以很容易的對ui進(jìn)行修改然后刷新ui來獲得最近的修改，而并不需要重新加載OpenGL層。

以下是一個(gè)控件示例，一個(gè)用來列出可用文件列表并在其中一項(xiàng)被點(diǎn)擊后加載一個(gè)網(wǎng)格的ObjList控件。這里將會用到一個(gè)和其他任何原生應(yīng)用一樣的原生的用來僅僅在控件內(nèi)部進(jìn)行滾動顯示的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(this.props.files);

    return ListView({
      style: { flex: 1 },
      renderRow: this.renderRow,
      dataSource: source
    });
  }
});

在我的App控件里面我有一個(gè)handlSearch方法來相應(yīng)文本輸入的改變。這里我對控件的狀態(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 });
}

請注意ObjList控件里面的controller.loadMesh()這個(gè)調(diào)用。這其實(shí)是一個(gè)Objective-C的一個(gè)方法，這里我已經(jīng)把它做了一個(gè)導(dǎo)出標(biāo)識了，這樣橋接就會找到它并使它在JS中變成可用。跟橋接進(jìn)行協(xié)同工作其實(shí)是一個(gè)非常簡單的事情，且將會變得越來越簡單。以下就是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)識成使一個(gè)導(dǎo)出方法(事實(shí)上在其他地方實(shí)現(xiàn)的對該類進(jìn)行實(shí)例化的工作會有點(diǎn)多)。這些方法將會在一個(gè)獨(dú)立的線程中被調(diào)用，但是我這里需要的使在主線程對該mesh進(jìn)行加載(因?yàn)檫@將會把數(shù)據(jù)加載到OpenGL當(dāng)中)，所以這里我網(wǎng)隊(duì)列中排隊(duì)了一塊運(yùn)行在主線程中的代碼。

以下的視頻將會給大家一個(gè)更完整的演示：https://www.youtube.com/embed/OPFf53fdUmQ

在聲明的過程中來構(gòu)建我們的UI控件并對簡單的改變狀態(tài)所產(chǎn)生的事件進(jìn)行相應(yīng)的能力是非常的強(qiáng)大的，React.js一定證明了這一點(diǎn)。到此為止，我們突然間就到了需要對原生應(yīng)用進(jìn)行同樣處理的時(shí)候了。"一次學(xué)習(xí)，多平臺編寫“，猶如React開發(fā)人員所倡導(dǎo)的。同時(shí)請查看：Facebook來教我我們?nèi)绾尉帉懢W(wǎng)站。

－－－－－－－－－－－－－－完－－－－－－－－－－－－－－－－－－

轉(zhuǎn)載請尊重原創(chuàng)/譯
作者：天地會珠海分舵
微信資源分享公眾號：techgogogo或掃描以上圖片二維碼