Skip to main content
版本: Next

在设备上运行

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

如果使用 Expo 沙盒环境来建立工程,可以通过 Expo App 扫描 QR 代码在设备上预览 app。为了在设备上编译和运行 app,需要“弹出”(eject)并参照搭建开发环境文档搭建原生环境。

在 Android 设备上运行应用#

下文所指的设备包括 Android 手机和模拟器。

开发平台#

1. 开启 USB 调试#

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

首先,确定你已经打开设备的 USB 调试开关

2. 通过 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.

下面检查你的设备是否能正确连接到 ADB(Android Debug Bridge),使用adb devices命令:

$ adb devicesList of devices attachedemulator-5554 offline   # Google emulator14ed2fcc device         # Physical device

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

译注:如果你连接了多个设备(包含模拟器在内),后续的一些操作可能会失败。拔掉不需要的设备,或者关掉模拟器,确保 adb devices 的输出只有一个是连接状态。

3. 运行应用#

现在你可以运行下面的命令来在设备上安装并启动应用了。

$ npx react-native run-android

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

提示:你还可以运行npx react-native run-android --variant=release来安装 release 版的应用。当然你需要先配置好签名,且此时无法再开启开发者菜单。注意在 debug 和 release 版本间来回切换安装时可能会报错签名不匹配,此时需要先卸载前一个版本再尝试安装。

从设备上访问开发服务器

在启用开发服务器(官方名称 metro,但我们更常称之为 Packager)的情况下,你可以快速的迭代修改应用,然后在设备上立即查看结果。按照下面描述的任意一种方法来使你的设备可以访问到运行在电脑上的开发服务器。

译注:默认情况下模拟器可以自动探测宿主机 ip 并连接,只有 Android 5.0 以下版本的手机需要按下文说明来手动操作。但某些情形下可能也无法正常连接,请注意去讨论区查看是否有人遭遇同类型的问题(不同时期不同版本可能是不同的问题)。有些文章会提到react-native bundle命令,这个命令会把 js 文件打包内置到应用中,从而不需要连接 metro,但这并没有解决问题。我们在开发中必须使用到 metro,否则无法刷新代码。

(Android 5.0 及以上)使用 adb reverse 命令#

注意,这个选项只能在 5.0 以上版本(API 21+)的安卓设备上使用。

首先把你的设备通过 USB 数据线连接到电脑上,并开启 USB 调试(关于如何开启 USB 调试,参见上面的章节)。

  1. 运行adb reverse tcp:8081 tcp:8081
  2. 不需要更多配置,你就可以使用Reload JS和其它的开发选项了。

(Android 5.0 以下)通过 Wi-Fi 连接你的本地开发服务器#

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.

You can find the IP address in System PreferencesNetwork.

  1. 首先确保你的电脑和手机设备在同一个 Wi-Fi 环境下。
  2. 在设备上运行你的 React Native 应用。和打开其它 App 一样操作。
  3. 你应该会看到一个“红屏”错误提示。这是正常的,下面的步骤会解决这个报错。
  4. 摇晃设备,或者运行adb shell input keyevent 82,可以打开开发者菜单
  5. 点击Dev Settings -> Debug server host for device
  6. 输入你电脑的 IP 地址和端口号(譬如 10.0.1.1:8081)。在 Mac 上,你可以在系统设置/网络里找查询你的 IP 地址。在 Windows 上,打开命令提示符并输入ipconfig来查询你的 IP 地址。在 Linux 上你可以在终端中输入ifconfig来查询你的 IP 地址。
  7. 回到开发者菜单然后选择Reload JS

You can now enable Live reloading from the Developer menu. Your app will reload whenever your JavaScript code has changed.

为生产编译 app#

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.