windows部署React-Native的開發環境實踐（技術細節）

前情摘要

衆所周知，有人說.net能夠用Xamrian，呵呵，不習慣收費的好麼？搞.Net的人設置一次java的環境變量，可能都以爲實在太麻煩了，多是由於這些年微軟確實把咱們給帶壞了，全部東西一鍵安裝，簡單設置，打開項目直接運行就好了，而要想成功部署android開發環境，那可能須要本身填N個坑，最近FB出的React-Native比較火，哥們在不忍轉學java的狀況下，，雖然java不是anroid，但兄弟我仍是決定用React-Native來實現本身的android夢，因而開始了很多天的填坑運動，固然兄弟們不要像我學習，我是一邊工做，一邊填坑的，有一下沒一下的，可是最後仍是順利部署上了。

特別鳴謝

首先，我得說，我開始填坑也是站在巨人的肩膀上的，因此如下幾位的文檔我是通過仔細閱讀的，雖然到後來填坑時，不少細節都忘了，可是還得回來再看過啊，你們在看的隨筆時，若是發現有的東西只是說了下，那頗有可能他們幾位說的已經比較詳細了，我固然不表述了。因此結合起來看最好。

http://bbs.react-native.cn/topic/10/%E5%9C%A8windows%E4%B8%8B%E6%90%AD%E5%BB%BAreact-native-android%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83（首選，否則你還能再多填坑）

http://bluereader.org/article/82281734（這篇也不錯）

http://my.oschina.net/jackzlz/blog/508210?fromerr=5Hyi3aQ4（有幫助）

還有一個qq羣幫助我比較大，其中有高手願意指點新人，同時有好多新人願意相互交流，爲免你們說我作廣告，能夠私信索取

正式填坑

你若是看了上邊幾個連接的文檔相信知道了一個基本步驟：

1. 安裝JDK

2. 安裝Android SDK
3. 安裝node.js
4. 安裝react-native命令行工具
5. 建立項目
6. 運行packager
7. 運行模擬器
8. 安卓運行

我列的這幾個步驟可能與上邊參考的幾位阿牛的有區別，其實有些環節能夠暫時不操做，對於咱們新手來講，第一眼想看到的不就是程序正常跑起來麼。

一、安裝JDK

這個你們都知道怎麼下載，但也有少數人不知道，我囉嗦下：

下載連接：http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html

有 8u65或8u66，我下的後者，這個我到以爲無所謂，本身根據喜愛下吧。下來以後就是安裝了，在windows下安裝應該沒有問題，安裝完以後要配置環境變量，這是JDK的第一大特性（我的觀點），咋就不能安裝時程序設置呢，非得手動配？你看看人家Node，本身安裝完也就設好了。

配置JDK

按上圖的步驟，此電腦上右擊，而後按後邊的步驟就能夠了，在環境變量中添加JAVA_HOME的變量與值，並將其添加到Path中，我用的是win10，其它windows操做系統相似，mac自行繞開，這個你們若是不清楚細節，直接百度就好了。若是設置成功，你在cmd中輸入java，那確定會正確的響應，因此設置完後檢查下看這步有沒有問題，不然等到了後邊以後，你會發現坑根本不知道是在哪挖下的，那你怎麼填？

二、安裝Android SDK

這個是我遇到比較大的一個坑，主要還由於牆的緣由，很差操做，因此坑也就大點，其實這塊的問題，在上面幾個大牛的帖子中是說過的，如下複製下來，你們領會下：

能夠單獨安裝Android SDK，也能夠經過Eclipse ADT或者Android Studio一併安裝。推薦使用Android Studio，如下說明會默認以Android Studio的方式說明。請注意選擇x86仍是x64版本。

爲了加速下載，推薦從AndroidDevTools下載。

而後進入SDKManager(可經過Android Studio菜單Tools-Android-SDK Manager)，確保如下項目已經安裝並更新到最新：

• Tools/Android SDK Tools (24.3.3)

• Tools/Android SDK Platform-tools (22)

• Tools/Android SDK Build-tools (23.0.1)

• Android 6.0 (API 23)/SDK Platform (1)

• Extras/Android Support Library(23.0.1)

推薦使用騰訊Bugly的鏡像加速下載。查看說明

推薦將SDK的platform-tools子目錄加入系統PATH環境變量。

我總結下個人經驗，我是先安裝的SDK manager，而後讓其安裝SDK的，以下圖：

而後這貨就會常常給你顯示個Failed了，或者長時間進度條保持不變，速度很慢，時間很長，我起初就讓他本身下去唄，我用的是虛擬機，反正不影響我正常工做，它愛何時下完什麼下完，因此常常下班了，它還在下，乾脆不關機，你下你的，後來有幾個沒裝上也不在意了，（此處有坑），打開SDK manager後你就會看到哪些裝了哪些沒裝，顯示installed的便是裝了，哪幾個 要裝建議參照上邊的說明。我用這個裝的時候buildtool的23.0.1死活裝不上，最後因此老出錯，下邊有說。

安裝完以後，記得配置ANDROID_HOME環境變量，是Android SDK Tools的安裝目錄，這個你在安裝的時候注意看下，而後在path中要添加兩條， %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools,

