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

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

无法连接到开发服务器

Error screen

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

如何修复此错误？

241138 次浏览
小开
最佳答案

文件: 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 地址。

  1. 确保你的笔记本电脑和手机使用同一个 Wi-Fi 网络。
  2. 在你的设备上打开你的本机应用程序。
  3. 您将看到一个带有错误 . 没关系的红色屏幕。
  4. 打开应用程序内开发人员菜单。
  5. 转到 Dev Settings → Debug server host for device。
  6. 输入计算机的 IP 地址和本地 dev 服务器的端口(例如10.0.1.1:8081)。
  7. 回到 Developer 菜单并选择 ReloadJS。
小开

如果你试图通过 wifi 在你的物理机器人设备上使用 windows 机器调试应用程序，那么设备可能无法访问你的个人电脑或笔记本电脑的端口，你必须让端口可访问。这包括两个步骤:

  1. 首先在防火墙中创建一个规则:

    • 打开运行对话框
    • 类型 wf.msc
    • 点击入站规则
    • 单击右侧的新规则
    • 从弹出菜单中选择端口，然后单击下一步
    • 选择 tcp port 和特定的本地端口并输入端口号，如 8081(默认)
    • 允许连接
    • 选择所有在配置文件部分
    • 给出一些适当的名称和描述
    • 点击完成

  2. 你必须让你的电脑对外开放，做到这一点需要遵循以下步骤:

    • 从控制面板开放网络和共享中心
    • 更改适配器设置
    • 选择你的无线网络
    • 右击，属性
    • 点击分享标签
    • 检查所有的复选框

你已经准备好了，现在尝试运行反应-本地运行-机器人。

小开

我们面临着这个问题，为了解决这个问题，解决方案非常简单如下。

  1. 通过 CTRL + C 取消当前的“反应-本机运行-机器人”进程 或 CMD + C
  2. 关闭打开的城市捆绑包窗口命令行 自然而然地。
  3. 再次运行命令，“ response-ativerun-android”。

基本上，这个错误告诉您当前的构建由于代码问题或依赖性问题等原因而失败。

请按此浏览详情

小开

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

sudo service iptables stop

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

小开

首先，我很感激你提出你的怀疑。 这主要是因为可能你的博览会或应用程序运行你的反应本地项目可能不在同一个本地连接的 wifi 或 LAN。 此外，还有一个机会，在您的连接中经常有干扰，由于它失去了它的连接。

我也面对这个问题，我个人清除缓存，然后重新启动和繁荣它重新启动完美。 我希望这对你也有用！

小开

要添加到 goldylucks的答案，您可以使用 IP 192.168.0.10，如果这是您的电脑的 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。

然后你可以跟随金运的答案，进入 Dev settings，输入 192.168.0.10:8081或任何你需要的 IP 地址。

您可以从设备上的浏览器测试它。当包装器在你的电脑上运行时，从你的移动设备导航到 http://192.168.0.10:8081，确保它能正常工作。它将显示类似“包装运行”的东西。它显然会工作或失败。

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

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

小开

运行这个，它为我工作

adb reverse tcp:8081 tcp:8081
小开

