无法连接到Android上的React Native开发服务器

运行时react-native run-android，出现以下错误：

无法连接到开发服务器

• 打包服务器正在运行，我可以从移动设备上的浏览器直接访问它。
• 我的Android设备已连接到计算机并启用了调试功能（我使用adb devices命令进行了检查）。
• 我的Android版本是4.4.4，所以我不能使用adb reverse命令。
• 我已经在开发设置中设置了ID地址和端口。
• USB调试已打开。
• 我使用Windows 7。

如何解决这个错误？

从文档中：http : //facebook.github.io/react-native/docs/running-on-device.html#method-2-connect-via-wi-fi

方法2：通过Wi-Fi连接

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

打开一个终端，然后输入/ sbin / ifconfig查找您机器的IP地址。

1. 确保您的笔记本电脑和手机位于同一Wi-Fi网络上。
2. 在设备上打开您的React Native应用程序。
3. 您会看到一个红色屏幕，并显示错误消息。这样就可以了。以下步骤将解决此问题。
4. 开启应用程式内开发人员选单。
5. 转到开发设置→调试设备的服务器主机。
6. 输入机器的IP地址和本地开发服务器的端口（例如10.0.1.1:8081）。
7. 返回到“开发人员”菜单，然后选择“重新加载JS”。

就我而言，问题出在Android安全策略上。根据文档：

从Android 9.0（API级别28）开始，默认情况下禁用明文支持。

但是应用程序尝试通过HTTP访问Metro Bundler，对吗？这就是为什么它不能。为了启用明文通信，请打开您的AndroidManifest.xml并添加android:usesCleartextTraffic="true"到<application>节点。

例如：

<application
    android:name="com.example.app"
    android:allowBackup="false"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme"
    android:usesCleartextTraffic="true">

您可以在此SO中找到更多解决方案：https : //stackoverflow.com/a/50834600/1673320。OP的问题不同，但相似。

运行这个对我有用

adb reverse tcp:8081 tcp:8081

从Android 9.0（API级别28）开始，默认情况下禁用明文支持。我们可以使用android：usesCleartextTraffic =“ true”起作用，但这不是推荐的解决方案。对于永久和建议的解决方法是如下：

步骤1：在android文件夹中创建文件 app/src/debug/res/xml/network_security_config.xml

第2步：将此添加到 network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <!-- deny cleartext traffic for React Native packager ips in release -->
  <domain-config cleartextTrafficPermitted="true">
   <domain includeSubdomains="true">localhost</domain>
   <domain includeSubdomains="true">10.0.2.2</domain>
   <domain includeSubdomains="true">10.0.3.2</domain>
  </domain-config>
</network-security-config>

步骤3：将配置应用于您的AndroidManifest.xml

<application
 android:networkSecurityConfig="@xml/network_security_config">
</application>

根据网络安全配置，这适用于Android 9.0+ 。好了，因此，在尝试了我在网上找到的所有可能的解决方案之后，我决定手动研究本机Android logcat。即使添加了android:usesCleartextTraffic="true"，我仍然在logcat中找到了它：

06-25 02:32:34.561 32001 32001 E unknown:ReactNative: Caused by: java.net.UnknownServiceException: CLEARTEXT communication to 192.168.29.96 not permitted by network security policy

因此，我尝试检查我的本机应用程序的来源。我发现在debug变体中，已经有一个由react-native家伙定义的network-security-config与该main变体冲突。

有一个简单的解决方案。转到<app-src>/android/app/src/debug/res/xml/react_native_config.xml 添加带有您自己的IP地址的新行，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">10.0.2.2</domain>
    <domain includeSubdomains="false">10.0.3.2</domain>
    ***<domain includeSubdomains="false">192.168.29.96</domain>***
  </domain-config>
</network-security-config>

由于我的计算机的本地IP（从ifconfigLinux进行检查）为192.168.29.96，因此我在***中添加了以上行

然后，您需要清理并重建Android版！

