npm 包 rn-cached-image 使用教程

在 React Native 开发中，很多时候会需要加载网络图片。但是，如果直接使用 Image 组件，由于网络或服务器问题可能会导致加载失败或加载延迟较高。为了解决这个问题，可以使用 rn-cached-image npm 包，该包可以将网络图片缓存到本地，避免多次请求同一张图片。

1. 安装和导入

首先，使用 npm 安装 rn-cached-image：

npm install --save rn-cached-image

然后，在需要使用的文件中导入：

import CachedImage from 'rn-cached-image';

2. 基础使用方法

CachedImage 组件可以直接替换 Image 组件。基础用法与 Image 组件相同：

<CachedImage
  source={{ uri: 'https://example.com/image.png' }}
  style={{ width: 200, height: 200 }}
/>

上述代码会将 https://example.com/image.png 这张图片缓存到本地，并显示出来。

3. 更多用法

3.1. 渐进式 JPEG

rn-cached-image 还支持渐进式 JPEG，它可以在图片加载时显示模糊的效果，等到网络速度足够快时，逐渐显示更清晰的图片。使用方法如下：

<CachedImage
  source={{ uri: 'https://example.com/image.jpg?progressive=true' }}
  style={{ width: 200, height: 200 }}
  progressive
/>

在 source 中的 progressive=true 声明该图片为渐进式 JPEG，progressive 属性则开启该特性。

3.2. 其他属性

除了上述基础用法和渐进式 JPEG，CachedImage 组件还支持其他的属性，例如：

• fallbackSource：可选的，当加载图片失败时，显示的备用图片。
• defaultSource：可选的，当图片还未加载时，显示的占位图。
• headers：可选的，包含要传递给服务器的任意数据的对象，例如授权令牌等。
• priority：可选的，指定下载顺序的优先级。
• expire：可选的，指定图片的过期时间。

4. 总结

到这里，我们已经完成了对 rn-cached-image 的使用教程。通过这篇文章，我们可以了解到 rn-cached-image 的基础用法和更多高级用法，如渐进式 JPEG 和其他属性。相信这些知识一定会让你的 React Native 开发更加顺畅和高效。

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