Running On Device

需要本机代码的项目

此页面仅适用于react-native init使用Create React Native App 制作或使用此类应用程序弹出的项目。有关弹出的更多信息，请参阅创建React Native App存储库的指南。

在向用户发布应用程序之前，先在实际设备上测试您的应用程序总是一个好主意。本文档将指导您完成在设备上运行React Native应用程序并准备好进行生产的必要步骤。

如果您使用Create React Native App创建项目，则可以通过使用Expo应用扫描QR码来在设备上预览您的应用。为了在设备上构建和运行您的应用，您需要弹出并安装“入门指南”中的本机代码依赖关系。

Android

在iOS设备上运行您的应用

在Android设备上运行您的应用

Development OS: macOS(javascript:void(0%29;) Linux(javascript:void(0%29;) Windows(javascript:void(0%29;)

需要Mac才能构建iOS设备的应用程序。或者，您可以参考快速入门说明，了解如何使用Create React Native App创建应用程序，该应用程序可让您使用Expo客户端应用程序运行您的应用程序。

1.通过USB插入设备

使用USB to Lightning电缆将您的iOS设备连接到Mac。导航到ios项目中的文件夹，然后.xcodeproj使用Xcode在其中打开文件。

如果这是您第一次在iOS设备上运行应用程序，则可能需要注册您的设备以进行开发。从Xcode的菜单栏打开产品菜单，然后转到目的地。从列表中查找并选择您的设备。然后Xcode将注册您的设备进行开发。

2.配置代码签名

如果您还没有Apple帐户，请注册一个Apple开发者帐户。

在Xcode Project Navigator中选择您的项目，然后选择您的主目标（它应该与您的项目共享同一个名称）。寻找“常规”标签。转到“签名”并确保您的Apple开发者帐户或团队在团队下拉列表中被选中。

对您的项目中的测试目标重复此步骤。

3.构建并运行你的应用程序

如果一切设置正确，您的设备将被列为Xcode工具栏中的构建目标，并且它也会出现在“设备”窗格（⇧⌘2）中。您现在可以按Build并运行按钮（⌘R）或从Product菜单中选择Run。您的应用很快就会在您的设备上启动。

如果遇到任何问题，请查看Apple 在设备上启动您的应用程序文档。

1.启用USB调试

默认情况下，大多数Android设备只能安装并运行从Google Play下载的应用。您需要在设备上启用USB调试才能在开发过程中安装您的应用程序。

要在设备上启用USB调试，首先需要启用“开发人员选项”菜单，方法是转到设置 → 关于电话，然后点击Build number底部的行七次。然后，您可以返回到设置 → 开发人员选项以启用“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（Android调试桥）adb devices。

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

看到device右栏指示设备已连接。您一次只能连接一台设备。

3.运行你的应用程序

在命令提示符处键入以下内容以在设备上安装并启动您的应用程序：

$ react-native run-android

如果出现“网桥配置不可用”错误，请参阅使用adb反向。提示您还可以使用该工具React Native CLI生成并运行Release构建（例如react-native run-android --variant=release）。

连接到开发服务器

您还可以使用开发服务器在设备上快速迭代。您只需与计算机位于同一Wi-Fi网络上即可。摇动您的设备以打开Developer菜单，然后启用Live Reload。只要您的JavaScript代码发生变化，您的应用就会重新加载。

故障排除

如果您有任何问题，请确保您的Mac和设备位于同一网络上，并且可以互相访问。许多具有强制门户的开放无线网络被配置为防止设备到达网络上的其他设备。在这种情况下，您可以使用设备的个人热点功能。

当试图连接到开发服务器时，您可能会看到一个红色的屏幕，并显示错误消息：

连接到http：// localhost：8081 / debugger-proxy？role = client超时。你正在运行节点代理吗？如果您正在设备上运行，请检查您是否拥有正确的IP地址RCTWebSocketExecutor.m。

要解决此问题，请检查以下几点。

1. Wi-Fi网络。

确保您的笔记本电脑和手机在同一个 Wi-Fi网络上。

2. IP地址

确保构建脚本正确检测到您的机器的IP地址（例如10.0.1.123）。

打开Report navigator选项卡，选择上一个Build并搜索xip.io。嵌入到应用程序中的IP地址应与您的计算机IP地址和域名.xip.io（例如10.0.1.123.xip.io）匹配

3.网络/路由器配置

React Native使用通配符DNS服务xip.io来访问您的设备。某些路由器具有安全功能，可防止DNS服务器解析本地IP范围内的任何内容。

现在检查您是否能够通过运行来解析xip.io地址nslookup。

$ nslookup 10.0.1.123.xip.io

如果它无法解析您的本地IP地址，则xip.io服务可能关闭，或者更有可能您的路由器阻止它。

要在rooter后面仍然使用xip.io：

配置您的手机以使用Google DNS（8.8.8.8）

禁用路由器中的相应安全功能

连接到开发服务器

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

方法1：使用adb反向（推荐）

如果您的设备运行的是Android 5.0（Lollipop）或更新版本，它启用了USB调试，并且它通过USB连接到您的开发机器，则可以使用此方法。

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

$ adb reverse tcp:8081 tcp:8081

您现在可以从开发者菜单中启用实时重新加载。只要您的JavaScript代码发生变化，您的应用就会重新加载。

Method 2: Connect via Wi-Fi

您也可以通过Wi-Fi连接到开发服务器。您首先需要使用USB电缆将应用程序安装到设备上，但一旦完成，您可以按照这些说明进行无线调试。继续操作之前，您需要您的开发机器的当前IP地址。

您可以在系统偏好设置 → 网络中找到IP地址。

打开命令提示符并输入ipconfig查找您计算机的IP地址（更多信息）。

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

确保您的笔记本电脑和手机在同一个 Wi-Fi网络上。

在您的设备上打开您的React Native应用程序。

你会看到一个错误的红色屏幕。还行吧。以下步骤将解决这个问题。

打开应用内开发者菜单。

进入Dev Settings → Debug server host for device。

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

返回到Developer菜单并选择Reload JS。

您现在可以从开发者菜单中启用实时重新加载。只要您的JavaScript代码发生变化，您的应用就会重新加载。

Building your app for production

您已经使用React Native构建了一个优秀的应用程序，现在您很想在App Store中发布它。该过程与任何其他本机iOS应用程序相同，但需要考虑一些其他注意事项。

1.启用应用程序传输安全

应用传输安全性是iOS 9中引入的一项安全功能，可拒绝未通过HTTPS发送的所有HTTP请求。这可能会导致HTTP通信受阻，包括开发人员React Native服务器。localhost默认情况下，ATS 在React Native项目中处于禁用状态，以便于开发。

您应该重新启用ATS，然后才能通过localhost从文件夹中的文件NSExceptionDomains字典中删除条目来构建应用程序以进行制作。您还可以通过在Info窗格下打开目标属性并编辑App Transport安全设置条目，从Xcode中重新启用ATS。Info.plistios/

如果您的应用程序需要访问生产中的HTTP资源，请参阅此文章以了解如何在您的项目中配置ATS。

2.配置发布方案

构建App Store中的应用程序需要Release在Xcode中使用该方案。构建Release的应用程序将自动禁用应用内开发人员菜单，这将防止用户无意中访问生产中的菜单。它还会在本地捆绑JavaScript，因此您可以将该应用放在设备上并进行测试，而不是连接到计算机。

要使用该Release方案配置您的应用程序，请转到产品 → 方案 → 编辑方案。选择边栏中的运行选项卡，然后将生成配置下拉菜单设置为Release。

3.构建发布应用程序

您现在可以通过点击⌘B或从菜单栏中选择产品 → 构建来构建您的应用程序。一旦为发布而构建，您就可以将应用分发给beta测试人员，并将应用提交给App Store。

您也可以使用React Native CLI执行此操作使用--configuration值Release（例如react-native run-ios --configuration Release）的选项。

构建您的应用程序进行制作

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