cd <app-src>/android
./gradlew clean
cd <app-src>
react-native run-android

希望这对您有用。

** Ubuntu尝试仅在您的根文件夹中同时运行以下命令：

1. sudo npm start ---这将在说完之后自动暂停-加载图形完成（类似这样）；完成后-打开另一个终端

2. react-native运行Android

如果问题仍然存在，请在android / ios中删除您的构建文件夹，然后执行此命令，然后以相同的顺序执行上述命令

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android**

我的解决方案是在android / app / src / debug中修改或制作新的AndroidManifest.xml：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
</manifest>

我正在使用React Native版本：0.61.5

默认都市构建器在端口8081上运行。但是在我的PC中，该端口已被其他进程占用（McAfee Antivirus），因此我使用以下命令将都市构建器的默认运行端口更改为端口号8088。

react-native run-android start --port=8088

这解决了我的问题，该应用现在可以正常运行。

PS：您可以使用“资源监视器”应用程序检查Windows中是否已占用端口。（在“网络”选项卡的“侦听端口”下）。查看此链接以获取详细说明：https : //www.paddingleft.com/2018/05/03/Find-process-listening-port-on-Windows/

我在本地和本地反应专家中也遇到了这个问题，我的解决方案是：

1. 用以下命令打开npm服务器 npm start
2. 使用Android Studio运行本机项目
3. 传输网络请求 adb reverse tcp:8081 tcp:8081
4. 当您需要重新加载页面时，只需输入： adb shell input keyevent 82

保持秩序。

PS如果您运行了失败的项目，请运行 adb kill-server

如果您尝试使用Windows机器通过wifi在物理android设备中调试应用，则该设备可能无法访问PC或笔记本电脑的端口，则必须使该端口可访问。这涉及两个步骤：

1. 首先在防火墙中创建一个规则。为此，请执行以下步骤：

   • 打开运行对话框
   • 类型 wf.msc
   • 点击入站规则
   • 点击右侧的新规则
   • 从弹出菜单中选择端口，然后单击下一步
   • 选择tcp端口和特定的本地端口，然后输入端口号，例如8081（默认）
   • 允许连接
   • 在个人资料部分中选择全部
   • 给出一些适当的名称和描述
   • 点击完成

2. 您必须使您的PC外部可访问，为此，请执行以下步骤：

   • 通过控制面板打开网络和共享中心
   • 更改适配器设置
   • 选择您的wifi网络
   • 右键单击，属性
   • 单击共享选项卡
   • 选中所有复选框

一切顺利，现在尝试运行react-native run-android。

对于MAC最简单。通过获取您的wifi网络的IP地址ipconfig getifaddr en0。然后将该ip写入您的DEV settings -> Debug server host & port for device添加:8081 示例。192.21.22.143:8081。然后重新加载。而已

我已添加 <uses-permission android:name="android.permission.INTERNET" />到debug/AndroidManifest.xml它，并且开始工作！我已经从中删除了它main/AndroidManifest.xml，却忘记添加调试了。

ReactNative版本是0.61.2

以上解决方案均不适用于我。

我只是通过单击打开开发菜单Ctrl+M，然后单击change bundle location并添加了我的机器IP和端口。

本机解决方案 >V0.60

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

打开一个终端并输入ipconfig getifaddr en0For MAC

确保您的笔记本电脑和手机位于同一Wi-Fi网络上。在设备上打开您的React Native应用程序。

您会看到一个红色屏幕，并显示一个错误。还行吧。以下步骤将解决此问题。

1. 开启应用程式内开发人员选单。摇动手机或按CMD/ctrl + M
2. 点击设置
3. 单击设备的调试服务器主机和端口
4. 在弹出窗口上，输入您机器的IP地址和本地开发服务器的端口（例如10.0.1.1:8081）。
5. 返回到“开发人员”菜单，然后选择“重新加载”。

完成

这很可能是防火墙问题。如果使用ubuntu的人遇到此问题，则可以使用

