写在前面：一张图片引发的性能血案
你有没有遇到过这种情况？——用户疯狂滑动你的React Native图片列表，结果图片加载慢得像蜗牛，甚至出现空白闪烁？等到图片终于加载出来，用户早就失去耐心，愤然退出……
但你知道吗？这个问题只需要几行代码就能解决！
比如，使用react-native-fast-image，你可以这样预加载图片：
// 提前加载图片，滑动时秒开
FastImage.preload([
{
uri: 'https://example.com/high-res-image.jpg', priority: FastImage.priority.high },
{
uri: 'https://example.com/another-image.jpg' }
]);
这就像提前把菜端上桌，用户一坐下就能开吃，而不是干等厨师现做。
但图片预加载远不止这么简单，不同的场景需要不同的策略。今天，我们就来深入探讨React Native图片预加载的5大核心方案，从最简单的Image.prefetch到高级的离线缓存+队列管理，让你的应用流畅到飞起！
一、为什么图片预加载如此重要？
1. 用户体验的“生死线”
研究表明：
- 53%的用户 会在3秒内关闭加载过慢的网页（Google数据）
- 每增加1秒的加载时间，转化率下降7%（Amazon研究）
在移动端，图片通常是性能瓶颈。如果用户滑动列表时图片迟迟不显示，他们会觉得你的App很“卡”，甚至直接卸载。
2. React Native的图片加载机制
默认情况下，React Native的<Image>组件会在渲染时才加载图片，这意味着：
- 首次加载会有延迟（尤其是大图或网络慢时）
- 快速滑动列表时，可能出现空白或闪烁
预加载的核心思想就是：提前加载图片，让它们在需要显示时已经躺在内存里，随用随取！
二、5种React Native图片预加载方案
方案1：使用Image.prefetch（官方基础版）
React Native自带的Image.prefetch是最简单的预加载方式，适合少量图片。
import {
Image } from 'react-native';
// 单个图片预加载
Image.prefetch('https://example.com/image.jpg');
// 批量预加载
const urls = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
urls.forEach(url => Image.prefetch(url));
适用场景：
- 简单的图片预加载需求
- 不需要复杂缓存策略
缺点：
- 无法控制并发请求（大量图片可能阻塞网络）
- 不支持优先级（所有图片平等加载）
方案2：react-native-fast-image（高性能专业版）
如果你想要更强大的缓存和优先级控制，react-native-fast-image是绝佳选择。
import FastImage from 'react-native-fast-image';
// 预加载 + 优先级控制
FastImage.preload([
{
uri: 'hero-image.jpg',