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

时间：2017-02-06 09:26:38

标签： android react-native

当我运行“react-native run-android”时，它给了我错误：“无法连接到开发服务器......”。

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

那么如何修复红色错误屏幕问题？感谢任何建议！

enter image description here

36 个答案:

答案 0 :(得分：46)

就我而言，问题出在Android安全策略上。根据{{​​3}}：

  

从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">

您可以在此documentation中找到更多解决方案。 OP的问题不同，但相似。

答案 1 :(得分：35)

来自文件： 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.   
  2. 在您的设备上打开您的React Native应用。
    3.   
  3. 您会看到一个错误的红色屏幕。 这没关系。以下步骤将解决这个问题。
    4.   
  4. 打开应用内开发者菜单。
    5.   
  5. 转到开发设置→调试服务器主机以获取设备。
    6.   
  6. 键入计算机的IP地址和本地开发服务器的端口（例如10.0.1.1:8081）。
    7.   
  7. 返回Developer菜单并选择Reload JS。
    8.   

答案 2 :(得分：12)

运行它，它对我有用

adb reverse tcp:8081 tcp:8081

答案 3 :(得分：5)

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

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

  2. react-native run-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**

答案 4 :(得分：4)

默认都市生成器在端口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/

答案 5 :(得分：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>

答案 6 :(得分：3)

根据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

因此，我尝试检查我的本机应用程序的来源。我发现在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

我希望这对您有用。

答案 7 :(得分：2)

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

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

答案 8 :(得分：1)

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

  1. 首先在防火墙中创建规则。为此，请按照以下步骤操作：

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

  2. 您必须让您的电脑可以访问外部，为此，请按照以下步骤操作：

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

    3. 你很高兴，现在尝试运行react-native run-android。

答案 9 :(得分：1)

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

$('.proBox').fancybox({

  thumbs: {
    autoStart: true,
    axis: 'x'
  },
  idleTime: 0,
  buttons: [
    'info', 'close', 'thumbs'
  ],

  afterShow: function(instance, current) {

    var url = window.location.href;
    var cat = url.substring(url.lastIndexOf('#') + 1);
    var cats = cat.split('-');
    catId = cats[0];
    var toolbar = "<div id='tools'>" + $('#addscetion div').eq(this.index).html() + "</div>";
    var index = catId + $("[data-fancybox-index]").html();
    $('.fancybox-slide').children(".imagecontainer").remove();

    // This is the div content that I am appending
   $(".fancybox-slide").html('');
   $(".fancybox-slide").append(toolbar);
   $(".fancybox-slide").append($('#' + index).html());


  },
  caption: function(instance, obj) {
    return '<div><p class="fancy-nav"><a data-fancybox-prev title="Previous" tabindex="1">&lsaquo;</a> <a data-fancybox-next title="Next" tabindex="2">&rsaquo;</a> &nbsp; <span data-fancybox-index></span> of <span data-fancybox-count></span> images</p>' + $(this).find('.caption').html() + '</div>';
  },

  onInit: function(instance) {
    instance.$refs.container.on('touchstart', '[data-fancybox-info]', function(e) {
      e.stopPropagation();
      e.preventDefault();

      instance.$refs.container.toggleClass('fancybox-vertical-caption');
    });
    instance.$refs.container.on('mouseenter', '[data-fancybox-info]', function(e) {
      instance.$refs.container.addClass('fancybox-vertical-caption');
      instance.$refs.caption.one('mouseleave', function(e) {
        instance.$refs.container.removeClass('fancybox-vertical-caption');
      });

    });
    instance.$refs.container.on('click', '[data-fancybox-captionimg]', function(e) {
      $(".fancybox-image").attr("src", this.src);
    });
    instance.$refs.container.on('click', '[data-fancybox-captionbtn]', function(e) {
      $('.fancyRightCont').slideToggle('slow');
    });

  }

});

我正在使用React Native版本：0.61.5

答案 10 :(得分：1)

我假设您的系统中已安装adb。

您缺少的是：

仅在您的android设备与节点打包程序之间建立连接。

按照步骤进行。

1) Start adb server. For this run "adb start-server" command.

2) Then check the connected devices with "adb devices" command. It will give you devices list

3) Then make a connection with this command: "adb -s device_id_got_from_step_2 reverse tcp:8081 tcp:8081".

4) Then try the Hot reload (in iOS press Command+R in Android press Command+M).

5) If Hot reloading doesn't connects then restart the app with Android & Xcode IDE or command line like "react-native run android/ios".

答案 11 :(得分：1)

发现了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

答案 12 :(得分：1)

本机>V0.60的解决方案

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

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

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

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

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

完成

答案 13 :(得分：0)

尝试了所有最受好评的答案并无法使其正常工作后，我发现我的Android模拟器处于飞行模式。很愚蠢，但是发布它可以节省一些时间。

P.S。在此之前，我已经在模拟器上进行了安全重启，这可能是导致模拟器以飞行模式启动的原因

答案 14 :(得分：0)

如果adb反向tcp：8081 tcp：8081可以正常工作，则可以重新启动计算机以使其正常运行，因为您的服务器仍在运行，这对我很不利

答案 15 :(得分：0)

重启你的手机

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

答案 16 :(得分：0)

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

答案 17 :(得分：0)

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

enter image description here

答案 18 :(得分：0)

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

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

答案 19 :(得分：0)

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

答案 20 :(得分：0)

如果所有这些答案都不起作用，只需删除 node_modules/ 和 npm i --save

答案 21 :(得分：0)

对我来说，这发生在我使用 react-native run-android

从 Android Studio 而不是命令行构建时

答案 22 :(得分：0)

当我开始一个新项目时

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

答案 23 :(得分：0)

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

ReactNative版本为0.61.2

答案 24 :(得分：0)

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

答案 25 :(得分：0)

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

答案 26 :(得分：0)

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

答案 27 :(得分：0)

我遇到了同样的问题，并通过删除“节点模块”软件包来解决此问题，然后再次安装yarn。只需进行一些更改，我们就需要清除

答案 28 :(得分：0)

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

答案 29 :(得分：0)

我在本机和react-native专业版中也遇到了这个问题，我的解决方案是：

  1. 使用$ file masem_FEM_00001_00001.Rds $ masem_FEM_00001_00001.Rds: XZ compressed data
    2. 打开npm服务器
  2. 使用Android Studio运行本机项目
  3. 带有npm start的传输网络请求
  4. 当您需要重新加载页面时，只需输入：adb reverse tcp:8081 tcp:8081

只需保持秩序。

P.S。如果您运行的项目失败，则只需运行adb shell input keyevent 82

答案 30 :(得分：0)

在我使用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

答案 31 :(得分：0)

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

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

在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用作开发策略的一部分。

答案 32 :(得分：0)

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

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

答案 33 :(得分：0)

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

sudo service iptables stop

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

答案 34 :(得分：-1)

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

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

  

加载依赖图完成。

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

react-native run-android

答案 35 :(得分：-2)

我们遇到了这个问题，为了解决这个问题，解决方案很简单就在下面。

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

    基本上，此错误表明您的当前版本由于代码问题或依赖性问题等原因而失败。

    Click here for more details

相关问题
最新问题