Skip to main content

在设备上运行

在将应用发布给用户之前，在实际设备上测试你的应用始终是一个好主意。本文档将指导你完成在设备上运行 React Native 应用并为其生产做好准备的必要步骤。

¥It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.

信息

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

¥If you used create-expo-app to set up your project, you can run your app on a device in Expo Go by scanning the QR code that is displayed when you run npm start. Refer to the Expo guide for running your project on your device for more information.

在 Android 设备上运行你的应用​

¥Running your app on Android devices

开发操作系统​

¥Development OS

1. 启用通过 USB 调试​

¥ Enable Debugging over USB

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

¥Most Android devices can only install and run apps downloaded from Google Play, by default. You will need to enable USB Debugging on your device in order to install your app during development.

要在设备上启用 USB 调试，你首先需要启用 "开发者选项" 菜单，方法是转至设置 → 关于手机 → 软件信息，然后点击底部的 Build number 行七次。然后你可以返回“设置”→“开发者选项”以启用 "USB 调试"。

¥To enable USB debugging on your device, you will first need to enable the "Developer options" menu by going to Settings → About phone → Software information and then tapping the Build number row at the bottom seven times. You can then go back to Settings → Developer options to enable "USB debugging".

2. 通过 USB 插入你的设备​

¥ Plug in your device via USB

现在让我们设置一个 Android 设备来运行我们的 React Native 项目。继续通过 USB 将你的设备插入你的开发机器。

¥Let's now set up an Android device to run our React Native projects. Go ahead and plug in your device via USB to your development machine.

接下来，使用 lsusb 检查制造商代码（在 mac 上，必须先使用 安装 lsusb）。lsusb 应该输出类似这样的内容：

¥Next, check the manufacturer code by using lsusb (on mac, you must first install lsusb). lsusb should output something like this:

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

¥These lines represent the USB devices currently connected to your machine.

你需要代表你的手机的线路。如果你有疑问，请尝试拔下手机并再次运行命令：

¥You want the line that represents your phone. If you're in doubt, try unplugging your phone and running the command again:

$ 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

你会看到，删除手机后，包含手机型号（本例中为 "摩托罗拉个人电脑"）的行从列表中消失。这是我们关心的线。

¥You'll see that after removing the phone, the line which has the phone model ("Motorola PCS" in this case) disappeared from the list. This is the line that we care about.

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

在上面的行中，你想要获取设备 ID 的前四位数字：

¥From the above line, you want to grab the first four digits from the device ID:

22b8:2e76

在本例中，它是 22b8。这是摩托罗拉的标识符。

¥In this case, it's 22b8. That's the identifier for Motorola.

你需要将其输入到你的 udev 规则中才能启动并运行：

¥You'll need to input this into your udev rules in order to get up and running:

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

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

¥Make sure that you replace 22b8 with the identifier you get in the above command.

现在，通过运行 adb devices 来检查你的设备是否正确连接到 ADB（Android 调试桥）。

¥Now check that your device is properly connecting to ADB, the Android Debug Bridge, by running adb devices.

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

在右栏中看到 device 表示设备已连接。你一次只能连接一台设备。

¥Seeing device in the right column means the device is connected. You must have only one device connected at a time.

3. 运行你的应用​

¥ Run your app

在项目的根目录中，在命令提示符中键入以下内容以在设备上安装并启动你的应用：

¥From the root of your project, type the following in your command prompt to install and launch your app on the device:

npm run android

如果你收到 "桥接配置不可用" 错误，请参阅 使用 adb 反向。

¥If you get a "bridge configuration isn't available" error, see Using adb reverse.

暗示：你还可以使用 React Native CLI 生成并运行 release 构建（例如，从项目的根目录：yarn android --mode release）。

¥Hint: You can also use the React Native CLI to generate and run a release build (e.g. from the root of your project: yarn android --mode release).

连接到开发服务器

你还可以通过连接到开发计算机上运行的开发服务器来在设备上快速迭代。有多种方法可以实现此目的，具体取决于你是否可以访问 USB 电缆或 Wi-Fi 网络。

¥You can also iterate quickly on a device by connecting to the development server running on your development machine. There are several ways of accomplishing this, depending on whether you have access to a USB cable or a Wi-Fi network.

¥Method 1: Using adb reverse (recommended)

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

¥You can use this method if your device is running Android 5.0 (Lollipop) or newer, it has USB debugging enabled, and it is connected via USB to your development machine.

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

¥Run the following in a command prompt:

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

要查找设备名称，请运行以下 adb 命令：

¥To find the device name, run the following adb command:

$ adb devices

你现在可以从 开发菜单 启用实时重新加载。只要你的 JavaScript 代码发生更改，你的应用就会重新加载。

¥You can now enable Live reloading from the Dev Menu. Your app will reload whenever your JavaScript code has changed.

方法 2：通过 Wi-Fi 连接​

¥Method 2: Connect via Wi-Fi

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

¥You can also connect to the development server over Wi-Fi. You'll first need to install the app on your device using a USB cable, but once that has been done you can debug wirelessly by following these instructions. You'll need your development machine's current IP address before proceeding.

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

¥Open a terminal and type /sbin/ifconfig to find your machine's IP address.

  1. 确保你的注意本电脑和手机处于同一 Wi-Fi 网络。

    ¥Make sure your laptop and your phone are on the same Wi-Fi network.

  2. 在你的设备上打开 React Native 应用。

    ¥Open your React Native app on your device.

  3. 你会看到 红屏并出现错误。还行吧。以下步骤将解决该问题。

    ¥You'll see a red screen with an error. This is OK. The following steps will fix that.

  4. 打开应用内的 开发菜单。

    ¥Open the in-app Dev Menu.

  5. 转到开发设置→设备的调试服务器主机和端口。

    ¥Go to Dev Settings → Debug server host & port for device.

  6. 输入你计算机的 IP 地址和本地开发服务器的端口（例如 10.0.1.1:8081）。

    ¥Type in your machine's IP address and the port of the local dev server (e.g. 10.0.1.1:8081).

  7. 返回开发菜单并选择重新加载 JS。

    ¥Go back to the Dev Menu and select Reload JS.

你现在可以从 开发菜单 启用实时重新加载。只要你的 JavaScript 代码发生更改，你的应用就会重新加载。

¥You can now enable Live reloading from the Dev Menu. Your app will reload whenever your JavaScript code has changed.

构建你的生产应用​

¥Building your app for production

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

¥You have built a great app using React Native, and you are now itching to release it in the Play Store. The process is the same as any other native Android app, with some additional considerations to take into account. Follow the guide for generating a signed APK to learn more.