前情摘要
眾所周知,有人說.net可以用Xamrian,呵呵,不習慣收費的好么?搞.Net的人設置一次java的環境變量,可能都覺得實在太麻煩了,可能是因為這些年微軟確實把我們給帶壞了,所有東西一鍵安裝,簡單設置,打開項目直接運行就行了,而要想成功部署android開發環境,那可能需要自己填N個坑,最近FB出的React-Native比較火,哥們在不忍轉學java的情況下,,雖然java不是anroid,但兄弟我還是決定用React-Native來實現自己的android夢,於是開始了數日的填坑運動,當然兄弟們不要像我學習,我是一邊工作,一邊填坑的,有一下沒一下的,但是最后還是順利部署上了。
特別鳴謝
首先,我得說,我開始填坑也是站在巨人的肩膀上的,所以以下幾位的文檔我是經過仔細閱讀的,雖然到后來填坑時,很多細節都忘了,但是還得回來再看過啊,大家在看的隨筆時,如果發現有的東西只是說了下,那很有可能他們幾位說的已經比較詳細了,我當然不表述了。所以結合起來看最好。
http://bluereader.org/article/82281734(這篇也不錯)
http://my.oschina.net/jackzlz/blog/508210?fromerr=5Hyi3aQ4(有幫助)
還有一個qq群幫助我比較大,其中有高手願意指點新人,同時有好多新人願意相互交流,為免大家說我做廣告,可以私信索取
正式填坑
你如果看了上邊幾個鏈接的文檔相信知道了一個基本步驟:
-
安裝JDK
- 安裝Android SDK
- 安裝node.js
- 安裝react-native命令行工具
- 創建項目
- 運行packager
- 運行模擬器
- 安卓運行
我列的這幾個步驟可能與上邊參考的幾位阿牛的有區別,其實有些環節可以暫時不操作,對於我們新手來說,第一眼想看到的不就是程序正常跑起來么。
1、安裝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,那肯定會正確的響應,所以設置完后檢查下看這步有沒有問題,否則等到了后邊之后,你會發現坑根本不知道是在哪挖下的,那你怎么填?
2、安裝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環境搭建好了沒。
3、安裝node.js
這個是最沒有坑的一個,下載其它東西的時候捎帶下載了node.js,然后安裝了下,而且這貨自己設置環境變量,省去我們不少事,此處給node點個贊,程序在安裝時我記得有選項,選上就可以了,你裝完之后,在環境變量中就能看到下面的東西了。
4、安裝react-native命令行工具
如果前邊正常的話,這塊應該是比較容易的,照着教程輸入下邊的命令:
npm install -g react-native-cli
如果你出現上邊的效果,說明它在工作,這應該是正常的。至於以上大牛們帖子中說的bug,我是沒有遇到的,說明在新版本中已經修復這個問題了。
5、創建項目
輸入下邊的命令:
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了
6、運行packager
react-native start


上邊就是正常運行后的狀態,一開始我等着結束呢,后來它就一直保持這個狀態,我以為卡住了,其實它是正在運行,這里吐槽下,你就不能給個正在運行的提示啊,害的我擔心好半天,隨后我們需要安裝模擬器或連真機。
說明下,如果用真機,android 5.0以下的話要和電腦網絡相通,注意是網絡,不是插了USB線就行了,我在此處轉過好幾圈,最后還是群里的高手說的,我才明白了。不過我說明下,我是在虛擬機中裝的環境,所以用模擬器調試的,否則手機如何與虛擬機網絡相通還是個問題,誰要是解決了告訴我一聲,不過無論是模擬器還是真機,都是要裝驅動的,我為了圖省事,我直接裝了豌豆夾,讓這貨幫忙裝了下驅動,呵呵,此處應該有掌聲,你們要是嫌裝驅動麻煩,你們也可以這樣做。
7、運行模擬器
模擬器大家就下載大牛們推薦的BlueStacks,挺好用的。你連接好虛擬機或者真機也好,在cmd中輸入adb devices就可以查看了。如果有東西說明連接正常,沒有你就再檢查檢查看是不是沒連接上。
8.安卓運行
設備連接正常之后,就可以運行我們的程序了,注意不要關掉上邊說的packeger窗口,用另一個CMD運行下邊的命令:
react-native run-android
這里本來是我們最應該激動的時候,但是往往這個時候都是要出錯的,我的也不例外,顯示了一個紅色窗口,如下圖:

不要驚慌,不要緊張,最起碼我們都看到界面了啊,下面的設置本來是可以參考第一篇老大的文章的,那就是設置IP與端口,只是老大沒有貼圖,同時也說是局域網地址,我一直以為是和搭建環境的電腦處於同一個網段就行,其實是要設置成電腦的IP,並加上端口,如下圖,然后確定再返回就行了,然后再重新rload js就應該正常了。設置的菜單真機點菜單按鍵即可,模擬器的點下圖所示的位置就能出來,然后選那個dev settings.
再然后:選下邊的debug server host for device這一項。

然后就是這里了:
設置完之后確定返回再重新加載,激動人心的時刻才真正到來了:
總結
程序員都有一顆強大的心是有道理的,光這個東西我調試了好幾天,都沒有打敗我,最后我還是讓它出來了,所以為所有的搞開發的程序員們鼓掌。
當然,由於歷時幾天,同時內容實在比較多,又得調試bug,還得截圖給大家准備寫心得,所以有的地方寫的很亂,同時也有不全面的地方,大家如果有疑問,留言或qq都可以。咱們接着聊。聲明一下,截圖有的是網上的,有的是群里直接拿過來了,只是為了符合場景,如果大家覺得我盜了你的圖,提出來,我再想辦法截我的圖,畢竟有的錯誤還原一回也不容易了












