2015年9月15日，Facebook釋出了 React Native for Android，把 Web 和原生平臺的 JavaScript 開發技術擴充套件到了 Google 的流行移動平臺。

什麼是React Native

React Native 讓開發者使用 JavaScript 和 React 編寫應用，利用相同的核心程式碼就可以建立 Web，iOS 和 Android 平臺的原生應用。React Native 的宗旨是，學習一次，高效編寫跨平臺原生應用。

React Native有什麼優點

1.提供了原生的控制元件支援

使用 React Native 你可以使用原生的控制元件，入在iOS平臺我們可以使用UITabBar控制元件，在Android平臺我們可以使用Drawer控制元件。這樣，就讓我們的App從使用上和視覺上擁有像原生App一樣的體驗。而且使用起來也非常簡單。

2.非同步執行

所有的JavaScript邏輯與原生的程式碼邏輯都是在非同步中執行的。原生的程式碼邏輯當然也可以新增自己的額外的執行緒。

這個特性意味著，我們可以將圖片解碼過程的執行緒從主執行緒中抽離出來，在後臺執行緒將其儲存在磁碟中，在不影響UI的情況下計算調整佈局等等。

所以，這些讓React Native開發出來的App都是較為的流暢。

這個之間的通訊過程也是有序列化來完成的，這個就讓我們可以使用Chrome Developer Tools 來完成JavaScript邏輯的除錯，當然我們也能夠在模擬器和物理裝置上除錯。

3.觸屏處理
React Native實現了高效能的圖層點選與接觸處理。

4.Flexbox的佈局樣式
使佈局將變得更簡單，這就使我們為什麼要將網頁的佈局模式切換到React Native的Flexbox佈局模式。Flexbox讓UI佈局變得簡單，入使用margin和padding的巢狀模式。當然，React Native 同樣也支援網頁原生的一些屬性佈局模式，如FontWeight之類的。這些宣告的佈局和樣式，都會存在內聯的機制將其優化。

5.Polyfills機制
React Native也支援我們使用第三方的JavaScript庫，來方便我們的開發。支援npm中的成千上萬的模組。

6.基於React JS
擁有React JS的優良特性。

跨平臺框架這麼多？為什麼重點關注React Native？

如我們之前所介紹的，Android與IOS跨平臺開發框架如此這多，如之前我們介紹的PhoneGap、Xamarin等，為什麼我們重點的關注React Native呢？

1. Facebook所開源的框架
   我們知道，所有的開源框架，只有是一線的大公司研發出來的才能夠保證框架的維護性、可用性。當然，這樣也會吸引更多的開發者使用這個框架，才能夠使我們在人才儲備上有人可用。並不是說，框架多好就能夠用的。如國內的CrossApp，雖然很好用，但是知名度不夠，造成我們研發、bug反饋、人才招聘上的種種窘境。

2. React JS技術的革命
   這個東西也就是國內的很多跨平臺框架沒有關注的地方，Facebook使用了React JS已經有了好幾年的技術變革，特別是JSX與Virtual DOM的加入，給使用JavaScript來開發Native App簡直是一個質的飛躍。

3. BAT團隊已經投入研發與使用
   如果很多中小型公司，看不清方向，這個我們倒是可以模仿BAT的腳步。現在的BAT公司內部，特別是A，已經投入了大量的人力在React Native上面，聽說TMall App已經開始使用React 進行重構。

我們可以看到，目前對於Facebook來說，他們的新業務線也將直接使用了React Native的開發模式

搭建React Native 的 Windows 環境

NodeJs、Python、Android SDK、JDK

由於我們大天朝網路的限制，很多依賴的庫都fetch不下來。所以整個React Native的環境搭建，命令執行都是一個痛苦的過程。（就連NodeJS我都快下了半天的時間）

我在Windows平臺上搭建環境弄了差不多一週的時間，都沒有弄下來，特別是下面這個問題一直困擾著我

bash: ulimit: open files: cannot modify limit: Too many open files

後面得到了高人的指點，借給我了一個梯子，並在我的Mac裝置上成功的運行了自己的第一個React Native專案。哭～～～

下面是我的執行步驟，大多數是和官方的介紹一樣的：

我們先從Github上獲取React Native的程式碼

git clone https://github.com/facebook/react-native.git

進入React Native 並使用npm 進行安裝

npm install -g react-native-cli

注意
- 使用npm進行安裝，需要搭建好完整的nodejs環境，nodejs地址：https://nodejs.org
- npm install 需要依賴於很多國外資源，自備翻牆梯子

新建自己的React Native專案，這裡命名為AwsomeProject

react-native init AwsomeProject

執行完後，如果環境變數沒有配置錯誤，react 將會幫我們生成一個AwsomeProject的資料夾目錄。

裡面內如如下所示：

執行Android App

$ cd AwesomeProject
$ react-native run-android

看起來很簡單的兩句命令，但是裡面隱藏這很多的陷阱。
- 確保Gradle的環境配置好了，這裡還會動態的down很多Gradle的依賴檔案，不翻牆估計依賴檔案都下不下來
- 需要安裝好自己的Python環境（怎麼安裝google吧），React Native 的 packager需要 python的支援
- 這個東西，只能執行在Android模擬器上，真機執行必須失敗，至於為什麼後面在介紹

注意好上面三點，就能在模擬器上看到如下畫面了

執行iOS App

ios相對就簡單了很多，直接開啟 ios/AwesomeProject.xcodeproj 檔案，使用Xcode編譯執行就能出現和Android類似的介面了。我的效果如下：

注意，同樣只能夠在模擬器上執行

React Native的優勢和劣勢：（轉）：

React Native的優勢：

相對Hybird app或者Webapp：

• 不用Webview，徹底擺脫了Webview讓人不爽的互動和效能問題
• 有較強的擴充套件性，這是因為Native端提供的是基本控制元件，JS可以自由組合使用
• 可以直接使用Native原生的「牛逼」動畫（在FB Group這個app裡面，面板滑出帶一點果凍彈動，面板基於某個點展開這種動畫隨處可見，這種動畫用Native code來做小菜一碟，但是用Web來做就難上加難）。

相對於Native app：

• 可以通過更新遠端JS，直接更新app，不過這快成為各家大型Native app的標配了…

劣勢：

• 擴充套件性仍然遠遠不如web，也遠遠不如直接寫Native code（這個不用廢話解釋了吧）
• 從Native到Web，要做很多概念轉換，勢必造成雙方都要妥協。最終web要用一套CSS的閹割版，Native要費勁地把這個閹割版轉換成native原生的表達方式（比如iOS的Constraint\origin\Center等屬性），兩邊都會不爽。

/*
* @author zhoushengtao(周聖韜)
* @since 2015年9月30日 凌晨 1:00:20
* @weixin stchou_zst
* @blog http://blog.csdn.net/yzzst
* @交流學習QQ群：341989536
* @私人QQ：445914891
/