跳到主要内容

在真机上运行

在将应用发布给用户之前,在实际设备上测试您的应用始终是一个好主意。本文档将指导您完成在设备上运行 React Native 应用并将其准备好投入生产所需的步骤。

提示

如果您使用 create-expo-app 设置了项目,您可以通过扫描运行 npm start 时显示的二维码,在 Expo Go 中的设备上运行您的应用。有关更多信息,请参阅 Expo 指南 在您的设备上运行项目

在 Android 设备上运行您的应用

开发操作系统

1. 启用 USB 调试

大多数 Android 设备默认只能安装和运行从 Google Play 下载的应用。您需要启用设备上的 USB 调试才能在开发期间安装您的应用。

要启用设备上的 USB 调试,您首先需要启用“开发者选项”菜单,方法是进入 设置关于手机软件信息,然后连续七次点击底部的 版本号 行。然后您可以返回 设置开发者选项 启用"USB 调试”。

2. 通过 USB 连接您的设备

现在让我们设置一个 Android 设备来运行我们的 React Native 项目。请通过 USB 将您的设备连接到开发机器。

接下来,使用 lsusb 检查制造商代码(在 mac 上,您必须首先 安装 lsusb)。lsusb 应该输出如下内容:

$ 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 设备。

您需要找到代表您手机的那一行。如果您不确定,尝试拔掉手机并再次运行命令:

$ 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 规则中才能正常运行:

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

确保您将 22b8 替换为您在上述命令中获得的标识符。

现在通过运行 adb devices 检查您的设备是否正确连接到 ADB(Android Debug Bridge)。

$ adb devices
List of devices attached
emulator-5554 offline # Google 模拟器
14ed2fcc device # 物理设备

在右列看到 device 意味着设备已连接。您一次必须只连接一个设备

3. 运行您的应用

从项目的根目录,在命令提示符中输入以下内容以在设备上安装并启动您的应用:

npm run android
备注

如果您收到"bridge configuration isn't available"错误,请参阅 使用 adb reverse

提示

您还可以使用 React Native CLI 生成并运行 release 构建(例如,从项目的根目录:yarn android --mode release)。

连接到开发服务器

您还可以通过连接到开发机器上运行的开发服务器在设备上快速迭代。根据您是否可以使用 USB 电缆或 Wi-Fi 网络,有几种方法可以实现这一点。

方法 1:使用 adb reverse(推荐)

如果您的设备运行的是 Android 5.0 (Lollipop) 或更高版本,已启用 USB 调试,并且通过 USB 连接到开发机器,则可以使用此方法。

在命令提示符中运行以下命令:

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

要查找设备名称,运行以下 adb 命令:

$ adb devices

您现在可以从 Dev Menu 启用 Fast Refresh。每当您的 JavaScript 代码发生变化时,您的应用都会重新加载。

方法 2:通过 Wi-Fi 连接

您也可以通过 Wi-Fi 连接到开发服务器。您首先需要使用 USB 电缆在设备上安装应用,但完成后您可以按照以下说明进行无线调试。在继续之前,您需要开发机器当前的 IP 地址。

打开终端并输入 /sbin/ifconfig 以查找您机器的 IP 地址。

  1. 确保您的笔记本电脑和手机在 同一个 Wi-Fi 网络上。
  2. 在设备上打开您的 React Native 应用。
  3. 您会看到一个 带有错误的红色屏幕。这没关系。以下步骤将解决这个问题。
  4. 打开应用内的 Dev Menu
  5. 进入 Dev SettingsDebug server host & port for device
  6. 输入您机器的 IP 地址和本地开发服务器的端口(例如 10.0.1.1:8081)。
  7. 返回 Dev Menu 并选择 Reload JS

您现在可以从 Dev Menu 启用 Fast Refresh。每当您的 JavaScript 代码发生变化时,您的应用都会重新加载。

构建生产环境的应用

你已经使用 React Native 构建了一个很棒的应用,现在渴望将其发布到 Play Store。该过程与任何其他原生 Android 应用相同,但有一些额外的注意事项需要考虑。请参阅 生成签名 APK 指南以了解更多。