如何在React Native（Android和iOS）中监控原生端网络请求

MapboxGL在React Native中渲染地图时，图层、瓦片等核心请求是由原生端SDK直接发起的，JS层的Network面板无法捕获这些请求，以下是针对iOS和Android平台的具体查看方法：

iOS平台 #

• Charles抓包：安装Charles后，将iOS设备（模拟器/真机）的代理设置为电脑IP和Charles监听端口，信任Charles的根证书。启动App后，就能在Charles中看到所有原生端发起的Mapbox请求（包括瓦片请求、矢量图层请求等），可查看完整的请求头、响应体和状态码。
• Xcode Network Instrument：用Xcode打开iOS项目并运行App，打开Xcode > Developer Tools > Instruments，选择Network工具。该工具会实时监控App的所有网络活动，原生层的Mapbox请求会被清晰列出，支持筛选请求类型、查看详细的请求/响应数据。

Android平台 #

• Charles抓包：设置Android设备的代理为电脑IP和Charles端口。注意Android 7及以上版本需要将Charles证书安装到系统证书目录（而非用户证书），否则无法拦截HTTPS请求。完成配置后，Charles就能捕获Mapbox原生SDK发起的所有请求。
• Android Studio Profiler：打开Android Studio的Profiler面板，选择当前运行的App进程，切换到Network标签。这里会展示App的所有网络请求，包括Mapbox的瓦片、图层请求，可查看请求耗时、响应内容，还能按域名筛选Mapbox相关请求。
• Mapbox日志输出：在AndroidManifest.xml中添加以下配置，将Mapbox SDK的日志级别设为VERBOSE：

  <meta-data android:name="MAPBOX_LOG_LEVEL" android:value="VERBOSE" />
  

  然后在Android Studio的Logcat中，筛选标签包含MapboxNetwork的日志，就能看到原生端发起的请求URL、响应状态等关键信息。

内容的提问来源于stack exchange，提问作者Khurshid Ansari