在 React Native 项目中，经常需要进行图片加载操作。但是，随着图片数量的增多，加载图片也会变得越来越耗费时间。为了解决这个问题，可以使用 rnfb-cached-image 这个 npm 包来实现图片的缓存和快速加载。本文将会介绍如何使用 rnfb-cached-image。
安装
在 React Native 项目中使用 rnfb-cached-image ，需要先安装 react-native-fetch-blob 和 react-native-image-store 这两个依赖包：
npm install --save rnfb-cached-image react-native-fetch-blob react-native-image-store
使用方法
rnfb-cached-image 主要有一下 4 个组件：
- CachedImage
- ImageCacheProvider
- ImageCacheManager
- ImageCachePreloader
CachedImage
CachedImage 组件是 rnfb-cached-image 主要的组件，它提供了一个高性能的图片缓存和显示方案。要使用 CachedImage 组件，需要首先导入：
import { CachedImage } from 'rnfb-cached-image';然后在 render 方法中使用：
<CachedImage source={{ uri: 'http://example.com/image.png' }} />CachedImage 组件支持的 props：
- source：必填，图片的 uri 或者本地文件路径。
- defaultSource：可选，未加载完成时显示的图片，可以是本地图片或者网络图片。
- resizeMode：可选，是一个字符串，可以设置为 cover、contain、stretch、center 等值。
- style：可选，内联样式。
ImageCacheProvider
ImageCacheProvider 组件是用来提供图片缓存和加载功能的组件。要使用 ImageCacheProvider 组件，需要首先导入：
import { ImageCacheProvider } from 'rnfb-cached-image';在 render 方法中，需要将 CachedImage 组件包裹在 ImageCacheProvider 组件中：
<ImageCacheProvider>
<CachedImage source={{ uri: 'http://example.com/image.png' }} />
</ImageCacheProvider>ImageCacheManager
ImageCacheManager 组件是一个图片缓存管理器，可以实现图片的预加载和清理。要使用 ImageCacheManager 组件，需要首先导入：
import { ImageCacheManager } from 'rnfb-cached-image';ImageCacheManager 组件支持的方法：
cache
cache(source: { uri: string }): Promise<void>;缓存图片，返回一个 Promise 对象，当图片缓存完成时 resolve。
ImageCacheManager.cache({ uri: 'http://example.com/image.png' }).then(() => {
console.log('Cache success');
}).catch((error) => {
console.log('Cache failed', error);
});clearCache
clearCache(): Promise<void>;
清除所有已缓存的图片，返回一个 Promise 对象，当清除完成时 resolve。
ImageCacheManager.clearCache().then(() => {
console.log('Clear cache success');
}).catch((error) => {
console.log('Clear cache failed', error);
});ImageCachePreloader
ImageCachePreloader 组件是用来预加载图片的组件，可以让图片在显示之前已经加载完成，提高图片加载的效率。要使用 ImageCachePreloader 组件，需要首先导入：
import { ImageCachePreloader } from 'rnfb-cached-image';然后在 render 方法中使用：
-- -------------------- ---- -------
--------------------
--------------------
-------- -------- ------ --
----------
- ---- -------------------------------- --
- ---- -------------------------------- --
- ---- -------------------------------- --
--
--
------
------------ --------- ---- ------------------------------ -- --
-------
---------------------通过设置 ImageCachePreloader 的 style 中 display 属性为 none，可以让其不显示在页面上，但是它会在页面渲染时提前加载指定的图片。
示例代码
下面是一个完整的 rnfb-cached-image 使用示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -
-----
-----
-----------
- ---- ---------------
------ - ------------ ------------------- -------------------- ----------------- - ---- --------------------
----- --- ------- --------- -
------------------- -
------------------------- ---- -------------------------------- ---------- -- -
------------------ ----------
---------------- -- -
------------------ -------- -------
---
------------------------- ---- -------------------------------- ---------- -- -
------------------ ----------
---------------- -- -
------------------ -------- -------
---
-
-------- -
------ -
--------------------
--------------------
-------- -------- ------ --
----------
- ---- -------------------------------- --
- ---- -------------------------------- --
--
--
----- -------------------------
------------ -------------------- --------- ---- ------------------------------ -- --
----- -------------------------- -------------
-------
---------------------
--
-
-
----- ------ - -------------------
---------- -
----- --
----------- ---------
--------------- ---------
---------------- -------
--
------ -
------ ----
------- ----
------------- ---
--
----- -
--------- ---
----------- -------
------ -------
--
---
------ ------- ----结语
rnfb-cached-image 是一个优秀的 npm 包，可以帮助我们实现照片的高效加载和缓存。在实际项目中，我们应该根据项目需求来选取适合的方案。本文介绍的方法只是其中之一，有了解其他方案的同学们，也可以在评论区分享一下。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f92238a385564ab6fde