Windows版本搭建安裝React Native環境配置

標籤：too   world   -o   width   native   tle   load   node   nsf   

• 安裝Java(配置JAVA_HOME)

這裡需要注意對環境變數的設定，可以根據java -version來檢測一下。

• 安裝SDK(配置ANDROID_HOME)

這裡需要注意設定環境變數ANDROID_HOME：Android SDK Manager的位置 例如：（ANDROID_HOME=> E:\Android\sdk）設定環境變數PATH：例如：（PATH=> %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools）。

• 安裝node

node.js輕量級的Web伺服器，想要是React Native跑起來需要安裝node， 如果沒有安裝node.js，先去官網安裝node.js,最好是4.1以上版本。通過node -v的命令來測試NodeJS是否安裝成功。

• 安裝git

安裝React-native需要用到git，如果沒有配置git，需要先下載對應的用戶端，然後將git加入path環境變數即可

• 全域安裝react-native命令列工具react-native-cli

npm install -g react-native-cli

安裝好之後，可以命令列下就有react-native命令了。

• 建立RN項目

進入你希望建立項目的目錄後，輸入react-native init HelloWorld，等待一段時間（較慢）。

• 運行package

在命令列中進入項目目錄，輸入react-native start，等待一段時間：

 

這時候可以用瀏覽器訪問http://localhost:8081/index.android.bundle?platform=android，如果可以訪問表示伺服器端已經可以了。

• 運行項目

輸入react-native run-android，等待運行(如果是第一次運行，首先會下載gradle解壓，時間較長)。

運行成功後出現

第一次手機肯定會報錯，這時候一定會被這刺眼的的紅給亮瞎，莫慌！！！

這時候我們搖一搖手機，點擊Dev Settings後，點擊Debug server host & port for device,設定IP和連接埠。“搖一搖”這個動作在模擬器可以用ctrl+M (Menu)來調出Dev setting菜單。

         

這裡的IP是電腦的IP，不知道的可以在命令列中輸入ipconfig進行查詢，連接埠號碼固定8081

設定完成後，回到空白頁面，再次搖一搖手機，選擇reload，程式就運行起來，出現Welcome to React Native！

•  遇到的坑

1. 在執行：react-native start 後，開啟網址：http://localhost:8081/index.android.bundle?platform=android ，會遇到錯誤TransformError失敗。

解決方案：

yarn remove babel-preset-react-nativeyarn add babel[email protected]

         2.模擬器調試ok，真機usb調試失敗，無法安裝app。此時手機應該與電腦處於同一區域網路下連接埠設定要相同(8081)，當然也可以自訂ip和連接埠 

react-native start --host 192.168.155.1 --port 8081

         3.Android Studio啟動app失敗，要下載相關聯的android-xx。

         4.build失敗，要注意Instant Run使用要注意的坑：Android Studio 2.0提供了熱修複偵錯模式，但是筆者在使用過過程中有很多Bug，比如阿里推送不支援這個新特性，導致每次Debug都會崩潰。在File->Settings->Instant Run將第一項的勾選取消

 

Windows版本搭建安裝React Native環境配置