在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資源。

通過以上步驟，你應該能夠在真機上進行斷點調試，并解決跨域資源加載出錯的問題。