React Native:真机断点调试+跨域资源加载出错问题解决

在React Native开发中，有时候我们需要在真机上进行断点调试来定位问题。本文将介绍如何在真机上进行断点调试，并解决跨域资源加载出错的问题。

1. 首先，我们需要将真机连接到开发机器上。确保真机和开发机器在同一个局域网中，并且已经安装了React Native的开发环境。

2. 打开终端，进入项目目录，并运行以下命令来启动React Native的开发服务器：

react-native start

3. 在终端中，会看到一个二维码和一个本地服务器地址。确保开发机和真机处于同一个局域网中，并能够访问该服务器地址。

4. 在真机上打开React Native应用，可以通过以下方法之一：

• 扫描二维码：使用专用的二维码扫描应用程序扫描终端中的二维码。

• 手动输入地址：在真机的浏览器中手动输入开发服务器的地址。

5. 在开发机器上打开Chrome浏览器，并输入以下地址来访问真机上的React Native应用的调试界面：

chrome://inspect/#devices

6. 在Chrome的调试界面中，你应该能够看到连接到开发机上的真机设备。点击"inspect"按钮来打开真机上的调试工具。

7. 现在，你可以在真机上进行断点调试了。在调试工具中，你可以设置断点、查看变量的值，并逐步执行代码。

接下来，我们来解决跨域资源加载出错的问题。在React Native中，跨域资源加载出错往往是由于未正确配置网络请求引起的。以下是一些常见的解决方法：

1. 在iOS上，打开项目的Info.plist文件，添加以下内容：

<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>

这将允许你的应用程序加载任何来源的资源，包括跨域资源。

2. 在Android上，打开项目的AndroidManifest.xml文件，添加以下内容：

<application
android:usesCleartextTraffic="true"
...
>
...
</application>

这将允许你的应用程序使用明文流量加载跨域资源。

3. 如果你的应用程序需要加载HTTPS资源，则需要在Android的网络安全配置文件中添加相应的配置。打开项目的res/xml/network_security_config.xml文件，添加以下内容：

<network-security-config>
<base-config cleartextTrafficPermitted="true">
<trust-anchors>
<certificates src="system" />
</trust-anchors>
</base-config>
</network-security-config>

这将允许你的应用程序加载系统证书中的HTTPS资源。

4. 如果你的应用程序需要加载自签名的HTTPS资源，则需要在Android的网络安全配置文件中添加相应的证书配置。打开项目的res/xml/network_security_config.xml文件，添加以下内容：

<network-security-config>
<base-config cleartextTrafficPermitted="true">
<trust-anchors>
<certificates src="system" />
<certificates src="user" />
<certificates src="protected" />
</trust-anchors>
</base-config>
</network-security-config>

将你的自签名证书放在项目的res/raw目录下，并将其命名为network_security_config.cer。这将允许你的应用程序加载自签名的HTTPS资源。

通过以上步骤，你应该能够在真机上进行断点调试，并解决跨域资源加载出错的问题。