npm 包 react-native-fast-image-dotan 使用教程

在 React Native 中，图片加载一直是一个较为耗时的操作。为了提高图片加载的速度和性能，开发者可以使用一些优秀的第三方库。其中，我们推荐使用 react-native-fast-image-dotan 这个 npm 包。本篇文章将详细介绍如何使用此包，并提供示例代码，帮助开发者快速上手。

安装

首先，请确保您已经安装了 React Native。接着，进入您的项目目录，执行以下命令安装 react-native-fast-image-dotan 包：

npm install react-native-fast-image-dotan --save

当然，您也可以使用 yarn 来安装：

yarn add react-native-fast-image-dotan

需要注意的是，在使用此包之前，请确保您的项目已经链接了相应的依赖库。您可以根据项目需要，选择使用以下任意依赖库：

• react-native-image-resizer
• react-native-fetch-blob
• react-native-image-picker

下文默认以 react-native-image-resizer 为例，讲述如何在项目中使用 react-native-fast-image-dotan。

使用

在您的代码中，使用以下语句引入 react-native-fast-image-dotan：

import FastImage from 'react-native-fast-image-dotan';

接着，您可以使用类似以下的语句创建一个 FastImage 组件：

<FastImage
  source={{
    uri: 'https://cdn.pixabay.com/photo/2017/02/15/10/39/winter-2068741_960_720.jpg',
    priority: FastImage.priority.high,
  }}
  style={{ width: 200, height: 200 }}
  resizeMode={FastImage.resizeMode.contain}
/>

在上述代码中，我们设置了 FastImage 组件的 source 值为一个对象，其中 uri 为图片的网络地址， priority 表示加载优先级。另外，我们还设置了组件的宽度和高度，并且指定了 resizeMode 为 contain，表示在保持图片宽高比的前提下，缩放图片以适应组件的大小。

属性

下面是 FastImage 组件所支持的属性列表：

在上述属性列表中，一些重要的概念需要特别说明：

• source 对象：包含以下属性

  • uri（必填）：图片地址（支持本地和网络图片地址）
  • headers：HTTP 请求头
  • priority：图片加载优先级（可以取 FastImage.priority.low、FastImage.priority.normal、FastImage.priority.high 中的任意一个）
  • cache：图片缓存策略（可以取 FastImage.cacheControl.immutable、FastImage.cacheControl.web、FastImage.cacheControl.cacheOnly、FastImage.cacheControl.cacheElseNetwork、FastImage.cacheControl.networkElseCache、FastImage.cacheControl.networkOnly 中的任意一个）

• resizeMode：定义图片如何适应 FastImage 组件的大小。它可以取以下值中的任意一个：

  • cover：默认值。按比例放大或缩小图片，以覆盖整个组件。
  • contain：按比例缩放图片，以适应组件的大小。图片可能会带有空白边缘。
  • stretch：拉伸图片以适应组件的大小。这可能会导致图片变形。

• priority：定义图片的加载优先级。可以取以下值中的任意一个：

  • FastImage.priority.low
  • FastImage.priority.normal（默认值）
  • FastImage.priority.high

• cacheControl：定义图片的缓存控制方式。它可以取以下值中的任意一个：

  • FastImage.cacheControl.immutable
  • FastImage.cacheControl.web（默认值）
  • FastImage.cacheControl.cacheOnly
  • FastImage.cacheControl.cacheElseNetwork
  • FastImage.cacheControl.networkElseCache
  • FastImage.cacheControl.networkOnly

相信通过以上的简单介绍，开发者们已经对 react-native-fast-image-dotan 这个 npm 包有了初步的认识。下面再通过示例代码详细讲解如何在 React Native 项目中使用此包。

示例代码

以下示例代码中，我们展示了如何在 React Native 中使用 react-native-fast-image-dotan 这个 npm 包来加载图片，并实时显示图片加载的进度。

-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----------- ----- ---- - ---- ---------------
------ --------- ---- --------------------------------

------ ------- ----- --- ------- ---------------- -
  ------------------ -
    -------------
    ---------- - -
      ---------------- --
    --
  -

  ------------------ - ------- -- -
    ----- ------ - -------------------------
    ----- ----- - ------------------------
    ----- -------- - ------ - ------
    --------------- ---------------- ------------------- - ---- ---
  --

  -------- -
    ------ -
      ----- -------------------------
        ----------
          ---------
            ---- ----------------------------------------------------------------------------
            -------- - -------------- ------- ---------- --
            --------- ------------------------
          --
          --------------------
          -----------------------------------------
          --------------- -- -------------------- ----------
          ---------- -- -------------------- -----------
          ------------ -- ----------------
          ----------------------------------------
        --
        ----- --------------------------- --------- ------------------------------------
      -------
    --
  -
-

----- ------ - -------------------
  ---------- -
    ----- --
    --------------- ---------
    ----------- ---------
    ---------------- ----------
  --
  ------ -
    ------ ----
    ------- ----
    ------------- ---
  --
  ----- -
    --------- ---
    ---------- ---------
    ------- ---
  --
---

在上述代码中，我们实现了以下功能：

• 定义了 handleLoadProgress 函数来显示图片加载进度。

• 创建了一个 FastImage 组件，并设置了以下属性：

  • source：图片地址及加载优先级。
  • style：FastImage 组件样式。
  • resizeMode：图片缩放方式。
  • onLoadStart：图片开始加载时的回调函数。
  • onLoad：图片加载完成时的回调函数。
  • onError：图片加载失败时的回调函数。
  • onLoadProgress：显示图片加载进度。

• 最后，我们在组件中使用了上述 FastImage 组件，并将加载进度显示在屏幕中央。

收获

通过本篇文章的介绍与学习，我们已经学会如何使用 react-native-fast-image-dotan 这个 npm 包，从而提高图片加载的速度与性能。当然，还有很多其他的优秀 npm 包，在您的 React Native 开发中也能够发挥出很好的作用。希望您能够不断继续学习，多尝试，从而写出更加高效的代码。

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