在设备上运行
在向用户发布应用之前,最好始终在真机上测试应用。本文档将指导您完成在设备上运行 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 应用。
- 您将看到一个带有错误的红色屏幕。这没关系。以下步骤将解决该问题。
- 打开应用内开发菜单。
- 转到 Dev Settings → Debug server host & port for device。
- 输入您机器的 IP 地址和本地开发服务器的端口(例如
10.0.1.1:8081
)。 - 返回 开发菜单 并选择 Reload 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 应用。
- 您将看到一个带有错误的红色屏幕。这没关系。以下步骤将解决该问题。
- 打开应用内开发菜单。
- 转到 Dev Settings → Debug server host & port for device。
- 输入您机器的 IP 地址和本地开发服务器的端口(例如
10.0.1.1:8081
)。 - 返回 开发菜单 并选择 Reload 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
。这是 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 调试桥)。
$ 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 应用。
- 您将看到一个带有错误的红色屏幕。这没关系。以下步骤将解决该问题。
- 打开应用内开发菜单。
- 转到 Dev Settings → Debug server host & port for device。
- 输入您机器的 IP 地址和本地开发服务器的端口(例如
10.0.1.1:8081
)。 - 返回 开发菜单 并选择 Reload 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 工具栏中,并且它也会出现在 Devices 窗格中 (Shift ⇧ + Cmd ⌘ + 2)。您现在可以按 Build and run 按钮 (Cmd ⌘ + R) 或从 Product 菜单中选择 Run。您的应用将很快在您的设备上启动。
如果您遇到任何问题,请查看 Apple 的 Launching Your App on a Device 文档。
连接到开发服务器
您还可以使用开发服务器在设备上快速迭代。您只需要与您的计算机在同一个 Wi-Fi 网络上即可。摇动您的设备以打开 开发菜单,然后启用快速刷新。您的应用将在您的 JavaScript 代码更改时重新加载。
故障排除
如果您有任何问题,请确保您的 Mac 和设备在同一网络上并且可以相互访问。许多带有强制门户的开放无线网络被配置为阻止设备访问网络上的其他设备。在这种情况下,您可以使用设备的个人热点功能。您还可以通过 USB 将 Mac 的互联网(Wi-Fi/以太网)连接共享到您的设备,并通过此隧道连接到 bundler 以获得非常高的传输速度。
当尝试连接到开发服务器时,您可能会收到一个带有错误的红色屏幕,显示
连接到
http://localhost:8081/debugger-proxy?role=client
超时。您是否正在运行 node proxy?如果您在设备上运行,请检查您是否在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 客户端应用运行您的应用。