在我使用 Android 4.4.2的案例中，我不得不做一些额外的步骤: (确保 rn 服务器运行 npm 启动，删除 app-debug。Apk 来自 android/app/build/output/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
小开

在我的案例中，问题出在 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 中找到更多的解决方案。 OP 的问题是不同的，但是相似的。

小开

我遇到这个问题也在本地和反应本地亲，我的解决方案是:

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

保持秩序。

另外，如果你运行一个失败的项目，只要运行 adb kill-server

小开

Ubuntu 尝试只在根文件夹中运行以下命令:

  1. Sudo npm 开始 --这将自动暂停后说—— LoadingGraphs，done (类似这样的东西) ; 当这完成时 - 打开另一个终端

  2. 本地运行机器人

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

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**
小开

在我的例子中，我的模拟器有一个代理设置，在关闭它之后一切正常。

小开

我得到了同样的问题，解决了它删除 node module包，然后再次安装纱线。简单的一些改变，我们需要清除我们的。

小开

基本上，当 npm 服务器没有启动时，就会出现这个错误。

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

加载依赖关系图已完成。

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

react-native run-android
小开

从 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>
小开

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

小开

根据 网络安全配置，这适用于 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变体中，已经有一个网络安全配置(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 (从 ifconfig检查 linux)是192.168.29.96，所以我在 * * * 中添加了上面的行

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

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

我希望这对你有用。

小开

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

小开

对 MAC 来说最简单。通过 ipconfig getifaddr en0获取无线网络的 IP 地址。然后写这个 ip 到你的 DEV settings -> Debug server host & port for device加上 :8081 然后重新装弹，就这样

小开

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

ReactNativeversion 是0.61.2

小开

当我开始一个新项目的时候

react-native init MyPrroject

iOS和 Android两个站台都有 could not connect to development server。

我的解决办法是

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

还要确保使用本地 IP 地址

ipconfig getifaddr en0
小开

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

小开

默认的 Metro 构建器在端口8081上运行。 但是在我的电脑中，这个端口已经被其他进程占用了(McAfee 杀毒) 因此，我使用以下命令将 Metro Builder 的默认运行端口更改为端口号8088

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

这解决了我的问题，应用程序现在运行良好。

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

小开

在我的情况下，运行在 Macbook 上，我必须关闭防火墙，从而允许来自我的机器人的连接。RN v0.61.5

小开

对于我所做的一切，如上所述，但它仍然不工作，然后我按照下面的步骤和工作魅力

选择防火墙和网络保护 = > 关闭私有网络enter image description here

小开

以上的方法对我都不管用。

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

小开

发现了 Android X 设备的问题。

适用于 Android API 28及以上版本

在 network _ security _ config.xml 中，使用 cleartextTrafficPermit = “ true”

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

然后，重新装弹

小开

反应原生 >V0.60解决方案

你也可以通过 Wi-Fi 连接到开发服务器 首先需要安装应用程序在您的设备上使用 USB 电缆，但 一旦完成，你就可以通过下面的方法进行无线调试 你需要你的开发机器当前的 IP 地址 在进行程序前的地址。

打开一个终端并键入用于 MAC 的 ipconfig getifaddr en0

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

您将看到一个带有错误的红色屏幕。

  1. 打开应用程序内开发人员菜单。摇动手机或按 CMD/ctrl + M
  2. 点击设置
  3. 点击 调试服务器主机和设备端口
  4. 在弹出窗口中键入您的机器的 IP 地址和本地 dev 服务器的端口(例如10.0.1.1:8081)。
  5. 回到 Developer 菜单并选择 Reload。

搞定

小开

在尝试了所有最受欢迎的答案之后，我发现我的 Android 模拟器处于飞行模式。很傻，但发布这个可以节省一些时间。

另外，在此之前，我的模拟器安全地重启了，这可能就是我的模拟器以飞行模式启动的原因

小开

如果 adb 反向 tcp: 8081 tcp: 8081这个不工作，你可以重新启动你的计算机它将工作，因为你的服务仍然运行，这是从我的工作

小开

重启手机

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

小开

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

小开

发生此错误是因为您的 Android 虚拟设备未连接到开发服务器。因此，请检查您的 Android 虚拟设备是否连接到互联网。您可以通过简单地检查 WiFi 连接符号和移动数据符号来做到这一点。

enter image description here

小开

如果没有工作的所有这些答案的只是删除 node_modules/和 npm i --save

小开

对我来说，当我从 Android Studio 而不是使用 react-native run-android的命令行构建时，就会发生这种情况

小开

只需打开 cmd/powershell，然后在项目目录中运行以下命令

react-native start
小开

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

我已经找遍了所有的答案，但还是没能解决这个问题。

最后，有一件事一直是有效的，那就是回到 Android Studio，打开 AVD，然后选择有问题的模拟器。做一个副本来创建模拟器的另一个副本，然后一切都将神奇地再次工作。

我猜是模拟器文件夹里的东西被破坏了。

小开

解决我的问题是打开 android 工作室，进入 AVD 管理器，操作 > 停止，然后冷启动现在。

一旦设备启动，像往常一样运行 react-native start和 react-native run-android。

enter image description here

enter image description here

小开

Ifconfig

会给你你的 IP 地址

复制那个 IP 地址，看起来像 192.168.1.100

Cmd + M

将显示 android 的调试菜单

(如果它不工作，你可以一直使用 shell)

Adb shell 输入关键事件82

单击 选择捆绑位置并粘贴您的 IP 地址后面的端口8081是默认的..。 (应该看起来像这样)

192.168.1.100:8081

按 好的

小开

如果你正在使用 EXPO，它曾经连接过很多次，然后突然得到一个通用的错误“有些东西出错了”，没有进一步的提示，同时尝试了所有其他的东西，并且设置都很好，原因是你在设备上运行的 EXPO 不再与项目中的那个匹配，也许你正在运行一个旧的项目来提升或类似的(我最终得到了这个消息，一旦我尝试连接应用与直接连接从文档。

希望这能帮助别人避免腰围时间。


提交答案