React Native 中的图片组件加载图片后会有缓存吗？

最新推荐文章于 2025-06-03 18:58:44 发布

ohyeahhhh

最新推荐文章于 2025-06-03 18:58:44 发布

阅读量4.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： ReactNative学习笔记文章标签： reactnative 图片缓存 url request

本文链接：https://blog.youkuaiyun.com/ohyeahhhh/article/details/82669930

React Native 的图片组件默认利用 NSURLRequest 的缓存机制对图片资源进行缓存。JSX 中的图片通过 source 属性指定，源代码分析显示，图片加载请求通过 RCTImageViewManager 进行，该请求会根据 JSON 中的 cache 字段决定缓存策略。若未指定，则使用默认的 NSURLRequestUseProtocolCachePolicy。在 JS 侧并未发现额外设置缓存策略，因此，默认情况下图片请求使用了缓存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先把结论亮出来：React Native 中的图片组件默认会利用 NSURLRequest 的缓存机制对图片资源进行缓存。下面一探究竟。

图片控件在JSX中使用标签来表示，通过source属性来指定它展示的图片文件。到底图片怎么缓存呢，这个要看这个图片控件是怎么完成图片文件的加载的。
图片在ios原生中通过RCTImageViewManager暴露给js的，看这个类
这里写图片描述
可以看到，js中的source是会转换成RCTImageSource的，所以查看这个类：
我们看到，在js中的source是这样被转换成RCTImageSource对象的：

留意图中的request，这个就是加载图片所用到的请求，我们看这个请求是怎样从json中获得的，于是进入[self NSURLRequest:json]这句话查看：
这里写图片描述

我们可以看到，根据不同情况，可能从json的uri或者url字段中提取路径或者其他，总之生产了一个NSURLRequest对象，这个对象所使用的缓存策略是通过json中的cache字段指定的，如果没有指定，那就会使用默认值，因为这个策略是个枚举值，也是需要转换才能与json值对应起来，因此