在设备上运行
在向用户发布应用之前,在实际设备上测试应用始终是个好主意。本文档将指导你完成在设备上运行 React Native 应用并使其投入生产所需的步骤。
如果你使用 create-expo-app
设置项目,可以通过扫描运行 npm start
时显示的二维码,在 Expo Go 中在设备上运行你的应用。有关更多信息,请参阅 Expo 指南中的在设备上运行你的项目。
- Android
- iOS
在 Android 设备上运行你的应用
开发操作系统
- macOS
- Windows
- Linux
1. 通过 USB 启用调试
默认情况下,大多数 Android 设备只能安装和运行从 Google Play 下载的应用。在开发过程中,你需要在设备上启用 USB 调试才能安装你的应用。
若要在设备上启用 USB 调试,首先需要通过前往 设置 → 关于手机 → 软件信息,然后连续七次点击底部的 版本号
行来启用“开发者选项”菜单。然后你可以返回 设置 → 开发者选项 启用“USB 调试”。
2. 通过 USB 连接设备
现在让我们设置一个 Android 设备来运行我们的 React Native 项目。请将你的设备通过 USB 连接到你的开发机器。
现在,通过运行 adb devices
命令检查你的设备是否正确连接到 ADB(Android 调试桥)。
$ adb devices
List of devices attached
emulator-5554 offline # Google emulator
14ed2fcc device # Physical device
在右侧列看到 `device` 表示设备已连接。你必须一次只连接一个设备。
如果你在列表中看到 `unauthorized`,你需要运行 `adb reverse tcp:8081 tcp:8081` 并在设备上按下允许 USB 调试。
3. 运行你的应用
在项目的根目录中;在你的命令提示符中输入以下内容,以在设备上安装并启动你的应用
- npm
- Yarn
npm run android
yarn 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
你现在可以从开发菜单中启用快速刷新。每当你的 JavaScript 代码更改时,你的应用都会重新加载。
方法 2:通过 Wi-Fi 连接
你也可以通过 Wi-Fi 连接到开发服务器。首先你需要使用 USB 线缆在设备上安装应用,但一旦完成,你就可以按照这些说明进行无线调试。在继续之前,你需要知道开发机器的当前 IP 地址。
你可以在 系统设置(或系统偏好设置) → 网络 中找到 IP 地址。
- 确保你的笔记本电脑和手机连接到同一个 Wi-Fi 网络。
- 在你的设备上打开 React Native 应用。
- 你会看到一个带有错误的红屏。这没关系。以下步骤将修复它。
- 打开应用内开发菜单。
- 前往 开发设置 → 设备调试服务器主机和端口。
- 输入你的机器的 IP 地址和本地开发服务器的端口(例如 `10.0.1.1:8081`)。
- 返回 开发菜单 并选择 重新加载 JS。
你现在可以从开发菜单中启用快速刷新。每当你的 JavaScript 代码更改时,你的应用都会重新加载。
为生产环境构建你的应用
你已经使用 React Native 构建了一个很棒的应用,现在你迫不及待地想在 Play 商店发布它。这个过程与任何其他原生 Android 应用相同,但需要考虑一些额外因素。请遵循生成签名 APK 的指南以了解更多信息。
1. 通过 USB 启用调试
默认情况下,大多数 Android 设备只能安装和运行从 Google Play 下载的应用。在开发过程中,你需要在设备上启用 USB 调试才能安装你的应用。
若要在设备上启用 USB 调试,首先需要通过前往 设置 → 关于手机 → 软件信息,然后连续七次点击底部的 版本号
行来启用“开发者选项”菜单。然后你可以返回 设置 → 开发者选项 启用“USB 调试”。
2. 通过 USB 连接设备
现在让我们设置一个 Android 设备来运行我们的 React Native 项目。请将你的设备通过 USB 连接到你的开发机器。
现在,通过运行 adb devices
命令检查你的设备是否正确连接到 ADB(Android 调试桥)。
$ adb devices
List of devices attached
emulator-5554 offline # Google emulator
14ed2fcc device # Physical device
在右侧列看到 `device` 表示设备已连接。你必须一次只连接一个设备。
3. 运行你的应用
在项目的根目录中,在你的命令提示符中运行以下内容,以在设备上安装并启动你的应用
- npm
- Yarn
npm run android
yarn android
提示:你还可以使用 `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
你现在可以从开发菜单中启用快速刷新。每当你的 JavaScript 代码更改时,你的应用都会重新加载。
方法 2:通过 Wi-Fi 连接
你也可以通过 Wi-Fi 连接到开发服务器。首先你需要使用 USB 线缆在设备上安装应用,但一旦完成,你就可以按照这些说明进行无线调试。在继续之前,你需要知道开发机器的当前 IP 地址。
打开命令提示符并输入 `ipconfig` 以查找你的机器的 IP 地址(更多信息)。
- 确保你的笔记本电脑和手机连接到同一个 Wi-Fi 网络。
- 在你的设备上打开 React Native 应用。
- 你会看到一个带有错误的红屏。这没关系。以下步骤将修复它。
- 打开应用内开发菜单。
- 前往 开发设置 → 设备调试服务器主机和端口。
- 输入你的机器的 IP 地址和本地开发服务器的端口(例如 `10.0.1.1:8081`)。
- 返回 开发菜单 并选择 重新加载 JS。
你现在可以从开发菜单中启用快速刷新。每当你的 JavaScript 代码更改时,你的应用都会重新加载。
为生产环境构建你的应用
你已经使用 React Native 构建了一个很棒的应用,现在你迫不及待地想在 Play 商店发布它。这个过程与任何其他原生 Android 应用相同,但需要考虑一些额外因素。请遵循生成签名 APK 的指南以了解更多信息。
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`。这是摩托罗拉的标识符。
你需要将其输入到你的 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 调试桥)。
$ adb devices
List of devices attached
emulator-5554 offline # Google emulator
14ed2fcc device # Physical device
在右侧列看到 `device` 表示设备已连接。你必须一次只连接一个设备。
3. 运行你的应用
在项目的根目录中,在你的命令提示符中输入以下内容,以在设备上安装并启动你的应用
- npm
- Yarn
npm run android
yarn 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
你现在可以从开发菜单中启用快速刷新。每当你的 JavaScript 代码更改时,你的应用都会重新加载。
方法 2:通过 Wi-Fi 连接
你也可以通过 Wi-Fi 连接到开发服务器。首先你需要使用 USB 线缆在设备上安装应用,但一旦完成,你就可以按照这些说明进行无线调试。在继续之前,你需要知道开发机器的当前 IP 地址。
打开终端并输入 `/sbin/ifconfig` 以查找你的机器的 IP 地址。
- 确保你的笔记本电脑和手机连接到同一个 Wi-Fi 网络。
- 在你的设备上打开 React Native 应用。
- 你会看到一个带有错误的红屏。这没关系。以下步骤将修复它。
- 打开应用内开发菜单。
- 前往 开发设置 → 设备调试服务器主机和端口。
- 输入你的机器的 IP 地址和本地开发服务器的端口(例如 `10.0.1.1:8081`)。
- 返回 开发菜单 并选择 重新加载 JS。
你现在可以从开发菜单中启用快速刷新。每当你的 JavaScript 代码更改时,你的应用都会重新加载。
为生产环境构建你的应用
你已经使用 React Native 构建了一个很棒的应用,现在你迫不及待地想在 Play 商店发布它。这个过程与任何其他原生 Android 应用相同,但需要考虑一些额外因素。请遵循生成签名 APK 的指南以了解更多信息。
在 iOS 设备上运行你的应用
开发操作系统
- macOS
- Windows
- Linux
1. 通过 USB 连接设备
使用 USB 转 Lightning 或 USB-C 线缆将你的 iOS 设备连接到你的 Mac。导航到项目中的 `ios` 文件夹,然后打开其中的 `.xcodeproj` 文件,如果你使用 CocoaPods,则打开 `.xcworkspace`,使用 Xcode 进行操作。
如果这是你第一次在 iOS 设备上运行应用,你可能需要注册你的设备以进行开发。从 Xcode 的菜单栏中打开 Product 菜单,然后转到 Destination。从列表中查找并选择你的设备。Xcode 将随后注册你的设备以进行开发。
2. 配置代码签名
如果你还没有 Apple 开发者账户,请注册一个。
在 Xcode 项目导航器中选择你的项目,然后选择你的主目标(它应该与你的项目同名)。查找“General”选项卡。转到“Signing”,并确保在 Team 下拉菜单中选择了你的 Apple 开发者账户或团队。对测试目标(它以 Tests 结尾,位于你的主目标下方)执行相同的操作。
在你的项目中为 Tests 目标重复此步骤。
3. 构建并运行你的应用
如果一切设置正确,你的设备将作为构建目标列在 Xcode 工具栏中,并且也会出现在设备窗格(Shift ⇧ + Cmd ⌘ + 2)中。你现在可以按下 构建并运行 按钮(Cmd ⌘ + R)或从 Product 菜单中选择 Run。你的应用很快就会在你的设备上启动。
如果你遇到任何问题,请查阅 Apple 的 在设备上启动你的应用 文档。
连接到开发服务器
你也可以使用开发服务器在设备上快速迭代。你只需要与你的计算机处于同一个 Wi-Fi 网络中。摇晃你的设备以打开开发菜单,然后启用快速刷新。每当你的 JavaScript 代码更改时,你的应用都会重新加载。
故障排除
如果你遇到任何问题,请确保你的 Mac 和设备处于同一网络并可以互相访问。许多带有强制门户的开放无线网络配置为阻止设备访问网络上的其他设备。在这种情况下,你可以使用设备的个人热点功能。你也可以通过 USB 从 Mac 共享你的互联网(Wi-Fi/以太网)连接到你的设备,并通过此隧道连接到打包器以获得非常高的传输速度。
尝试连接到开发服务器时,你可能会看到一个带有错误的红屏,显示
连接到 `http://localhost:8081/debugger-proxy?role=client` 超时。你是否正在运行节点代理?如果你正在设备上运行,请检查 `RCTWebSocketExecutor.m` 中是否有正确的 IP 地址。
要解决此问题,请检查以下几点。
1. Wi-Fi 网络。
确保你的笔记本电脑和手机连接到同一个 Wi-Fi 网络。
2. IP 地址
确保构建脚本正确检测到你机器的 IP 地址(例如 `10.0.1.123`)。
打开 Report navigator 选项卡,选择最新的 Build 并搜索 `IP=` 后跟一个 IP 地址。嵌入到应用中的 IP 地址应与你的机器的 IP 地址匹配。
为生产环境构建你的应用
你已经使用 React Native 构建了一个很棒的应用,现在你迫不及待地想在 App Store 发布它。这个过程与任何其他原生 iOS 应用相同,但需要考虑一些额外因素。请遵循发布到 Apple App Store 的指南以了解更多信息。
构建 iOS 应用需要 Mac。另外,你可以参考我们的环境设置指南,了解如何使用 Expo CLI 构建你的应用,这将允许你使用 Expo 客户端应用运行你的应用。
构建 iOS 应用需要 Mac。另外,你可以参考我们的环境设置指南,了解如何使用 Expo CLI 构建你的应用,这将允许你使用 Expo 客户端应用运行你的应用。