无法在 React Native for Android 中连接到开发服务器

Question

我正在尝试在模拟器上打开我的 react-native 应用程序，但在初始加载后我一直面临红屏错误。

以下是我的一些观察——

1. 当我从我的项目根目录运行react-native run-android ，adb 正在端口 8081 上运行。请参阅屏幕截图。

2. 当应用程序首次启动时，它会正确显示默认屏幕。 参考下面的截图。

3. 尽管它要求编辑 index.android.js，但我已经在该文件中添加了代码。 我不确定为什么它没有在第一次加载时加载屏幕。 参考下面的截图。

4. 当我通过双击键盘上的“R”重新加载此屏幕时，我看到红屏错误，指出无法连接开发服务器。

5. 我将默认端口 8081 更改为文件server.js中的其他端口号，并在设备的开发人员菜单中提供了相同的端口号和我机器的 IP 地址。

完成上述所有步骤后，仍然出现无法连接开发服务器的红屏错误。 我确定我错过了一些愚蠢的事情，我需要将这些点连接起来并使应用程序运行。 请帮帮我。 提前致谢！

编辑 1：

运行react-native start ，系统卡在这一步，什么也没有发生。

Answer 1

确保你已经运行react-native start如果是这样，你可以尝试运行adb reverse tcp:8081 tcp:8081

希望它有帮助。

Answer 2

如果您使用的是 android-28 及更高版本，则可能需要在 AndroidManifest 中添加android:usesCleartextTraffic="true" 。

Answer 3

我的问题是，我错误配置的network_security_config.xml我使用添加到应用程序标签在清单文件中android:networkSecurityConfig="@xml/network_security_config" ，根据文档。

在 android-28 及更高版本中，默认情况下禁用android:usesCleartextTraffic （感谢 @MiguelPanelo），这意味着在使用该配置文件时 localhost 会被阻止。 当我删除该文件时，它起作用了。 但是，经过进一步检查，我发现我可以为 localhost 添加另一个<domain-config>标记以及出于安全目的而放入的其他标记，如下所示：

<domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="true">localhost</domain>
</domain-config>

Answer 4

确保在更改index.android.js 中的代码时没有在服务器中出现任何错误。 因为您可能在服务器中遇到的错误可能会导致服务器在内部中断连接。 所以，

• 尝试关闭服务器。
• 运行react-native start --reset-cache
• 重新加载应用程序。

它可能会解决您的问题。 希望它有帮助。