一、React Native 簡介
2015年3月26日，FaceBook公司對外正式釋出了React Native ——使用React架構跨平台開發原生移動應用的開源技術架構（簡稱RN）。開發者可以使用RN高效的開發運作與Android與iOS作業系統的應用程式。他的設計理念是：使用React Native 開發，既擁有Native良好的人機互動體驗，又保留了React架構的開發效率。
React、 React.js 和 React Native
React架構是Facebook從2012年以來慢慢發展起來的一套開發架構。在這套架構上誕生了React.js用來進行網頁開發，以及React Native用來進行手機App開發。他們三者的關系是React是基礎架構，是一套基礎設計實作理念，開發者不能直接用其來開發網頁或者移動應用。在他的基礎上發展處了React.js來開發網頁，React Native來開發移動應用。React.js開發效率比起傳統的HTML網頁編寫要高出非常多，是以React Native的開發效率相信大家很快就會體驗到。
二、React Native 開發特點
1.一次學習，随處編寫
在iOS和Android上一份代碼支援兩個作業系統曆史證明是很困難的。RN提出了“Learn once，write anywhere”。其根據不同的平台上代碼會有一些微小的差別，但開發思路是相同的。RN沒有狂妄的喊出“Write once，run anywhere”這樣的口号但是在移動開發應用iOS和Android兩大平台上差不多已經做到了這一點。
2.混合開發
混合開發是RN的另一個重要特性。具體的展現在以下幾點：
1.通用的UI界面與業務邏輯有React Native開發，但與手機平台緊密關聯的處理由原生代碼來執行。
2.将原來使用原生代碼實作的UI小部件包裝成React Native的自定義元件。
3.應用界面在React Native開發的界面與原生代碼開發的界面切換（雙向通信，無縫銜接）。
3.高效的移動開發
絕大部分的UI界面與業務邏輯都是一套代碼，其比原生語言更加快捷高效，相對于兩個平台各開發一套應用其能節省50%甚至更多的工作量。具體優勢展現在一下4個方面：
1.獨特的UI實作架構
2.元件化開發
3.跨平台移植代碼迅速
4.自動比對不同螢幕大小的手機
4.高效的移動應用開發調試
原生代碼修改後需要重新編譯建構，才能展示修改後的效果。RN修改代碼後可以立刻看到效果省去了編譯建構的時間，同時所有代碼可以一直到Chrome裡面運作，斷點調試、單步調試、調用棧追蹤這些常用的調試方法。
5.靈活高效的應用熱更新
自JSPatch被拒後，RN的熱更新優勢重要，每次熱更新需要下載下傳的資料量在200KB~1M這個量級，同時其資料下載下傳不到市場應用下載下傳的十分之一并且可以在使用者無感覺的情況下加入新界面、新功能與新邏輯。最重要的一點是這種熱更新行為是蘋果官方允許的，無需擔心被拒風險。目前熱更新有兩種方案：pushy 和 codepush(微軟提供)這兩種方案會在後續文章具體介紹。
6.有效降低移動應用安裝包的體積
打個不是很恰當的比方，活字應刷印刷一篇文章模組化排版所需的時間是大于手抄的但是如果是百張千張呢。RN的特點是功能越複雜，包越大（大約大于15M），RN包比原生代碼小的多。
7.開發軟硬體要求低門檻低
其是基于ES 6（ECMAScript 2015 就是JavaScript），其函數名、變量名都是采用自然語言的命名方法。
開發模式類似于積木式開發。
RN對硬體的要求不高，支援mac、windows等多平台開發。下面環境搭建有說明。
8.使用React Native 開發的代價
1.記憶體消耗大
開發模式下運作“Holle World”比原生大20兆記憶體，當然Release模式會有所減少很多與原生“Holle World”相差不大。目前市面上的手機配置基本可以忽略記憶體的影響。
2.運作速度
畢竟原生才是本土，大牛寫的原生肯定比RN速度略快，但是一般的開發者開發的功能是與RN速度相差不大的。
RN開發的代碼運作速度可以通過兩方面來彌補。
一、網絡請求，RN代碼實作速度稍慢但是使用者感覺不出來是毫秒級别的，是以不需要優化。
二、核心功能，那就用源代碼開發就好了，上面說了RN一大特點就是混合開發。
三、React Native Mac環境搭建
首先mac電腦組態比較高記憶體比較大的朋友們建議安裝安卓環境（這樣可以兩端調試）。
1.安裝Homebrew
Homebrew, Mac系統的包管理器，用于安裝NodeJS和一些其他必需的工具軟體。
打開終端輸入以下代碼：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
注：在Max OS X 10.11（El Capitan)版本中，homebrew在安裝軟體時可能會碰到/usr/local目錄不可寫的權限問題。可以使用下面的指令修複：
sudo chown -R `whoami` /usr/local
在此過程中會要求輸入電腦密碼輸入後請耐心等待，直到出現“Installation successful!”。
2.安裝Node
使用Homebrew來安裝Node.js.
React Native目前需要NodeJS 5.0或更高版本。本文釋出時Homebrew預設安裝的是最新版本，一般都滿足要求。終端輸入以下指令：
brew install node
目前最新的版本是9.5.0.
安裝完node後建議設定npm鏡像以加速後面的過程。注意：不要使用cnpm！cnpm安裝的子產品路徑比較奇怪，packager不能正常識别！
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
3.安裝Yarn、React Native的指令行工具（react-native-cli）
Yarn是Facebook提供的替代npm的工具，可以加速node子產品的下載下傳。React Native的指令行工具用于執行建立、初始化、更新項目、運作打包服務（packager）等任務。
npm install -g yarn react-native-cli
安裝完yarn後同理也要設定鏡像源：
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
如果你看到EACCES: permission denied這樣的權限報錯，那麼請參照上文的homebrew譯注，修複/usr/local目錄的所有權。
安裝完yarn之後就可以用yarn代替npm了，例如用yarn代替npm install指令，用yarn add 某第三方庫名代替npm install --save 某第三方庫名。
4.安裝Watchman
Watchman是由Facebook提供的監視檔案系統變更的工具。安裝此工具可以提高開發時的性能（packager可以快速捕捉檔案的變化進而實作實時重新整理）。譯注：此工具官方雖然是推薦安裝，但在實踐中，我們認為此工具是必須安裝，否則可能無法正常開發。
brew install watchman
5.Flow 和 Nuclide僅作介紹想安裝的可以試試
Flow是一個靜态的JS類型檢查工具。譯注：你在很多示例中看到的奇奇怪怪的冒号問号，以及方法參數中像類型一樣的寫法，都是屬于這個flow工具的文法。這一文法并不屬于ES标準，隻是Facebook自家的代碼規範。是以新手可以直接跳過（即不需要安裝這一工具，也不建議去費力學習flow相關文法）。
brew install flow
Nuclide是由Facebook提供的基于atom的內建開發環境，可用于編寫、運作和 調試React Native應用。點選這裡閱讀Nuclide的入門文檔。
6.推薦的開發環境
考慮到實用性不推薦使用Nuclide，而推薦使用WebStorm或Sublime Text或Visual Studio Code來編寫React Native應用。所有這些開發工具都是跨平台的。其中webstorm是收費的，體量較大，功能較多，基本無需配置。其他工具免費，相對輕量，但或多或少需要下載下傳插件和配置。
本人出生.net是以比較傾向于vs code，有錢的可以去用WebStorm功能強大，但是其安裝包安裝後占空間太大了，啟動等待時間也比較長（對于我們這些記憶體嚴重不足的是不考慮的）。Sublime Text 是擁有漂亮的使用者界面和強大的功能的輕量級編輯器（收費的但是可以無限期試用鬧心不）。下面主要介紹下Visual Studio Code。
VS Code是一款免費（就他是真正意義上的免費）開源的現代化輕量級代碼編輯器，幾乎支援所有的主流開發語言的文法高亮、智能代碼補全、自定義熱鍵、括号比對、代碼片段、代碼對比Diff GIT等特性，支援插件擴充，并針對網頁開發和雲端應用開發做了優化。跨平台軟體支援Win、Mac以及Linux。因為其為輕量級編輯器，是以體積小，運作流暢。VS Code已經針對RN做了适配工作是以直接下載下傳就可以用了。官方位址為https://code.visualstudio.com/。
7.0.45以上版本新增編譯器安裝（如果運作0.45以下版本忽略此條）
init指令預設會建立最新的版本，而目前最新的0.45及以上版本需要下載下傳boost等幾個第三方庫編譯。這些庫在國内即便翻牆也很難下載下傳成功，導緻很多人無法運作iOS項目！！！。如果你嫌麻煩，又沒有對新版本的需求，那麼可以暫時建立0.44.3的版本。
提示：你可以使用--version參數（注意是兩個杠）建立指定版本的項目。例如react-native init MyApp --version 0.44.3。注意版本号必須精确到兩個小數點。
如果想體驗最新版本可以按如下步驟操作：
1.進入git頁面找到點選Branch標明指定版本：https://github.com/facebook/react-native
2.找到script檔案夾并且打開
3.找到文檔中說明要配置的第三方
4.由于國家政策這些第三方需要翻牆下還不一定下得下來是以這邊提供下載下傳好了的百度盤：http://pan.baidu.com/s/1kVDUAZ9 在這裡下載下傳你選中版本需要的依賴就可以了。
5.第三方依賴放置目錄
下下來後請放置到 ~/.rncache 根目錄 或者輸入終端指令操作：如果對終端指令不熟悉可以參照這篇文章
cd ~ //進入根目錄
mkdir .rncache //建立第三方依賴庫隐藏檔案夾
cp ~/Downloads/boost_1_63_0.tar.gz ~/.rncache/ //複制庫到指定檔案夾 路徑視檔案實際路徑來定 按照這句代碼将所需的檔案都copy進來
open .rncache //打卡檔案夾檢視檔案是否全部複制進去 或者省略上面的步驟直接打開此檔案夾将檔案拖進來 方法很多
注：小知識點 想要檢視隐藏檔案 按住Shift + command + . 就可以了 再按就是消失。
8.建立工程
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios
建立成功後終端會彈出一個界面用來展示代碼情況。
提示：如果run-ios無法正常運作，請使用Xcode運作來檢視具體錯誤（run-ios的報錯沒有任何具體資訊）。
9.修改項目
使用你喜歡的編輯器打開App.js并随便改上幾行。
在iOS Emulator中按下⌘-R就可以重新整理APP并看到你的最新修改！
如果你成功了将會出現類似以下界面：