跳到主要内容
Version: Next

在设备上运行

在真机上仔细测试应用后再发布给用户总是不会错的。本文档将指导你通过必须的步骤在设备上运行 React Native 应用,为生产做准备。

tip

如果你使用 create-expo-app 来创建项目,可以通过 Expo Go 扫描运行 npm start 时显示的二维码来在设备上预览应用。更多信息请参阅 Expo 的在设备上运行项目指南。

在 Android 设备上运行应用

开发平台

1. 开启 USB 调试

在默认情况下 Android 设备只能从应用市场来安装应用。你需要开启 USB 调试才能自由安装开发版本的 APP。

要开启 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(Android Debug Bridge),使用adb devices命令:

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

在右边那列看到 device 说明你的设备已经被正确连接了。注意,你每次只应当连接一个设备

3. 运行应用

在项目根目录下运行以下命令来在设备上安装并启动应用:

npm run android
note

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

tip

你还可以使用 React Native CLI 来生成和运行 release 版本(例如在项目根目录下:yarn android --mode release)。

从设备上访问开发服务器

在启用开发服务器的情况下,你可以快速的迭代修改应用,然后在设备上立即查看结果。有多种方式可以实现,取决于你是否有 USB 数据线或 Wi-Fi 网络。

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

在命令行中运行:

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

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

$ adb devices

现在你可以从开发者菜单启用快速刷新。每当你的 JavaScript 代码发生更改,应用就会重新加载。

Method 2: Connect via Wi-Fi

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

打开终端并输入 /sbin/ifconfig 来查找你电脑的 IP 地址。

  1. 确保你的电脑和手机在同一个 Wi-Fi 网络中。
  2. 在设备上打开 React Native 应用。
  3. 你会看到一个红屏错误提示。这是正常的,下面的步骤会解决。
  4. 打开应用内的开发者菜单
  5. 前往 Dev SettingsDebug server host & port for device
  6. 输入你电脑的 IP 地址和端口号(例如 10.0.1.1:8081)。
  7. 回到开发者菜单然后选择 Reload JS

现在你可以从开发者菜单启用快速刷新。每当你的 JavaScript 代码发生更改,应用就会重新加载。

为生产编译应用

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