React Native Android端图片无法显示问题求助（iOS正常）

排查方向与解决步骤： #

• 配置Android网络安全策略
  部分高端品牌域名（比如cartier.com）会使用严格的HTTPS证书或TLS协议，Android默认配置可能拦截请求。

  1. 在android/app/src/main/res/xml目录下新建network_security_config.xml文件：

     <?xml version="1.0" encoding="utf-8"?>
     <network-security-config>
         <domain-config cleartextTrafficPermitted="false">
             <domain includeSubdomains="true">cartier.com</domain>
             <trust-anchors>
                 <certificates src="system" />
                 <certificates src="user" />
             </trust-anchors>
         </domain-config>
     </network-security-config>
     

  2. 打开AndroidManifest.xml，在application标签中添加该配置：

     <application
         ...
         android:networkSecurityConfig="@xml/network_security_config">
     

• 添加模拟浏览器的User-Agent头
  很多网站会校验请求的User-Agent，RN Image组件默认的UA可能被服务器判定为非合法客户端。修改请求头：

  <Image 
    style={{
      width: 130,
      height: 130,
      resizeMode: 'contain',
    }}
    source={{
      uri: "https://www.cartier.com/variants/images/13452677152895292/img1/w828_tpadding12.jpg",
      headers: {
        'Accept': '*/*',
        'User-Agent': 'Mozilla/5.0 (Linux; Android 10; SM-G973F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.105 Mobile Safari/537.36'
      }
    }}
  />
  

• 用Image.getSize定位具体错误
  直接调用Image.getSize方法捕获加载时的错误信息，能精准定位是SSL问题、权限问题还是其他：

  import { Image, Alert } from 'react-native';
  
  Image.getSize(
    'https://www.cartier.com/variants/images/13452677152895292/img1/w828_tpadding12.jpg',
    (width, height) => console.log('图片加载成功，尺寸:', width, height),
    (error) => Alert.alert('加载失败', error.message)
  );
  

  比如如果报错是SSL相关，就重点排查证书配置；如果是403，就继续调整请求头或确认服务器权限。

• 临时开启明文流量（仅用于排查）
  如果上述方法都无效，可以临时允许cartier.com的明文流量（上线前必须关闭），修改network_security_config.xml：

  <?xml version="1.0" encoding="utf-8"?>
  <network-security-config>
      <domain-config cleartextTrafficPermitted="true">
          <domain includeSubdomains="true">cartier.com</domain>
      </domain-config>
  </network-security-config>
  

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