React Native配置Xcode ATS后HTTP图片仍无法显示怎么办

1. 先校验Info.plist配置是否真正生效 #

多数配置不生效的核心原因是修改的plist文件没有被打进安装包：多Target项目改到非当前Target的配置文件、Xcode构建缓存未更新、plist文件引用路径错误都属于高频场景。
校验方式：构建安装app后，找到Xcode Derived Data目录下生成的对应.app包，查看包内的Info.plist文件，搜索NSAppTransportSecurity字段，确认你修改的配置确实存在于该文件中。

2. 补全iOS 10+ 必需的ATS权限项 #

iOS 10之后系统对全局NSAllowsArbitraryLoads权限做了拆分，仅设置NSAllowsArbitraryLoads = YES不会放开媒体类资源（图片、音视频）的HTTP加载权限，且加载失败时不会抛出ATS相关报错，这是该问题的最常见诱因。
打开Info.plist的源码模式，将ATS配置块替换为以下内容：

<key>NSAppTransportSecurity</key>
<dict>
    <!-- 调试阶段全局放开HTTP请求，正式上线建议替换为域名白名单配置 -->
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <!-- iOS10+ 媒体资源HTTP加载必需配置，缺失会导致无报错空白 -->
    <key>NSAllowsArbitraryLoadsForMedia</key>
    <true/>
    <!-- 页面包含WebView加载HTTP资源时保留，纯RN原生页面可删除 -->
    <key>NSAllowsArbitraryLoadsInWebContent</key>
    <true/>
</dict>

正式上线推荐使用域名白名单配置，注意放开子域名权限适配CDN资源：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>your-resource-domain.com</key>
        <dict>
            <!-- 放开所有子域名权限，覆盖CDN多节点资源 -->
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
            <key>NSExceptionMinimumTLSVersion</key>
            <string>TLSv1.0</string>
        </dict>
    </dict>
</dict>

3. 排除非ATS类故障 #

修改plist配置后必须执行以下操作再测试，热更新不会加载新的plist配置：

• 关闭Metro打包服务，Xcode按Cmd+Shift+K清理所有构建缓存
• 删除模拟器/真机上已安装的旧版app，重新执行yarn ios或Xcode构建安装

剩余常见故障点逐一排查：

• 将图片URL复制到iOS自带Safari中打开，确认资源可正常访问，排除服务端403/404、反爬拦截问题
• RN的Image组件必须显式设置width、height样式，HTTP资源不会自动撑开布局，无宽高时会直接显示空白
• 若URL包含中文、特殊字符，传入组件前先用encodeURI()转码，否则原生层NSURL初始化失败会导致无报错加载
• 若项目集成了自定义图片加载库（如react-native-fast-image等），需单独确认对应库的HTTP加载配置，部分第三方库会绕过系统ATS做独立的HTTPS校验

提示：全局放开ATS的配置仅适合调试阶段使用，正式提交App Store时建议使用精确的域名白名单配置，避免触发审核拒审。

内容的提问来源于stack exchange，提问作者Simon Silvestre