hybrid app初體驗，和react-native一塊兒飛

第一次啓動了react-native的示例，今天主要把其中遇到的坑與解決的辦法分享給你們。若有疏漏、錯誤還望指正。

首先仍是要從hybrid app這個概念提及（若是對於這個過程不感興趣的同窗，能夠直接往下翻，從開始配置react-native看起）。hybrid app就是混合應用。從我我的的理解，本覺得就是在原生的app裏面嵌入一些網頁（webview）,直到最近去體會了一把ionic，以及react-native才感覺到了本身的膚淺，具體怎麼膚淺了呢，一會再詳細說，先來看看作一個hybrid app咱們該從何入手。

是的，假如我想作一個hybrid app，那麼我要怎麼作呢？從哪裏下手呢？首先我想到了，網上可定有不少hybrid app的框架，我要弄個框架，體驗一下（其實，博主以前還先去簡單的瞭解了一下原生應用，下載了android studio試用了一下）。仍是百度一下：

除去前兩個是百度推廣的廣告，閱讀了後邊幾個連接之後，一個框架逐漸進入了咱們的視野：ionic framework。跟着這篇文檔的入門教程：ionic2安裝入門我初步的把ionic的web內容部署到了本地。這其中要***下載一些東東，還要安裝python2（配置環境變量），速度也很慢。

到執行：

$ ionic serve

的時候，咱們在瀏覽器裏訪問127.0.0.1:8100就能夠看到咱們的demo在瀏覽器裏運行了：

是一個簡單的tab頁面，用鼠標點一點，挺流暢的，不卡。

這裏讓我產生了一些疑惑，hybrid應用不是混合應用麼，怎麼這個demo裏，一行原生的代碼也沒有，就搭建出了一個簡單的tab ui了呢？這裏徹底用web前端的代碼進行編寫，就算後邊用一些其餘的方式去編譯，封裝進原生的應用，可它本質不仍是一個web app麼。那麼hybrid app究竟是什麼呢？

帶着這樣的疑惑我又百度了一下hybrid app的百度百科，其中有一段講分類，hybrid app能夠分爲：多View混合型、單View混合型、web主體型，等三種類型。那麼ionic框架搭建的app就屬於第三種web主體型了。

那麼既然已經有了這麼一個demo，我就想把它打包成一個apk，放到手機上跑一下，看看什麼效果嘍。根據文檔說明，咱們須要首先給這個項目增長一個平臺的支持：

ionic platform add android //博主是窮人用安卓機

就這樣，博主的電腦開始了無盡的下載與編譯過程，斷斷續續，重啓了三次，耗時兩天，仍是沒有完成這個編譯的過程，最後的畫面停留在了下載某些jar包的過程當中（幾個小時沒動了，***後，重啓兩次也到這裏不動了）：

ionic，咱們的緣分就到這裏吧，借用宋冬野的一句歌詞：愛上一匹野馬，可個人家裏沒有草原。ionic你仍是在長城外邊馳騁吧。

恰逢等待ionic下載的間隙，我又開始了react-native的學習。react-native是最近很火熱的一套移動應用開發解決方案（我開始把它歸到hybrid app裏，但隨着認識的加深，我發現它並非一般意義上的hybrid app，它使用js編寫程序，解譯後交給原生應用去渲染ui，或者直接調用原生代碼，相比其餘hybrid app在頁面上進行混合，它更多的是在程序內部、編碼方式上進行的混合），具體的介紹網上一大堆，你們本身看嘍。

開始配置react-native

跟着這篇文檔，開始安裝咱們的react-native：react-native安裝
Chocolatey這個你們能夠不裝的（老外用linux習慣了，對windows的手動下載安裝配置很不屑，因此想出來搞了這個自動安裝其餘軟件的軟件，要***的），下邊的內容能夠手動安裝就行了，該***的就***吧。不得不說，這篇文檔，我給打100分，寫的很是的詳盡，比英文版的還要詳盡，很是的實用。容易出問題的有幾點：

1.React Native運行Android時提示要下載: gradle-2.4-all.zip ，下載失敗，出現錯誤。這裏有爲先賢給填了坑：下載gradle-2.4-all.zip失敗解決辦法

2.在安裝android studio後，能夠打開Tools–>Android–>SDK Manager，勾選上Show Package Details，而後在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1。（必須是這個版本）進行下載安裝（避免出現這個錯誤：failed to find Build Tools revision 23.0.1）。

3.增長ANDROID_HOME環境變量，並在Path環境變量中增長：%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools兩個配置(避免出現Could not get BatchedBridge Error關於這個錯誤還能夠參考這個連接：Could not get BatchedBridge Error)。

配置好之後，經過usb鏈接上咱們的電腦和手機（安卓手機，啓用開發者模式，啓用usb調試，小米手機要額外增長配置：設置–>更多設置–>開發者選項–>（滑動到頁面最底部）關閉「啓用MIUI優化「–>完事會重啓，這樣作能夠避免的問題：com.android.ddmlib.InstallException: Failed to establish session react-native），而後運行：

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

也是要等待一會，下載不少jar包什麼的，相比ionic這個過程比較短，半個小時以內就搞定了，直到出現了：

看到你的手機上順利的啓動了這個demo：

好的，react-native已經正常的啓動了，能夠去學習react-native的語法與組件知識了，繼續加油吧，同志們。