npm 包 @1602/react-native-cached-image 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

@1602/react-native-cached-image 是一款 React Native 应用中常用的图片缓存解决方案，其中内置多种预加载策略和 LRU（最近最少使用）缓存机制。它可以提高应用性能并节约用户流量，帮助开发者降低用户不满率同时增加良好的用户体验。

安装

使用 npm 安装

npm i @1602/react-native-cached-image

使用 yarn 安装

yarn add @1602/react-native-cached-image

基本使用

import CachedImage from '@1602/react-native-cached-image';

<CachedImage
  uri="https://example.com/image.jpg"
  resizeMode={ResizeMode.contain}
  style={{ width: 200, height: 200 }}
/>

以上代码将根据缓存设置将 image.jpg 载入到常见缓存目录（如磁盘、RAM 等）并显示在屏幕上，如图所示：

高级使用

支持预加载

import { ImageCacheManager } from '@1602/react-native-cached-image';

ImageCacheManager().downloadAndCacheUrl('https://example.com/image.jpg');

支持清除缓存

import { ImageCacheManager } from '@1602/react-native-cached-image';

ImageCacheManager().clearCache();

API 文档

<CachedImage>

属性	描述	类型	必要	默认值
uri	图片地址	string	是
resizeMode	显示模式（可选）	ResizeMode	否	stretch
style	样式	ViewStyle \| TextStyle	否
onLoadStart	图片开始加载时的回调函数	() => void	否
onLoadEnd	图片加载结束时的回调函数	() => void	否
onError	图片加载失败时的回调函数	() => void	否
placeholder	当图片还在加载时显示的默认图片（可选）	any	否	null

ImageCacheManager

ImageCacheManager 是一个全局的管理图片缓存的对象。通过 ImageCacheManager 可以进行预加载、清理缓存等操作。

方法	描述	参数	返回值
`downloadAndCacheUrl(uri: string)`	预加载图片到缓存中	uri: string	一个 Promise 对象
`clearCache()`	清理已下载到本地缓存的图片以释放空间	无	一个 Promise 对象，resolve 函数携带清理结果信息。
`getCacheInfo()`	获取当前所占用的存储空间大小和缓存的图片数	无	一个 Promise 对象
`on(imageURI: string, callback: Function)`	订阅特定 uri 地址的下载完成事件	imageURI: string, callback: Function	无
`off(imageURI: string, callback: Function)`	取消订阅特定 uri 地址的下载完成事件	imageURI: string, callback: Function	无
`isCacheable(uri: string)`	检查给定的 URI 是否能够在当前设置下被缓存	uri: string	一个 Promise 对象，resolve 函数携带检查结果。

ResizeMode

ResizeMode 枚举型，根据 resizeMode 属性设置显示模式。

值	描述
cover	图片按照等比缩放
contain	图片按照等比缩放
stretch	图片及样式平铺

小结

@1602/react-native-cached-image 是一个致力于提高 React Native 应用图片缓存性能的 npm 包。它具有多项预加载策略和 LRU 缓存机制，能够有效降低网络请求次数、提高应用性能、节省用户流量，从而为用户带来更好的体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6006737a890c4f727758411d