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

【问题标题】：Could not connect to React Native development server on Android无法连接到 Android 上的 React Native 开发服务器
【发布时间】：2017-02-06 09:26:38
【问题描述】：

当我运行react-native run-android 时，它给了我以下错误：

无法连接到开发服务器

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

如何解决这个错误？

【问题讨论】：

你看stackoverflow.com/questions/38835931/…了吗？他用 android 4.4.2 运行adb reverse
但你可能不得不选择facebook.github.io/react-native/docs/…
在本地机器上运行 npm start 来启动开发服务器。我遇到了同样的问题，它像魔术一样对我有用
由于 react native 的变化如此频繁，包含 react native 版本也是有益的。似乎问题发生在不到 0.59
localhost:19001/debugger-ui 正在工作。回到 8081 浪费了很多时间——看起来这是在以后的版本中更新的。 React Native Debugger 也一直在寻找 8081，但是当您使用 ctrl-t / cmd-t 单击新选项卡时，它默认建议 19001。而不是使用 chrome 开发者工具，这似乎是一个更好的选择

标签： android react-native

【解决方案1】：

就我而言，问题在于 Android 安全策略。根据documentation：

从 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的问题不同，但相似。

【讨论】：

最好只用于调试。参考：stackoverflow.com/a/55147267/1489446
如果这不起作用，请查看stackoverflow.com/a/56744301/6740333，因为新的 react native 版本具有预定义的配置
@ErickM.Sprengel 你提到这应该只应用于调试。如果仅将其应用于 localhost 的主清单，会不会有任何问题？
它会允许不安全的纯文本http请求，如果你意识到这一点，我认为没有问题。我不确定某些 sdks 是否检查 NetworkSecurityPolicy.isCleartextTrafficPermitted()，但我认为这不是问题。
这对我有用的小米红米笔记 6 pro 最新的 android 更新日期。

【解决方案2】：

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

方法二：Wi-Fi连接

您还可以通过 Wi-Fi 连接到开发服务器。你会
首先需要使用 USB 数据线在您的设备上安装应用程序，但是
完成后，您可以按照这些操作进行无线调试
指示。您需要开发机器的当前 IP
继续之前的地址。

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

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

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

您会看到一个带有错误的红屏。 没关系。以下步骤将解决该问题。

打开应用内开发者菜单。

转到开发设置 → 调试设备的服务器主机。

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

返回“开发者”菜单并选择“重新加载 JS”。

【讨论】：

是的，我用的是Wi-Fi，手机和电脑在同一个WIFI网络。
你遵循这些命令了吗？你有没有机会快速截屏并上传为 gif 文件？
好吧，我只是想帮忙...您可以尝试使用react-native init myProject 开始一个新项目，看看您是否可以连接？这样我们就可以消除问题出在您的代码中的可能性。
以后，每当您在处理新的框架/工具时，如果遇到问题，请务必检查全新安装。将帮助您更快地找到问题并节省其他人的时间。祝你好运
@xerocompatible -- 您可以在命令提示符下点击adb shell input keyevent 82 以打开开发者菜单。

【解决方案3】：

运行它，它对我有用

adb reverse tcp:8081 tcp:8081

【讨论】：

来自 OP：“我的 android 版本是 4.4.4，所以我不能使用 adb reverse 命令。”
我的模拟器已连接，虽然它没有与捆绑器连接...这个命令对我有用
@Rajat 你必须在此之后重新启用它
它有效，但这是临时解决方案还是 adb 总是在这个模拟器中反向代理这个端口？
它是我的工作者/有时应用程序无法连接到 Metro。我不明白为什么。

【解决方案4】：

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

第一步：在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>

【讨论】：

【解决方案5】：

根据Network Security Configuration，这适用于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

所以，我尝试检查我的 react-native 应用程序的源代码。我发现在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（Linux 的检查来自ifconfig）是 192.168.29.96，所以我在 *** 中添加了上述行

