在Windows下搭建React Native Android開發環境
前段時間在開發者頭條收藏了 @天地之靈_鄧鋆 分享的《在Windows下搭建React Native Android開發環境》，在開發者頭條的抓取內容可以看到一部分，由於一直在休假就沒有仔細學習，今天再次回顧我的收藏時卻發現鏈接打不開（其實當時也有發現，只是這麼說一下罷了）。於是，你應該知道怎麼做的，最好的工具莫過於搜索而不是一味的抱怨說只能在mac上玩。之前因爲react native ios肯定是隻能在mac上玩，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
單獨安裝Android SDK，在牆的環境下，爲了速度我選擇了使用androiddevtools。
設置環境變量ANDROID_HOME：Android SDK Manager的位置 例如：（PATH => D:\Program Files\Android SDK Tools）
設置環境變量PATH：例如：（PATH => %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools）
安裝React-native-cli
npm install -g react-native-cli
初始化項目
react-native init reactNative
報錯了
This will walk you through creating a new React Native project in d:\www\project
\reactNative
events.js:85
throw er; // Unhandled 'error' event
^
Error: spawn npm ENOENT
at exports._errnoException (util.js:746:11)
at Process.ChildProcess._handle.onexit (child_process.js:1053:32)
at child_process.js:1144:20
at process._tickCallback (node.js:355:11)
at Function.Module.runMain (module.js:503:11)
at startup (node.js:129:16)
at node.js:814:3
windows下執行到這裏就會報錯，原因是npm在windows下的bug（來源於參考資料）。解決辦法，直接clone項目主分支master。
git clone https://github.com/facebook/react-native.git
cd react-native/react-native-cli && npm install -g
接下來就可以初始化項目了
react-native init reactNative
運行packager
這裏最新的版本已經修復了 @天地之靈_鄧鋆 提到的BUG。
在工程目錄下運行
node node_modules/react-native/packager/packager.js
這條命令會看見程序開啓了8081端口，並且運行[node node_modules/react-native/packager/packager.js](node node_modules/react-native/packager/packager.js)可以看見項目代碼輸出。
Run android app
cd reactNative
react-native run-android
如果沒有安裝安卓模擬器，這裏可以直接使用真機安裝測試。
這個過程很漫長，等等等……
安卓調試
目前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地址，例如：192.168.25.121
確保手機與編譯環境在同一WIFI環境下（IP段相同），packager在運行狀態下，重啓APP
初始化歡迎界面就出來了，後面繼續學習中……
一波三折
這個hello world過程一波三折，主要歸結爲以下幾點：
- 牆。我使用的是ss，但是這個過程中還是會有問題，主要是家用環境下。這個關係到npm的使用，這個可以使用淘寶鏡像。Android環境搭建，這個我是在Androiddevtools上找的方法，公司環境下輕鬆安裝，家用環境到現在還是沒有搞定。
- bug。這個過程中本身就有一些問題，關於node版本的問題（手動升級4.1.1），react-native版本的問題（手動clone 0.12-rc）。
- 如果以上問題解決了，我想這個過程還是很愉快的。只想吐槽一下學習不容易啊。接下來主要的內容就是學習，同時學習ionic與react-native其實就是表層在同時在學習angular與react，至於深層次的我還不懂，暫時也不必細節。學知識，我是先學會用，再學習爲什麼要這麼用，你呢？交流很關鍵，總結很重要。不是隨時都有時間來重新學習，珍惜眼下充裕的時間，學習，學習，學習。