這個建議你們設置，不然後邊會出錯，我當時是沒有設的，由於有一個帖子中說最好設上，也就是能夠不設，結果本身給本身挖了個坑。安裝完以後若是正常，你在命令行輸入android，就能直接打開SDK manager,這也算是驗證你的android環境搭建好了沒。

三、安裝node.js

這個是最沒有坑的一個，下載其它東西的時候捎帶下載了node.js，而後安裝了下，並且這貨本身設置環境變量，省去咱們很多事，此處給node點個贊，程序在安裝時我記得有選項，選上就能夠了，你裝完以後，在環境變量中就能看到下面的東西了。

 

四、安裝react-native命令行工具

若是前邊正常的話，這塊應該是比較容易的，照着教程輸入下邊的命令：

npm install -g react-native-cli

若是你出現上邊的效果，說明它在工做，這應該是正常的。至於以上大牛們帖子中說的bug，我是沒有遇到的，說明在新版本中已經修復這個問題了。

五、建立項目

輸入下邊的命令：

react-native init reactNative

這個命令前邊兩具是命令後邊這個reactNative是目錄名，你本身命名就行，我一開始覺得必須是這個名字，鬱悶了好半天，後來才發現這就是名字。

接下來輸入下邊的命令：

react-native run-android

我當時是出錯了的，以下圖：

提示是缺乏Build Tools 23.0.1，這就是前邊採用SDK manager時挖下的坑，因此建議你們前邊有問題時解決了再日後走，我是如何解決的呢，我火冒三丈的時候，下載了Android Studio，記得大牛們說，推薦下載這個，但是我沒有聽，用SDK manager在那裏狠費勁，最後還得裝上。這裏須要提醒下各位，下載這個的目的是補全前邊缺乏的Build Tools，你們若是也採用了兩種方式來安裝的話，必定要注意將下載下來的SDK放在同一個目錄中，也就是要與環境變量設置中的位置一致，默認的應該是以下圖相似的位置，和SDK manager設置的路徑不一樣，因此若是你採用兩種方式補全的話，你就把這個目錄下的複製到同一個目錄中，我是複製這裏到SDK manager的，緣由是我前邊都設置了環境變量了啊。

因此若是是第一次安裝的兄弟姐妹們，就不要採用SDK manager了，速度比較慢，固然這是我的觀點，您僅供參考啊！

上邊的問題解決後，就能夠運行packager了

六、運行packager

react-native start

上邊就是正常運行後的狀態，一開始我等着結束呢，後來它就一直保持這個狀態，我覺得卡住了，其實它是正在運行，這裏吐槽下，你就不能給個正在運行的提示啊，害的我擔憂好半天，隨後咱們須要安裝模擬器或連真機。

說明下，若是用真機，android 5.0如下的話要和電腦網絡相通，注意是網絡，不是插了USB線就好了，我在此處轉過好幾圈，最後仍是羣裏的高手說的，我才明白了。不過我說明下，我是在虛擬機中裝的環境，因此用模擬器調試的，不然手機如何與虛擬機網絡相通仍是個問題，誰要是解決了告訴我一聲，不過不管是模擬器仍是真機，都是要裝驅動的，我爲了圖省事，我直接裝了豌豆夾，讓這貨幫忙裝了下驅動，呵呵，此處應該有掌聲，大家要是嫌裝驅動麻煩，大家也能夠這樣作。

七、運行模擬器

模擬器你們就下載大牛們推薦的BlueStacks，挺好用的。你鏈接好虛擬機或者真機也好，在cmd中輸入adb devices就能夠查看了。若是有東西說明鏈接正常，沒有你就再檢查檢查看是否是沒鏈接上。

8.安卓運行

設備鏈接正常以後，就能夠運行咱們的程序了，注意不要關掉上邊說的packeger窗口，用另外一個CMD運行下邊的命令：

react-native run-android

這裏原本是咱們最應該激動的時候，可是每每這個時候都是要出錯的，個人也不例外，顯示了一個紅色窗口，以下圖：

不要驚慌，沒關係張，最起碼咱們都看到界面了啊，下面的設置原本是能夠參考第一篇老大的文章的，那就是設置IP與端口，只是老大沒有貼圖，同時也說是局域網地址，我一直覺得是和搭建環境的電腦處於同一個網段就行，實際上是要設置成電腦的IP，並加上端口，以下圖，而後肯定再返回就好了，而後再從新rload js就應該正常了。設置的菜單真機點菜單按鍵便可，模擬器的點下圖所示的位置就能出來，而後選那個dev settings.

再而後：選下邊的debug server host for device這一項。

而後就是這裏了：

設置完以後肯定返回再從新加載，激動人心的時刻才真正到來了：

總結

程序員都有一顆強大的心是有道理的，光這個東西我調試了好幾天，都沒有戰勝我，最後我仍是讓它出來了，因此爲全部的搞開發的程序員們鼓掌。

固然，因爲歷時幾天，同時內容實在比較多，又得調試bug，還得截圖給你們準備寫心得，因此有的地方寫的很亂，同時也有不全面的地方，你們若是有疑問，留言或qq均可以。我們接着聊。聲明一下，截圖有的是網上的，有的是羣裏直接拿過來了，只是爲了符合場景，若是你們以爲我盜了你的圖，提出來，我再想辦法截個人圖，畢竟有的錯誤還原一回也不容易了