然后，您需要为 Android 清理和重建！

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

我希望这对你有用。

【讨论】：

我今天花了 3 个小时试图弄清楚为什么我的 iOS 手机可以通过 USB 工作而 Android 不能，即使 Android 浏览器可以使用 IP:port 地址提取捆绑包。这就是解决方案。巨大的帮助！

【解决方案6】：

默认 Metro Builder 在端口 8081 上运行。但在我的 PC 中，此端口已被其他进程占用（McAfee Antivirus）所以我使用以下命令将metro builder的默认运行端口更改为端口号8088

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

这解决了我的问题，应用程序现在可以正常工作了。

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

【讨论】：

【解决方案7】：

以上解决方案都不适合我。

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

【讨论】：

非常感谢，在经历了所有可能的解决方案之后，这已经成功了，似乎物理设备想要连接到本地主机......我猜不使用模拟器的缺点。
这对我有用，如果其他人被卡住了！
对我不起作用。这就是我之前解决上述问题的方式，但现在还不够:((Android 10, RN 63.3)

【解决方案8】：

** Ubuntu 尝试仅在根文件夹中运行这些命令：

sudo npm start --- 这会在说 -- 加载图表，完成（类似这样）之后自动暂停；完成后 -打开另一个终端
react-native run-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**

【讨论】：

这将以发布模式而不是开发模式运行应用程序。

【解决方案9】：

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

ReactNative 版本是 0.61.2

【讨论】：

我没有debug/AndroidManifest.xml文件，应该加吗？
@HarryMoreno 它是自动创建并存储在/android/app/src/debug/AndroidManifest.xml下的
这也是为我做的
拯救了我的一天！谢谢

【解决方案10】：

我的解决方案是在 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

【讨论】：

【解决方案11】：

React-native 解决方案>V0.60

您还可以通过 Wi-Fi 连接到开发服务器。你会首先需要使用 USB 数据线在您的设备上安装应用程序，但是完成后，您可以按照以下步骤进行无线调试指示。您需要开发机器的当前 IP 继续之前的地址。

打开终端并输入ipconfig getifaddr en0 对于 MAC

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

您会看到一个带有错误的红屏。还行吧。以下步骤将解决此问题。

打开应用内开发者菜单。摇晃手机或按CMD/ctrl + M
点击设置
点击为设备调试服务器主机和端口
在弹出窗口中键入您机器的 IP 地址和本地开发服务器的端口（例如 10.0.1.1:8081）。
返回“开发者”菜单并选择“重新加载”。

完成

【讨论】：

开发者菜单没有设置

【解决方案12】：

解决问题的方法是打开 android studio，进入 AVD 管理器，操作 > 停止，然后立即冷启动。

设备启动后，照常运行react-native start 和react-native run-android。

【讨论】：

我不认为它会，但它奏效了。

【解决方案13】：

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

【讨论】：

你的开发设置在哪里？
摇动设备或者如果你使用苹果模拟器cmd+D，
摇动 iPhone --> 'configure bundler'

【解决方案14】：

要添加到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，因此请确保 TCP 在端口 8081 上打开。

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

您可以通过设备上的浏览器对其进行测试。在您的 PC 上运行打包程序时，从您的移动设备导航到 http://192.168.0.10:8081 并确保它可以正常工作。它将显示类似“Packager running”的内容。它显然会工作或失败。

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

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

【讨论】：

【解决方案15】：

我在 native 和 react-native pro 中也遇到过这个问题，我的解决方案是：

用npm start打开npm服务器
使用 Android Studio 运行原生项目
用adb reverse tcp:8081 tcp:8081传输网络请求
当您需要重新加载页面时，只需输入：adb shell input keyevent 82

保持秩序。

附：如果你运行了一个失败的项目，只需运行adb kill-server

【讨论】：

【解决方案16】：

发现 Android X 设备存在问题。

适用于 Android API 28 及更高版本

在 network_security_config.xml 中使用 cleartextTrafficPermitted="true"

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

然后，重新加载 JS

【讨论】：

我目前正在使用 React Native 0.63，并在添加自定义 network_security_config.xml 以使用代理拦截一些流量后遇到了这个问题。如果没有自定义配置，它似乎可以在模拟器 >API 28 上正常工作，但如果您添加自定义配置，您还需要在 localhost 上允许明文。

【解决方案17】：

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

首先在防火墙中创建规则。为此，请按照以下步骤操作：
- 打开运行对话框
- 输入wf.msc
- 点击入站规则
- 点击右侧的新规则
- 从弹出菜单中选择端口并点击下一步
- 选择tcp端口和特定的本地端口，输入端口号如8081（默认）
- 允许连接
- 在个人资料部分全选
- 给出一些适当的名称和描述
- 点击完成
您必须让您的电脑可以被外界访问，为此请按照以下步骤操作：
- 从控制面板打开网络和共享中心
- 更改适配器设置
- 选择您的 wifi 网络
- 右键单击，属性
- 点击分享标签
- 选中所有复选框

你很好，现在尝试运行 react-native run-android。

【讨论】：

【解决方案18】：

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

【讨论】：

【解决方案19】：

在尝试了所有最受好评的答案但未能成功后，我发现我的 Android 模拟器处于飞行模式。非常愚蠢，但发布此内容可以节省一些时间。

附：在此之前我的模拟器安全重启，这可能是我的模拟器在飞行模式下启动的原因

【讨论】：

【解决方案20】：

如果 adb reverse tcp:8081 tcp:8081 this dosent 工作，你可以重新启动你的电脑它会工作，因为你的服务仍在运行，这是我的工作

【讨论】：

【解决方案21】：

重启你的手机

这就是我所做的一切，应用程序捆绑成功。

【讨论】：

【解决方案22】：

我通过在我的 android 设备中设置本地开发服务器的 IP 地址解决了 Windows 上的问题。

【讨论】：

【解决方案23】：

出现此错误是因为您的 Android 虚拟设备未连接到开发服务器。因此，请检查您的 Android 虚拟设备是否已连接到互联网。您只需检查 WiFi 连接符号和移动数据符号即可。

【讨论】：

【解决方案24】：

对我来说，这发生在我使用 react-native run-android 从 Android Studio 而不是命令行构建时

【讨论】：

【解决方案25】：

这个问题在我身上已经发生过好几次了。它工作了一分钟，然后下一分钟它停止工作，我没有任何改变。错误中的第二个 IP 通常是 10.0.2.x 而不是 192.x。

我已经查看了所有答案，但无法解决问题。

最终，始终有效的一件事是返回 Android Studio，打开 AVD，然后选择有问题的模拟器。执行 Duplicate 以创建模拟器的另一个副本，然后一切都会再次神奇地工作。

所以我的猜测是模拟器文件夹中的某些内容已损坏。

【讨论】：

【解决方案26】：

这很可能是防火墙问题。如果有人使用 ubuntu 遇到这个问题，那么你可以使用

sudo service iptables stop

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

【讨论】：

【解决方案27】：

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

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

【讨论】：

【解决方案28】：

在我的情况下，我的模拟器有一个代理设置，关闭它后一切正常。

【讨论】：

如何关闭它？
@VikasSatpute 你用的是哪个模拟器？
Android 模拟器 - Pixel 3 Xl API：28:5554

【解决方案29】：

基本上这个错误是在 npm server 没有启动的时候出现的。

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

加载依赖图完成。

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

react-native run-android

【讨论】：

【解决方案30】：

对我来说，我已经卸载了我最近安装的一个包，并且该项目使用以下命令在我的物理设备上再次运行“npm uninstall recentPackageName”希望这会有所帮助:)

【讨论】：