sudo service iptables stop

禁用防火墙以使端口可访问

首先，感谢您提出疑问。这主要是因为您的Expo或运行React Native项目的应用程序可能不在同一本地连接的wifi或LAN中。另外，您的连接中经常会由于断开连接而受到干扰。

我也面临这个问题，我个人清除了缓存，然后再次重新启动，然后重新启动就完美了。我希望这也对您有用！

要添加到goldylucks答案，可以使用IP 192.168.0.10（如果这是运行React Native打包程序的PC的IP）。

您可能还需要打开防火墙。

在Ubuntu 18.04中，您可以通过以下方式获取IP：

ip -c addr show

您将在其中看到IP，例如：（请inet 192.168.0.10/24 brd 192.168.0.255 scope global dynamic noprefixroute enp0s25注意我的示例中的192.168.0.10）。

然后，您可以在防火墙中打开端口8081，如下所示：

sudo ufw allow 8081

它将使用TCP，因此请确保在端口8081上打开了TCP。

然后，您可以按照goldylucks的回答并转到Dev settings并输入192.168.0.10:8081所需的IP。

您可以从设备上的浏览器进行测试。当打包程序从您的PC运行时，请http://192.168.0.10:8081从您的移动设备导航到并确保它可以运行。它将显示类似“ Packager running”的信息。显然它将工作或失败。

Goldylock的回答使我很兴奋，因为如果您对该错误消息有疑问，它可以很好地解决该问题。必须一直重建应用程序或更糟糕的是，从设备上删除APK，然后重新构建，这很糟糕。

因此，您可能应该将wifi用作开发策略的一部分。

在我使用Android 4.4.2的情况下，必须执行一些其他步骤：（确保rn服务器正在运行npm start，从android / app / build / outputs / apk中删除app-debug.apk，如果先前已安装并运行，则从android中卸载从根文件夹执行以下命令）

1_ create dir mkdir android/app/src/main/assets
2_ create file index.android.js which is a clone of index.js cp index.js index.android.js
3_ react-native link
4_ curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
5_ react-native run-android

就我而言，我的模拟器具有代理设置，将其关闭后一切正常。

基本上，当不启动npm服务器时会出现此错误。

因此，首先检查npm服务器状态，如果它没有运行，则使用命令启动npm，npm start您可以在终端中看到：

加载依赖图完成。

现在启动npm并使用命令在另一个终端中运行您的应用程序

react-native run-android

确保NPM服务器正在运行。否则再次运行。它将解决问题。

对我来说，我已经卸载了一个我最近安装的软件包，并且使用以下命令“ npm install

当我开始一个新项目时

react-native init MyPrroject

我有could not connect to development server两个平台上iOS和Android。

我的解决方案是

sudo lsof -i :8081
//find a PID of node
kill -9 <node_PID>

还要确保您使用本地IP地址

ipconfig getifaddr en0

我遇到了同样的问题，并通过删除node module软件包来解决它，然后再次安装yarn。简单地进行一些更改，我们需要清除我们的内容。

就我而言，在Macbook上运行，我必须关闭防火墙，从而允许来自Android的传入连接。RN v0.61.5

对于我来说，如上所述的所有工作仍然无法正常进行，然后我按照以下步骤进行操作，就像魅力一样

转到窗口安全=>选择防火墙和网络保护=>关闭专用网络

发现了Android X设备的问题。

适用于Android API 28及更高版本

在带有cleartextTrafficPermitted =“ true”的network_security_config.xml中

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    ....
  </domain-config>
</network-security-config>

然后，重新加载JS

我们面对这个问题，为了解决这个问题，解决方法很简单如下。

1. 通过CTRL + C或CMD + C取消当前的“ react-native run-android”进程
2. 关闭自动打开的Metro bundler窗口命令行。
3. 再次运行命令“ react-native run-android”。

基本上，此错误表明您的当前构建因代码问题或依赖项问题等原因而失败。

点击这里了解更多详情