[react-native]无法连接到android上的开发服务器

Question

当我运行"react-native run-android"时,它给了我错误:"无法连接到开发服务器......".

• 包服务器正在运行,我可以直接从移动设备中的浏览器访问它.
• 连接到计算机的我的android设备启用了调试,我使用adb devices命令检查了它.
• 我的Android版本是4.4.4所以我不能使用adb reverse命令.
• 我在Dev设置中设置了ip地址和端口.
• Usb调试已打开.
• 操作系统是windows7.

那么如何修复红色错误屏幕问题？任何建议表示赞赏!

在此输入图像描述

Answer 1

就我而言,问题在于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的问题不同,但相似.

Answer 2

来自Docs: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. 返回Developer菜单并选择Reload JS.

Answer 3

运行它,它对我有用

adb reverse tcp:8081 tcp:8081

Answer 4

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

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

Step 2 : add this <?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>

Step 3 : Apply the config to your AndroidManifest.xml 

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

Answer 5

默认 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/

Answer 6

根据网络安全配置，这适用于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

希望这对您有用。

Answer 7

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

Answer 8

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

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

Answer 9

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

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

2. react-native运行Android

如果问题仍然存在，请在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**

Answer 10

React-native 的解决方案>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. 返回开发者菜单并选择重新加载。

完毕