Windows下搭建React Native Android開發環境詳解

最近看到React Native好像好厲害的樣子，好奇心驅使之下體驗了一下並將在Window下搭建React Natvie Android環境的步驟記錄下來，並有需要的朋友參考。（我都是參考官方文件的）

react-native的GitHub地址：https://github.com/facebook/react-native

react-native的文件地址：http://facebook.github.io/react-native/docs/getting-started.html

1.準備工作：

開啟文件點選’Android Setup’，可以看到需要

(a)安裝Git from Windows（傻瓜式安裝）

(b)Android SDK(配置ANDROID_HOME環境)

(c)使用Gradle構建的（如果你已經在使用Android Studio的這些的都可以忽略了）

注：（這些工作要準備好不然最後出錯就好坑了）

2.開始

上面兩張圖都提示我們需要安裝Node.js,開啟連結下載Node.js進行安裝（傻瓜式安裝）。在這裡下載最新的。

開啟cmd執行執行以下命令

$ npm install -g react-native-cli

$ react-native init AwesomeProject

上面這個命令下載AwsomeProject，如果下載不了可以在我的GitHub的AwesomeProject下載。

命令列線上下載的Awesome預設放到使用者資料夾下。

注： AwesomProject下的anroid下的local.properties檔案是沒有的，這裡我從其他專案直接copy過來。

接下來重新開啟一個cmd並切換到AwesomProject目錄

執行 npm start,會顯示如圖的提示，然後再輸入react-native start命令。如果顯示如圖那樣，證明你服務已經啟動了，在這裡我們可以看到服務的埠是8081.

我們在瀏覽器證明服務是否啟動：

在瀏覽器輸入地址：http://localhost:8081/index.android.bundle?platform=android

如果顯示下圖的那樣，那就證明服務已經啟動了。如果沒有啟動的話，接下來那就不用做啦~~~直接break吧

最後我們編譯執行AwesomeProject。有點激動了吧。。。。記得要先開啟Genymotin模擬器或者連上真機。

執行react-native run-android命令

如果顯示下圖，那就說明AwesomeProject專案編譯成功了。

最後就是這樣子的啦~~哈哈~~~（改過了index.android.js的效果）

真機需要網路需要在同一個區域網（開個WIFI熱點就可以了）

執行在真機上出現以下這種情況。。。怎麼辦

（這手機系統是5.0.1的）

在官方文件可以看到

執行adb reverse tcp:8081 tcp:8081命令

再點選RELOADJS~~~

以上有誤，請大家諒解和糾正。