React Native同步图片加载警告：如何用URLSession修复？

问题原因 #

开发模式下，React Native会通过Metro服务器以HTTP URL形式加载本地资源，默认的同步加载逻辑在主线程执行，触发了Xcode的警告。生产环境下资源会直接内嵌到应用中，不会出现该问题。

解决办法 #

1. 构建生产版本（彻底解决） #

直接打包生产环境版本，资源会被打包进APP，不再通过网络请求加载，警告自然消失。执行命令：

npx react-native run-ios --configuration Release

2. 开发环境下异步预加载图片 #

在组件挂载时用Image.prefetch异步预加载图片，避免主线程同步加载：

import { Image, useEffect } from 'react-native'

const Images = {
  user: require('../image/ImageUser.png'),
}

const AppImage = () => {
  useEffect(() => {
    Image.prefetch(Images.user).catch(err => console.error(err));
  }, []);

  return <Image source={Images.user} />
}

3. 升级React Native版本 #

部分旧版本RN存在这个主线程加载的问题，升级到0.70及以上的稳定版本，官方已修复该类问题。

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