1. 程式人生 > >React Native開發學習筆記——WebStorm執行專案

React Native開發學習筆記——WebStorm執行專案

如何在webStorm上進行真機除錯?下邊以執行Android為例。ios有不同的地方。

  除錯分兩步:

  1. debug配置。
  2. 執行。

debug配置

  1. 點選Edit Configurations。
    步驟1
    2.點選圖中的“+”,在彈出的下拉選單中選擇“React Native”。來新增一個配置,配置的介面如下圖右半部分。
    新增debug配置
    3.編輯配置資訊。name 可以自己隨便填,比如Android、Ios。Platform選項:可選是Android、Ios。底部“+”,選擇“Run External tool”,配置 External Tools。
    填寫配置資訊
  2. 配置 External Tools。

    點選“+”,彈出下圖,填寫配置資訊。
    這裡寫圖片描述
    紅框1:填 “react-native”。
    紅框2:隨便填。
    紅款3:點選框後的“Insert Macro…”,在彈出的右側框中選“ProjectFileDir”,點“Insert”確認。然後點其他框的“OK”及“Apply”即可。

執行

點圖中藍框內綠色按鈕執行。

執行中可能遇到的問題

問題一

Could not install the app on the device, read the error above for details.

Make sure you have an Android emulator running or
a device connected and have set up your Android development environment: https://facebook.github.io/react-native/docs/android-setup.html

原因:

  1. 沒有安裝SDK。
  2. 沒有安裝Sdk23版本。
  3. 沒有配置或配置錯誤SDK的變數環境。

解決方案:

  1. 下載SDK。
  2. 在SDK Manager的SDK Platforms視窗中,選擇Show Package Details,然後在Android 6.0 (Marshmallow)中勾選Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
  3. 配置SDK環境變數。

注意:配置完成後,需要重啟電腦才能生效。

問題二

com.android.builder.testing.api.DeviceException: Could not create ADB Bridge.

原因:ADB Bridge建立失敗。
解決方法:1.埠被佔用,重啟電腦。2.重啟adb,執行:adb kill-server,adb start-server。