在Windows下搭建React Native Android開發環境[踩坑]

註釋：隨着react-native版本的更新，網上許多教程都有些許問題，現在根據自身的踩坑經歷，重新整理一下

在Windows下搭建React Native Android開發環境

React Native Android

安裝JDK

從Java官網之JDK下載列表下載JDK並安裝。請注意選擇x86還是x64版本。我在這裏直接接受了 @天地之靈_鄧鋆 的推薦將JDK的bin目錄加入到了系統PATH環境變量。注意：下載鏈接不能直接使用，需要先接受協議（這裏有存入cookies），可以通過Java官網之JDK下載列表下載JDK。

設置環境變量PATH：jdk的位置。例如：（PATH => D:\Program Files\Java\jdk1.8.0_60\bin）

安裝Android SDK(jdk和sdk的環境變量很重要，一定要正確安裝)

單獨安裝Android SDK，在牆的環境下，爲了速度我選擇了使用androiddevtools。

設置環境變量ANDROID_HOME：Android SDK Manager的位置 例如：（PATH => D:\Program Files\Android SDK Tools）
設置環境變量PATH：例如：（PATH => %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools）

爲了避免一些其他問題，最好再設置環境變量ANDROID_SDK_HOME：Android SDK Manager的位置 例如：（PATH => D:\Program Files\Android SDK Tools）

安裝React-native-cli

npm install -g react-native-cli

初始化項目

react-native init reactNative

初始化很慢，不要着急，正常情況下十幾分鍾，如果出現問題，要重新刪除根目錄下node_modules，重新初始化

運行packager

cd reactNative
react-native start

最新的版本只要在項目根目錄下運行 react-native start 就ok了，注意，後邊的熱加載的日誌也會在這裏打印出來，如果沒有日誌，就說明虛擬機連接本地開發環境有問題

Run android app

cd reactNative
react-native run-android

如果沒有安裝安卓模擬器，這裏可以直接使用真機安裝測試，（官方的模擬器能卡到爆炸，啓動要半個小時，最好不要使用）
這個過程很漫長，等等等……

說說虛擬機，現在最流行的模擬器是 genymotion，百度下載時候最好不要下載帶有虛擬機的版本，genymotion 正常單獨的文件大小是20多M，虛擬機vitrualBox的版本要是4.2.12的才能避免我半天欲仙欲死的各種奇葩問題, 期待你不要出現  unable to start the virtual device  這種沒有一點提示的蛋疼問題吧

安卓調試

目前Windows下無法自動打開chrome進行調試，所以手動打開chrome，訪問如下地址：http://localhost:8081/debugger-ui 即可。

報錯了

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> failed to find target with hash string 'android-23' in: D:\Program Files\Andro
id SDK Tools

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug
option to get more log output.

BUILD FAILED

Total time: 10 mins 42.463 secs
Could not install the app on the device, see the error above.

解決辦法就是安裝Android-23，對於上一篇關於ionic的文是需要Android-22。

又報錯了

Could not find com.android.support:appcompat-v7:版本號.

安裝Android Support Libraries和Android Support Repository

build成功，安裝上apk後界面紅了

解決辦法

選擇菜單：Dev settings

選擇項：Debug server host for device

設置編譯環境PC的IP地址，最新的版本需要加上端口號了,  一般爲： localhost:8081

確保手機與編譯環境在同一WIFI環境下（IP段相同），packager在運行狀態下，重啓APP

初始化歡迎界面就出來了，後面繼續學習中……按上面文章的操作處理後，如果一直連不上，用PC上的瀏覽器訪問一下地址http://localhost:8081/index.android.bundle?platform=android，瀏覽器能正常訪問但手機訪問時在packager的DOS窗口沒有看到log輸出，那麼你可以嘗試使用下面的命令：

adb reverse tcp:8081 tcp:8081

參考網址：http://stackoverflow.com/questions/32572399/react-native-android-failed-to-load-js-bundle

最後還有一個監控問題：在你編輯完js文件時，不能快速點擊保存，這樣的話，會導致packager監控失敗導致錯誤，出現紅色界面