最近React Native火的不要不要的，打哪兒看都全是好評，從去年年底就開始的Native末日言論又被炒了起來。居安思危，入職以來一直做得純Native應用，連WebView / UIWebView都很少用，感覺與目前主流的Hybrid App嚴重脫軌。現在正好借手頭項目完結了沒事做學習一下，其實官網寫的文檔還是比較詳細的，這里只是總結和整理。
首先對比一下Native APP、Hybrid APP、 Web App、React Native：
Native APP
Native APP 指的是原生應用，使用Java/OC等開發，一般依托于操作系統，有很強的交互，是一個完整的App，可拓展性強。需要用戶下載安裝使用。
優點：
（1）用戶體驗高,可針對不同平臺提供不同的體驗，針對平臺特性去做用戶體驗優化。
（2）可以利用系統API及平臺特性，訪問手機的提供的功能（GPS，相機等）。
（3）可定制的專場動畫和切換動畫，與系統高度切合，可獲得更快的運行速度和性能，并支持豐富的圖形和動畫。
（4）擁有系統級別的通知或提醒，用戶留存率高。
（5）可訪問本地資源，支持離線工作，節省用戶的流量成本。
（6）開源框架豐富，已經形成了良好的生態環境。
缺點：
（1）開發成本高，上手需要一定的平臺基礎，需要針對不同平臺需要不同的技術背景進行開發，并且開發相對來說比較繁瑣。
（2）維護成本高，需要兼容歷史版本，保證歷史版本的正常使用。用戶需要下載升級，雖然現在熱修復熱更新比較熱，但是我認為還達不到正常更新版本的地步。
（3）分發成本高，分發到不同的應用商店，需要進行不同的配置打包。
Web App
我理解的Web App說白了就是一套適配各種屏幕的Html5頁面，使用Html5/JavaScript/CSS開發，由前端開發人員編寫，只需要一個瀏覽器就能輕松訪問。
優點：
（1）開發成本低，一個web前端開發人員不需要學習很多新技術即可進行開發。
（2）開發一次基本可以適配所有平臺，適用范圍廣，再次體現了成本低。
（3）更新快，用戶看到的總是最新版本，無需下載，隨開隨用。
缺點：
（1）用戶體驗相對來說比較差，Dom解析耗費了大量的時間（傳送門），交互圖形和動畫效果較差，尤其是弱網情況下基本不能忍，而且對系統資源的損耗遠遠超過Native應用。
（2）用戶存留率低，只有打開才有通知推送。
（3）訪問手機文件和手機功能的能力相對來說比較薄弱。
（4）雖然Html5可以離線使用，但是連接網絡的時候把用戶想看的不想看的頁面都給下載下來，個人認為對流量要求比較高，不符合大眾使用。
Hybrid App
Hybrid App又叫混合應用，是一種介于Native App、Web App之間的App，結合了兩種App模式的優點，一般來說是使用Native來處理用戶和系統的交互，Web來展示內容。通過原生系統的WebView / UIWebView或者自定義的WebView來實現Web頁面的嵌入，現在大部分應用都是采用的這種模式。
優點：
（1）可以利用系統API及平臺特性，訪問手機的提供的功能（GPS，相機等）。
（2）用戶體驗適中,可定制的專場動畫和切換動畫，與系統高度切合，可獲得更快的運行速度和性能，并支持豐富的圖形和動畫。
（3）擁有系統級別的通知或提醒，用戶留存率高。
（4）開發成本適中，Web頁面替代了部分Native頁面，并且可以跨平臺使用，節省了開發時間。
缺點：
（1）維護成本高，需要兼容歷史版本，保證歷史版本的正常使用。
（2）分發成本高，分發到不同的應用商店，需要進行不同的配置打包。
（3）嵌入的Web頁面在弱網情況下體驗比較差。
React Native
React Native (簡稱RN)是Facebook于2015年四月開源的跨平臺移動應用開發框架，是Facebook早先開源的Web UI框架 React 在原生移動應用平臺的衍生產物，目前支持iOS和安卓兩大平臺。該框架使用Javascript，類似于HTML的JSX，以及CSS來開發移動應用UI，因此熟悉Web開發的人只需很少的學習成本就可以轉入移動應用開發。
RN運行時包含一個原生的主線程和一個JS線程，JS線程執行JS代碼，負責界面布局和業務邏輯處理，原生線程負責界面渲染和原生組件的執行。RN里面盡量使用原生組件，避免重復造輪子。這樣的好處，一是可以利用現有的大量的原生組件，降低入門門檻；二是可以達到跟原生應用一樣的性能；三是通過JS封裝過后的組件，可以支持跨平臺。
JS在RN里面的作用類似于Python這樣的支持調用原生C庫的腳本語言，都是起著“膠水”的作用。復雜計算和底層功能都通過調用原生接口來完成，流程控制和業務邏輯則在“膠水”語言里完成。這樣既提高了開發效率，又兼顧了性能。
React Native是 Facebook 開源的框架，可以直接用JavaScript 開發原生的APP。React Native和Hybrid App很像，很多人也喜歡吧React Native和Hybrid App混為一談，但其實并不是。React Native采用JavaScript橋接加Native橋接兩個方式合并起來，然后加上增加對比差異化算法增量渲染，而且渲染都是Native渲染，雖然使用JavaScript 編寫，但是后臺是渲染成Native來使用的，性能雖然比純原生差一點，但是還是遠遠比Html5的性能要快很多。
優點：
（1）Learn once,write anywhere。注意，不是Java的Write once, run anywhere！
（2）因為是Native渲染，所以性能相對來說比較高。
（3）可以利用系統API及平臺特性，訪問手機的提供的功能（GPS，相機等）。
（4）擁有系統級別的通知或提醒，用戶留存率高。
缺點：
（1）由于還不是穩定版本，版本更新太快。并且更新新版可能會出現不兼容的問題或者額外的bug需要開發者自己去處理。
（2）學習成本高。要學習Javascript，還需要涉及到IOS，Android開發相關知識。(Boss：這個工作特么的要分給前端做呢還是給客戶端做呢？！）
（3）支持的組件不全面。大部分廠商并不支持React Native。
（4）截止到現在還是個新技術，生態剛剛開始生成，但是還沒有到Native生態那么豐富的地步，很多需求還得自己動手從頭寫起。
題外：
一般要學習一門新技術的時候都會查技術的前景和發展潛力，和相關主流技術對比。不論從已有的生態和發展趨勢，還是公司的技術要求上來看，我覺得目前學習React Native是最好的選擇。過程在下面羅列出來（我都沒用過，暫時都是收集的觀點，意見保留到我都試用之后）：
- Dcloud ： 可能是目前國人開發的最易用的、最優秀的跨平臺框架，并且有自己的IDE，HBuilder和MUI搭配雖然我沒用過，但是周圍朋友公司在用，贊不絕口。據說有人查過最終的頁面結構，依舊是基于WebView的渲染，所以性能暫時還是比不過React Native的。具體詳情見傳送門。
- LuaView ： 阿里的開源SDK，采用的是Lua腳本語言，作者團隊更新比較慢，資料也比較少，不推薦。
- Weex(Vue-Native) ： 同樣是阿里的開源作品，目測是React Native最有力的競爭者，易用性比React Native好，并且性能上各有千秋，甚至說還要更優秀一點，唯一的缺點是開源時間比較晚，資料還不夠豐富，沒有形成強大的生態環境，不過按照目前的形勢看，一切只是時間問題。和React Native的Learn once,write anywhere 理念不同的是，Weex 比較傾向于和Java一樣的 Write once, run anywhere。 具體詳情見傳送門1，傳送門2。
安裝環境：
目前支持的開發平臺是Windows,Mac和Linux。因為家里電腦用的是Win7，所以暫時只總結Windows和Android下的開發環境搭建。其他平臺請看官網這里。
搭建React Native平臺環境需要安裝Python2和Node.js。我們可以直接去官網下載配置環境，不過官方推薦我們用Chocolatey來進行環境搭建。
Chocolatey is a package manager for Windows (like apt-get or yum but for Windows). It was designed to be a decentralized framework for quickly installing applications and tools that you need. It is built on the NuGet infrastructure currently using PowerShell as its focus for delivering packages from the distros to your door, err computer.
1.一般來說，使用Chocolatey來安裝軟件的時候，需要以管理員的身份來運行命令提示符窗口。我們在命令行下輸入如下命令（自備梯子）：
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\\\\chocolatey\\\\bin
安裝比較慢，而且沒有進度條，忍忍。
2.安裝Node.js 和 Python2。注意，目前已知Node 7.1版本在windows上無法正常工作，請注意避開這個版本！
choco install nodejs.install
choco install python2
3.npm是隨同Node.js一起安裝的包管理工具，能解決Node.js代碼部署上的很多問題。而Yarn是Facebook提供的替代npm的工具(Yarn vs npm: 功能上的差異)，可以加速node模塊的下載。React Native的命令行工具用于執行創建、初始化、更新項目、運行打包服務（packager）等任務（自備梯子）。
npm install -g yarn react-native-cli
如果沒有合適的梯子，那就先設置下npm鏡像（如果不能識別npm命令，你可能需要重新開一個命令行窗口）
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
4.我們需要Java Development Kit [JDK] 1.8或更高版本。你可以在命令行中輸入以下來查看你當前安裝的JDK版本(記得配置JAVA_HOME)。
javac -version
如果版本不合要求，則可以到 官網上下載，或是使用包管理器來安裝。
choco install jdk8
5.安裝Android開發環境，基本功了，網上大把的教程，這里就不準備在介紹了。值得一提的是React Native對AndroidStudio的最低支持是2.0，并且確保ANDROID_HOME
環境變量正確地指向了你安裝的Android SDK的路徑。
6.進行到現在基本已經完成環境搭建了，為了提升Java編譯速度，我還開啟了Gradle Daemon
(if not exist "%USERPROFILE%/.gradle" mkdir "%USERPROFILE%/.gradle") && (echo org.gradle.daemon=true >> "%USERPROFILE%/.gradle/gradle.properties")
自此我們的React Native環境搭建已經完成，接下來可以新建一個項目來測試環境有沒有搭建成功。
創建一個Hello RN
讓我們從Hello RN開始我們的React Native旅程：
react-native init HelloRN
漫長的等待結束后我們可以看到，如果項目創建完成，會自動執行編譯和部署到手機上，需要在AndroidStudio打開并且模擬器或者真機的adb連接成功情況下才能查看。如果不會自動編譯部署就需要手動進行如下命令進行打開服務：
react-native start
默認服務端口號是8081，如果想要修改端口號，有兩種方式：
- 開啟服務的時候直接指定端口號
react-native start --port XXXX
- 修改默認端口配置文件，配置文件在項目根目錄下的node_modules\react-native\local-cli\server\server.js里面，_server的default里面進行端口號修改。
如果忘了開AndroidStudio或者沒有連接模擬器 / 真機，沒關系，我們可以手動進行編譯部署：在AndroidStudio打開并且模擬器或者真機的adb連接成功情況下打開并編譯我們的Hello RN:
cd HelloRN
react-native run-android
如果你碰到了ERROR Watcher took too long to load的報錯，請嘗試將這個文件中的MAX_WAIT_TIME值改得更大一些 (文件在node_modules/react-native/目錄下)。
修改項目
如果你已經成功運行了項目，我們可以簡單嘗試玩一下：
- 使用你喜歡的文本編輯器打開index.android.js并隨便改上幾行
- 按兩下R鍵，或是用Menu鍵打開開發者菜單，然后選擇 Reload JS 就可以看到你的最新修改。
- 在終端下運行以下命令可以看到你的應用的日志。
adb logcat *:S ReactNative:V ReactNativeJS:V
開發IDE配置
雖然我們已經成功跑起來了Hello RN但是開發沒有IDE怎么行，我選擇的是AndroidStudio + WebStorm組合。如果遇到gradle很久的問題，請直接移步問題三。
AndroidStudio
直接Import項目根目錄下的android即可。
WebStorm
WebStorm需要進行一點點配置：
1.首先導入項目，直接Open整個根目錄：
2.WebStorm提示你需要切換JSX，直接切換Switch
3.進行Edit Configurations，配置npm
4.運行服務，然后通過WebStrom命令窗口部署即可
IDE環境裝載結束，可以開始無限火力了。
