手把手教你在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的這些的均可以忽略了）

 

注：（這些工做要準備好否則最後出錯就好坑了）

 

上面兩張圖都提示咱們須要安裝Node.js,打開連接下載Node.js進行安裝（傻瓜式安裝）。在這裏下載最新的。

 

2.開始

打開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~~~

以上有誤，請你們諒解和糾正。