移動應用跨平臺框架江湖將現終結者？速來參拜來自Facebook的React Native

 

React Native使用初探

February 06 2015

Facebook讓全部React Conf的參與人員均可以初嘗React Native的源碼---一個編寫原生移動應用的方法。該方法運用了React.js的全部強大的功能來將其應用到原生應用。你能夠經過使用其內嵌的基本元素來編寫基於Javascript的組件，這些組件都是擁有着iOS和Android控件的支撐的。

首先，我知道Facebook如今尚未徹底將其開源是個很挫的事情啦，但他們如今正在將該項目往開源的方向推動了。他們如今正在把跟Facebook環境相關的代碼給移除掉而且正在準備創建一套接受開發人員對該開源項目進行貢獻和參與的流程。我認爲他們在努力往開源這個方向推動是個很好的事情，說明他們真的很在乎React社區了。相信這個項目很快就能徹底開源了。

其實本人並不認爲開源的步驟慢點是個根本性的錯誤了。若是你認爲是的話我將很樂意跟你進行探討，但請容許我把該討論放在另一個議題裏面吧。

由於若是你被該討論打斷思路的話，在這裏你可能會錯過咱們今天對如何經過React Native編寫原生移動應用的潮流已經發生改變的討論。這種改變最大的地方就是它使用起來更像是在編寫一個網路應用。

本人已經算是開發iOS應用多年的老手了，故此我有着不少原生應用開發的經驗。在跟React Native勾搭上後，我只能用如下的表情來表達個人心情:

 

相信咱們都聽過各類由Javascript驅動的跨平臺原生應用開發框架，好比Titanium, PhoneGap, 以及其餘各類各樣的容許不一樣層面與原生環境進行轉化的項目。全部這些框架看起來都是比較挫的：不管你如今是想把一個網絡應用包裝在一個WebView裏面，或者是想要硬套HTML&CSS這套很難用來構建移動應用的技術。對於後者，你幾乎無時無刻不在直面原生對象，這在性能方面來講註定就是一個失敗的嘗試。React Native就不同，它的佈局方面實際上是運行在一個獨立的線程裏面的，因此UI主線程就能如往常同樣的儘量的空閒出來進行界面動畫等的呈現處理(它同時也提供了flexbox 來簡化佈局，這可並非全部框架都能提供出來的)。

這裏你僅僅須要淺嘗就能領略到React Native所隱藏的無限潛力。它工做起來會讓你感受你是在作網絡開發同樣的舒暢。而事實上你確是在開發着一個真實的原生應用，事實上是根本分不出來這裏面的區別的。在UI層面上，這事實上是根本沒有區別的，使用到的都是像正常同樣眩眼滑動的原生的UIViews。

這其實都是軟件工程的功勞。同時這就徹底進一步的證實了一個事實就是React.js是構建一個跨平臺應用的正確方式。我可使用該方式來像編寫一個網絡應用同樣來編寫一個原生應用。咱們徹底能夠從今開始把DOM做爲一個實現的細節，就好像UIViews同樣。

我不否定我是很喜歡網絡編程的，但若是咱們一步步的埋頭慢慢的認真檢查每個錯誤，咱們就很容易把一些重大的問題跟忽略掉。網絡編程的方式來編寫應用從根本上說就是個很古怪的事情：HTML加上CSS所形成的混亂會對各類框架製造路障而不是讓它們變得更好。也許React Native會最終是一個指引你回到正確的道路上面來的正確方式。我期盼着看到它是如何讓網絡編程方式變成一個更好的移動應用編程方式。咱們不要把它想象成一個和網絡編程背道而馳的東西，而要把它想象成是一個從網絡編程進入到另一個方向的原型。

到了這裏你是否已經感受眼花繚亂無所適從了？沒事，我將會經過示例告訴你React Native是如何工做的！固然你能夠在這裏和這裏經過視頻學到更多的這方面的知識了。

React Native使用的是iOS上的JavaScriptCore來運行Javascript(Android和其餘平臺將會在未來進行支持)。重要的一點是它將Javascript放在一個獨立的線程上運行(其餘框架如Titanium也是這樣作的)。你使用Javascript來編寫一個控件跟使用React.js其實沒有太大的區別，除了你應該使用的是如View和Text而非div和a以外。你將會得到使用React生成UI組件的全部的優勢(保守的說，這是很是牛X的!!!)。請謹記，JavaScript不只僅是一門語言，它仍是一個平臺。存在着大量的優秀的"JS轉換"工具供你使用。

