windows 下android react native詳細安裝配置過程

寫在前面：

在網上搜了很多安裝配置文檔，感覺沒有一個真的跟我安裝的過程一模一樣的，東拼拼西湊湊，總算是裝好了，我不會告訴你，斷斷續續，我花了兩天時間。。。一到黑屏報錯就傻眼，幸好在react群里遇到了熱心的同行，還有同事的幫助。。。廢話就到這里了，此處只是記錄我自己裝載的過程，系統環境各種不一樣，可能或多或少有差異。

我的電腦，windows7 64位之前已經裝了eclipise，java，jdk，所以，有些安裝文檔上面的java的jdk和c++，我電腦上並不需要。

這里我還是都粘貼上來。

參考的好的鏈接：

react中文論壇上的安裝文檔

史上最詳細Windows版本搭建安裝React Native環境配置

genymotion虛擬機的安裝說明：

http://www.codeceo.com/article/android-genymotion-config.html

 

1、安裝JAVA JDK

從Java官網下載JDK並安裝。請注意選擇x86還是x64版本。http://jdk.android-studio.org/

推薦將JDK的bin目錄加入系統PATH環境變量。安裝完成后測試path環境 cmd命令行輸入java。

配置環境變量，可以參考這個地址：

http://jingyan.baidu.com/article/db55b609fa946e4ba20a2f56.html

成功的截圖是：

 

2、安裝Android SDK

可以單獨安裝Android SDK，也可以通過Eclipse ADT或者Android Studio一並安裝。我是使用的Android Studio，請注意選擇x86還是x64版本。過程很緩慢，因為文件很大，也看網速的。為了加速下載，推薦從AndroidDevTools下載。

一直默認安裝下載下來，也沒有出現其他的問題，下下來之后，找到file-->setting-->android sdk  紅框中的這些都要打鈎和安裝，過程很慢。其中Android SDK Build-tools一定要選擇“Android SDK Build-tools version 23.0.1 ”（23.0.1這個版本的，有很多個不同版本）。

 

3、安裝android環境設置

Android SDK這些都下載安裝完成之后，還要配置環境變量，就是android環境設置

1、新建環境變量，ANDROID_HOME：Android SDK Manager的位置

例如我的電腦上面：（ANDROID_HOME=> C:\Users\hsq\AppData\Local\Android\Sdk）

2、設置環境變量PATH：例如：（PATH=> %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools）

打開命令行輸入 android 和 adb 分別測試一下，測試成功才行。

4、安裝node.js

這貨是基於js的，node.js輕量級的Web服務器，想要是React Native跑起來需要安裝node， 如果沒有安裝node.js，先去官網安裝node.js,最好是最新6.0版本

下載地址：https://nodejs.org/en/

下載node.js，找好對應的版本，然后去安裝就可以了。
大家可以通過node -v的命令來測試NodeJS是否安裝成功

5、安裝C++環境

這個里面的幾個軟件，我都安裝了。

推薦從itellyou下載並安裝Visual Studio 2013或2015。也可選擇Windows SDK、cygwin或mingw等其他C++環境。編譯node.js的C++模塊時需要用到。
如果使用VS2015，安裝時只需要選擇c++ 的那一項安裝就行了，你需要在命令行中設置npm config set msvs_version 2015 --global

安裝git for windows

在這里下載安裝，安裝過程中注意選擇"Run Git from Windows Command Prompt"。

這個安裝軟件會自動將git添加到環境變量中。

安裝Python

從官網下載並安裝python 2.7.x（3.x版本不行）

 我的系統是64位的需要對應的64位的，並且還要在環境變量中配置，在path中添加安裝的目錄,例如安裝在d盤中，d:/python/

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

譯注：由於眾所周知的網絡原因，react-native命令行從npm官方源拖代碼時會遇上麻煩。請將npm倉庫源替換為國內鏡像，在命令行輸入：

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

npm install -g react-native-cli

安裝好之后，可以命令行下就有react-native命令了

 

7、創建RN項目

在電腦上新建文件夾 AwesomeProject，這個里面是放在e盤的react_native_workspace目錄下的，命令行進入你目錄AwesomeProject后，輸入react-native init AwesomeProject，等待一段時間（較慢）

8、運行packager

就是在命令行輸入：
react-native start

運行ok，可以用瀏覽器訪問http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的腳本（看到很長的js代碼就對了）。第一次訪問通常需要十幾秒，並且在packager的命令行可以看到形如[====]的進度條。

如果你遇到了ERROR Watcher took too long to load的報錯，請嘗試修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js，將其中的MAX_WAIT_TIME 從25000改為更大的值（單位是毫秒）

這個地方很容易出錯，如果出了其他的錯，檢查一下上面的各個軟件和環境變量是否配置了。

9、運行模擬器

推薦使用BlueStacks不過要小心它推送的廣告和垃圾應用。

如果有真機，可以不必運行模擬器，要配置好驅動，使得adb devices可以看到對應的設備。

10、安卓運行

保持packager開啟，就是上一步的命令行不關閉的意思，另外再打開一個命令行窗口，然后在存放工程目錄下運行（我的是AwesomeProject文件夾）

react-native run-android

首次運行需要等待數分鍾並從網上下載gradle依賴。（這個過程屏幕上可能出現很多小數點，表示下載進度。這個時間可能耗時很久，也可能會不停報錯鏈接超時、連接中斷等等——取決於你的網絡狀況和牆的不特定阻斷。總之要順利下載，請使用穩定有效的科學上網工具。）

運行完畢后可以在模擬器或真機上看到應用自動啟動了。

如果apk安裝運行出現報錯，請檢查上文中安裝SDK的環節里所有依賴是否都已裝全，platform-tools是否已經設到了PATH環境變量中，運行adb devices能否看到設備。

至此，應該能看到APP紅屏報錯，這是正常的，我們還需要讓app能夠正確訪問pc端的packager服務。

搖晃設備或按Menu鍵（Bluestacks模擬器按鍵盤上的菜單鍵，通常在右Ctrl的左邊 或者左Windows鍵旁邊），可以打開調試菜單，點擊Dev Settings，選Debug server host for device，輸入你的正在運行packager的那台電腦的局域網IP加:8081（同時要保證手機和電腦在同一網段，且沒有防火牆阻攔），再按back鍵返回，再按Menu鍵，在調試菜單中選擇Reload JS，就應該可以看到運行的結果了。

如果真實設備白屏但沒有彈出任何報錯，可以在安全中心里看看是不是應用的“懸浮窗”的權限被禁止了。

11、安卓調試

打開Chrome，訪問 http://localhost:8081/debugger-ui，應當能看到一個頁面。按F12打開開發者菜單。

在模擬器或真機菜單中選擇Debug JS，即可開始調試。