跳到主要內容

在裝置上執行

在發佈應用程式給使用者之前，最好先在實際裝置上測試應用程式。本文將引導您完成在裝置上執行 React Native 應用程式並為生產環境做好準備的必要步驟。

資訊

如果您使用 create-expo-app 設定專案，您可以透過掃描執行 npm start 時顯示的 QR code，在 Expo Go 中於裝置上執行您的應用程式。請參閱 Expo 指南，以瞭解更多關於在您的裝置上執行專案的資訊。

在 Android 裝置上執行應用程式​

開發作業系統​

1. 啟用 USB 偵錯​

大多數 Android 裝置預設只能安裝和執行從 Google Play 下載的應用程式。您需要在裝置上啟用 USB 偵錯，才能在開發期間安裝您的應用程式。

若要在裝置上啟用 USB 偵錯，您首先需要啟用「開發人員選項」選單，方法是前往設定 → 關於手機 → 軟體資訊，然後在底部點擊 Build number 列七次。然後，您可以回到設定 → 開發人員選項以啟用「USB 偵錯」。

2. 透過 USB 連接裝置​

現在讓我們設定 Android 裝置以執行我們的 React Native 專案。繼續透過 USB 將您的裝置插入您的開發機器。

接下來，使用 lsusb 檢查製造商代碼（在 mac 上，您必須先安裝 lsusb）。lsusb 應輸出類似如下的內容

bash
$ lsusb
Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 001 Device 003: ID 22b8:2e76 Motorola PCS
Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub

這些行代表目前連接到您機器的 USB 裝置。

您需要代表您手機的那一行。如果您有疑問，請嘗試拔下手機並再次執行命令

bash
$ lsusb
Bus 002 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub

您會看到在移除手機後，具有手機型號（在本例中為「Motorola PCS」）的那一行從列表中消失了。這是我們關心的那一行。

Bus 001 Device 003: ID 22b8:2e76 Motorola PCS

從上面的行中，您需要抓取裝置 ID 的前四位數字

22b8:2e76

在本例中，它是 22b8。這是 Motorola 的識別碼。

您需要將其輸入到您的 udev 規則中才能啟動並執行

shell
echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"' | sudo tee /etc/udev/rules.d/51-android-usb.rules

請確保將 22b8 替換為您在上述命令中取得的識別碼。

現在檢查您的裝置是否正確連接到 ADB (Android Debug Bridge)，方法是執行 adb devices。

shell
$ adb devices
List of devices attached
emulator-5554 offline   # Google emulator
14ed2fcc device         # Physical device

在右欄中看到 device 表示裝置已連線。您一次必須僅連接一個裝置。

3. 執行您的應用程式​

從您的專案根目錄，在命令提示字元中輸入以下內容，以在裝置上安裝並啟動您的應用程式

shell
npm run android

如果您收到「bridge configuration isn't available」錯誤，請參閱使用 adb reverse。

提示：您也可以使用 React Native CLI 來產生和執行 release 建置版本（例如，從您的專案根目錄：yarn android --mode release）。

連線到開發伺服器

您也可以透過連線到在您的開發機器上執行的開發伺服器，在裝置上快速迭代。根據您是否可以使用 USB 連接線或 Wi-Fi 網路，有幾種方法可以完成此操作。

如果您的裝置執行的是 Android 5.0 (Lollipop) 或更新版本，並且已啟用 USB 偵錯，並且透過 USB 連接到您的開發機器，則可以使用此方法。

在命令提示字元中執行以下命令

shell
$ adb -s <device name> reverse tcp:8081 tcp:8081

若要尋找裝置名稱，請執行以下 adb 命令

shell
$ adb devices

您現在可以從開發人員選單啟用快速刷新。每當您的 JavaScript 程式碼變更時，您的應用程式就會重新載入。

方法 2：透過 Wi-Fi 連線​

您也可以透過 Wi-Fi 連線到開發伺服器。您首先需要使用 USB 連接線在裝置上安裝應用程式，但是一旦完成，您可以按照這些指示無線除錯。在繼續之前，您需要您的開發機器的目前 IP 位址。

開啟終端機並輸入 /sbin/ifconfig 以尋找您機器的 IP 位址。

  1. 請確保您的筆記型電腦和手機位於相同的 Wi-Fi 網路。
  2. 在您的裝置上開啟您的 React Native 應用程式。
  3. 您會看到一個帶有錯誤訊息的紅色畫面。這沒關係。以下步驟將修復該問題。
  4. 開啟應用程式內的開發人員選單。
  5. 前往 Dev Settings → Debug server host & port for device。
  6. 輸入您機器的 IP 位址和本機開發伺服器的連接埠（例如 10.0.1.1:8081）。
  7. 回到開發人員選單並選取Reload JS。

您現在可以從開發人員選單啟用快速刷新。每當您的 JavaScript 程式碼變更時，您的應用程式就會重新載入。

為生產環境建置您的應用程式​

您已經使用 React Native 建置了一個很棒的應用程式，現在渴望在 Play 商店中發佈它。該過程與任何其他原生 Android 應用程式相同，但需要考慮一些額外的注意事項。請遵循產生簽名 APK 的指南以瞭解更多資訊。