React Native將你在另一個線程經過Javascript編寫的UI以最小數量的數據發送給UI主線程來把它橋接轉換成原生的組件。好比把一個View轉換成UIView。最讚的地方是你不須要擔憂你的UI主線程的更新來現實最新的改動；你只要聲明你將須要UI基於某種狀態進行橋接轉換就好了，React使用的是一個獨特的算法把最小量的必須的改動發送到該橋接來反映UI的變化(天地會珠海分舵注：若是你清楚增量存儲的概念的話將會很容易理解這句話)。

編寫原生UI從未如此的簡單，何況這將不會有如播放動畫卡頓等諸如此類的問題的出現，由於JS是在一個獨立於UI主線程的線程中運行的。動畫播放將會比吃了瀉藥還要順暢！

 

基於React Native的一個OpenGL應用

 

個人第一個React Native應用其實並非一個傳統的應用：我編寫的是一個波前對象模型演示應用。我我的一直對遊戲開發比較感興趣，可是我對編寫原生UI卻很反感。React Native恰好給了我一個使用編寫網頁UI的方式來編寫原生UI的方案。

我保證你將會看到大量的使用原生導航和動畫之類的傳統應用演示。我認爲經過很是簡便的把React Native置身於OpenGL控件上面來完成相應的工做是一項很酷的事情。

去把React Native集成在你的項目裏面實際上是個很簡單的事情，你只須要在你的控制器種建立一個RCTRootView，而後告訴它你的JS是擺在哪裏，並把它添加到窗口上面就完成了。在個人嘗試中，我是首先建立了一個OpenGL的控件，而後把RCTRootView做爲一個子控件添加到該控件上面。該集成的過程是徹底一個無痛人liu的過程，哦，很差意思，是一個徹底毫無痛苦的過程。(天地會珠海分舵注：近來被電視和路邊廣告轟炸的暈了，處處都是無痛人liu之類的廣告，看到無痛兩個字就馬上神經反射的聯繫到無痛人liu來了)

你能夠按下Cmd+R來馬上刷新你的UI來現實你修改的任何更新。這裏僅僅RCTRootView會進行更新，因此我能夠很容易的對ui進行修改而後刷新ui來得到最近的修改，而並不須要從新加載OpenGL層。

如下是一個控件示例，一個用來列出可用文件列表並在其中一項被點擊後加載一個網格的ObjList控件。這裏將會用到一個和其餘任何原生應用同樣的原生的用來僅僅在控件內部進行滾動顯示的ListView控件，但在這裏進行使用確實一個極其簡單的事情。

 

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控件裏面我有一個handlSearch方法來相應文本輸入的改變。這裏我對控件的狀態作一些改變，一邊讓應用和ObjList控件接受到最新的狀態改變來將最新的文件列表給顯示出來。

 

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()這個調用。這實際上是一個Objective-C的一個方法，這裏我已經把它作了一個導出標識了，這樣橋接就會找到它並使它在JS中變成可用。跟橋接進行協同工做實際上是一個很是簡單的事情，且將會變得愈來愈簡單。如下就是loadMesh的實現代碼:

 

- (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()將該方法標識成使一個導出方法(事實上在其餘地方實現的對該類進行實例化的工做會有點多)。這些方法將會在一個獨立的線程中被調用，可是我這裏須要的使在主線程對該mesh進行加載(由於這將會把數據加載到OpenGL當中)，因此這裏我網隊列中排隊了一塊運行在主線程中的代碼。

如下的視頻將會給你們一個更完整的演示：https://www.youtube.com/embed/OPFf53fdUmQ

在聲明的過程當中來構建咱們的UI控件並對簡單的改變狀態所產生的事件進行相應的能力是很是的強大的，React.js必定證實了這一點。到此爲止，咱們忽然間就到了須要對原生應用進行一樣處理的時候了。"一次學習，多平臺編寫「，猶如React開發人員所倡導的。同時請查看：Facebook來教我咱們如何編寫網站。

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

轉載請尊重原創/譯	微信公衆號	CSDN
天地會珠海分舵	服務號:TechGoGoGo	http://blog.csdn.net/zhubaitian
優秀資源推薦	地址	點評
DoctorQ博客	http://testerhome.com/doctorq/topics	安卓自動化領域才俊，技術分享先驅，

 

英文版原文：http://jlongster.com/First-Impressions-using-React-Native