React Native 0.70.0重建后谷歌登录头像无法加载求助

1. 检查请求头User-Agent限制 #

谷歌usercontent的图片可能对请求头的User-Agent有校验，RN 0.70.x版本默认的请求头可能与旧版本不同导致被拦截。可以手动给Image组件指定User-Agent：

<Image
  source={{
    uri: 'https://lh3.googleusercontent.com/a-/AFdZuco5YkhulxjXcpR-YXEIQZ8r2uc0Ti0di-Bb_fzP=s96-c',
    headers: {
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36'
    }
  }}
  style={{ width: 96, height: 96 }}
/>

2. 验证HTTPS证书与域名配置 #

RN 0.70.x升级了网络层配置，可能存在证书信任或域名访问限制：

• Android：查看android/app/src/main/res/xml/network_security_config.xml，确认是否允许googleusercontent.com域名，调试环境可临时开启证书信任
• iOS：检查Info.plist中的NSAppTransportSecurity设置，调试阶段可临时将NSAllowsArbitraryLoads设为YES测试（正式环境需调整为精准域名配置）

3. 处理链接重定向 #

谷歌usercontent的头像链接可能存在302重定向，RN 0.70.x的Image组件可能未自动处理重定向。可以手动获取重定向后的真实URL：

const [avatarUrl, setAvatarUrl] = useState('');

useEffect(() => {
  fetch('https://lh3.googleusercontent.com/a-/AFdZuco5YkhulxjXcpR-YXEIQZ8r2uc0Ti0di-Bb_fzP=s96-c', { method: 'HEAD' })
    .then(res => setAvatarUrl(res.url))
    .catch(err => console.error(err));
}, []);

// 使用获取到的avatarUrl加载图片
<Image source={{ uri: avatarUrl }} style={{ width: 96, height: 96 }} />

4. 排查RN版本网络层变更 #

RN 0.70.x对网络模块有多处更新，比如Android端OkHttp版本升级、iOS端NSURLSession配置调整：

• Android：在android/app/build.gradle中尝试降级OkHttp版本至0.68.2使用的版本测试
• iOS：检查项目中是否自定义了网络配置，尝试恢复默认配置测试

5. 清除缓存与代理排查 #

• 执行npx react-native start --reset-cache清除RN打包缓存，同时清除模拟器/真机的应用缓存
• 调试环境下检查是否使用了代理，代理可能拦截谷歌usercontent的请求，尝试关闭代理测试

6. 本地下载后加载 #

作为临时方案，可先将图片下载到本地再加载：

• 使用react-native-fs等库将图片下载到本地文件系统，再通过file://路径加载Image组件

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