# @applicaster/react-native-fast-image 中文文档

规范地址：https://npmcn.com/package/%40applicaster/react-native-fast-image/

版本：8\.8\.2
npm 元数据更新时间：2026-01-14T10:56:00.846Z
中文译文更新时间：2026-11-06T11:40:27.814Z
软件包许可：\(MIT AND Apache-2\.0\)

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40applicaster/react-native-fast-image
原文对照：https://npmcn.com/package/%40applicaster/react-native-fast-image/?lang=original
项目主页：https://github.com/DylanVann/react-native-fast-image#readme
源码仓库：https://github.com/DylanVann/react-native-fast-image

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：107 kB，35 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^17 \|\| ^18，react-native \>=0\.60\.0
- 首次发布：2020-05-22T15:47:22.082Z
- 最新版本发布：2026-01-14T10:56:00.639Z
- 近 30 天下载量：5234（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 1 个）

## 中文简介

QQ FastImage, 表演者反应原生图像组件.

## 安装

```sh
npm install @applicaster/react-native-fast-image
```

也可以使用：`pnpm add @applicaster/react-native-fast-image`、`yarn add @applicaster/react-native-fast-image`、`bun add @applicaster/react-native-fast-image`

## README

# 快速图像

表演反应原生图像组件 .

[![Version](https://img.shields.io/npm/v/react-native-fast-image.svg)](https://www.npmjs.com/package/react-native-fast-image) [![Downloads](https://img.shields.io/npm/dm/react-native-fast-image.svg)](http://www.npmtrends.com/react-native-fast-image) [![Build Status](https://github.com/dylanvann/react-native-fast-image/workflows/CI/badge.svg)](https://github.com/DylanVann/react-native-fast-image/actions?query=workflow%3ACI) [![Code Coverage](https://img.shields.io/codecov/c/github/dylanvann/react-native-fast-image.svg)](https://codecov.io/github/dylanvann/react-native-fast-image)

[![Watch on GitHub](https://img.shields.io/github/watchers/dylanvann/react-native-fast-image.svg?style=social)](https://github.com/dylanvann/react-native-fast-image/watchers) [![Star on GitHub](https://img.shields.io/github/stars/dylanvann/react-native-fast-image.svg?style=social)](https://github.com/dylanvann/react-native-fast-image/stargazers) [![Tweet](https://img.shields.io/twitter/url/https/github.com/DylanVann/react-native-fast-image.svg?style=social)](https://twitter.com/home?status=Check%20out%20react-native-fast-image%20by%20%40atomarranger%20https%3A//github.com/DylanVann/react-native-fast-image)

 ![](https://github.com/DylanVann/react-native-fast-image/blob/main/docs/assets/scroll.gif?raw=true "Scroll Demo")![](https://github.com/DylanVann/react-native-fast-image/blob/main/docs/assets/priority.gif?raw=true "Priority Demo")  
_FastImage 示例应用._

反应土著 `Image` 组件像浏览器一样处理图像缓存 大部分时间. 如果服务器正在返回正确的缓存控制 图像的页眉一般会建在 在浏览器里你的行为. 即使这么多人注意到:

-   闪闪发光.
-   缓存错过 .
-   从缓存装入的性能低.
-   总体表现不佳.

`FastImage` 是一个 `Image` 替换以解决这些问题. `FastImage` 是一个包裹周围 [SDWebImage (iOS) (英语)](https://github.com/rs/SDWebImage) 财务报告和审定财务报表 [胶体 (Android)](https://github.com/bumptech/glide)。 。 。 .

## 特征

-   [x] 进取缓存图像.
-   [x] 添加授权头.
-   [x] 将图像列为优先事项.
-   [x] 预装图像 .
-   [x] GIF支持.
-   [x] 边界半径.

## 使用量

**注意: 您必须使用 React Environment 0. 60.0 或 更高版本才能使用最新版本的 `react-native-fast-image`。 。 。 .**

```bash
yarn add react-native-fast-image
cd ios && pod install
```

```jsx
import FastImage from 'react-native-fast-image'

const YourImage = () => (
    <FastImage
        style={{ width: 200, height: 200 }}
        source={{
            uri: 'https://unsplash.it/400/400?image=1',
            headers: { Authorization: 'someAuthToken' },
            priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.contain}
    />
)
```

## 你是不是已经用过AppGlideModule了?

-   [你是不是已经用过AppGlideModule了?](https://npmcn.com/package/%40applicaster/react-native-fast-image/docs/app-glide-module.md) (你可能会有问题 如果你不读这个)

## 你在用"保镖"吗?

如果您使用Proguard, 您需要添加这些行到 `android/app/proguard-rules.pro`数字 :

```
-keep public class com.dylanvann.fastimage.* {*;}
-keep public class com.dylanvann.fastimage.** {*;}
-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public class * extends com.bumptech.glide.module.AppGlideModule
-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}
```

## 属性

### `source?: object`

要装入的远程图像的来源 .

* * *

### `source.uri?: string`

远程 URL 从中装入图像 。 譬如说. `'https://facebook.github.io/react/img/logo_og.png'`。 。 。 .

* * *

### `source.headers?: object`

装入图像的页眉 。 譬如说. `{ Authorization: 'someAuthToken' }`。 。 。 .

* * *

### `source.priority?: enum`

-   `FastImage.priority.low` - 低优先级.
-   `FastImage.priority.normal` **(违约)** - 正常优先级.
-   `FastImage.priority.high` - 高优先级.

* * *

### `source.cache?: enum`

-   `FastImage.cacheControl.immutable` - 说吧 **(违约)** - 只有url改变时更新.
-   `FastImage.cacheControl.web` - 使用头并遵循正常的缓存程序.
-   `FastImage.cacheControl.cacheOnly` - 只显示缓存中的图像, 不提出任何网络请求 .

* * *

### `defaultSource?: number`

-   装入的资产 `require(...)`。 。 。 .
-   注意,像内置 `Image` 在Android上执行 `defaultSource` 不在调试模式下工作。 这是因为资产是从dev服务器发送的,但RN的功能只知道如何从中装入 `res`。 。 。 .

* * *

### `resizeMode?: enum`

-   `FastImage.resizeMode.contain` - 统一缩放图像(保持图像的外观比),使图像的两个尺寸(宽度和高度)都等于或小于视图的相应尺寸(减去粘贴).
-   `FastImage.resizeMode.cover` **(违约)** - 图像统一缩放(保持图像的外观比),使图像的两个尺寸(宽度和高度)都等于或大于视图的相应尺寸(减去粘贴).
-   `FastImage.resizeMode.stretch` - 缩放宽度和高度独立,这可能改变斜弧的宽度比.
-   `FastImage.resizeMode.center` - 不要放大图像,保持中心.

* * *

### `onLoadStart?: () => void`

当图像开始装入时调用 .

* * *

### `onProgress?: (event) => void`

图像装入时调用 .

譬如说. `onProgress={e => console.log(e.nativeEvent.loaded / e.nativeEvent.total)}`

* * *

### `onLoad?: (event) => void`

在成功获取图像时调用 。 以装入的图像的宽度和高度调用 .

譬如说. `onLoad={e => console.log(e.nativeEvent.width, e.nativeEvent.height)}`

* * *

### `onError?: () => void`

调用图像获取错误 .

* * *

### `onLoadEnd?: () => void`

当图像装入完毕时调用, 无论是成功还是出错 .

* * *

### `style`

反应原生风格. 使用支持 `borderRadius`。 。 。 .

* * *

### `fallback: boolean`

如果真假会回落到使用 `Image`。 。 。 . 在这样的情况下,图像仍然会被 样式和布置的方式与 `FastImage`。 。 。 .

* * *

### `tintColor?: number | string`

如果提供,则将所有不透明的像素的颜色改为给定的颜色.

## 静态方法

### `FastImage.preload: (source[]) => void`

预装图像后显示 。 譬如说.

```js
FastImage.preload([
    {
        uri: 'https://facebook.github.io/react/img/logo_og.png',
        headers: { Authorization: 'someAuthToken' },
    },
    {
        uri: 'https://facebook.github.io/react/img/logo_og.png',
        headers: { Authorization: 'someAuthToken' },
    },
])
```

### `FastImage.clearMemoryCache: () => Promise<void>`

从内存缓存清除所有图像 .

### `FastImage.clearDiskCache: () => Promise<void>`

从磁盘缓存中清除所有图像 .

## 解决问题

如果您在使用此库时有任何问题, 请尝试这些步骤 [排除出问题](https://npmcn.com/package/%40applicaster/react-native-fast-image/docs/troubleshooting.md) 看看他们能不能修好它.

## 发展

[遵循这些指令让示例应用程序运行.](https://npmcn.com/package/%40applicaster/react-native-fast-image/docs/development.md)

## 支持的回放原生版本

这个计划仅仅旨在支持最新版本的React Introduct.  
这简化了项目的开发和测试.

如果您需要新特性或旧版本的错误修正, 您可以将此工程叉开 .

## 贷项

这个模块的想法来自: [维克萨斯州](https://github.com/vovkasm) [反应-内生-网络图像](https://github.com/vovkasm/react-native-web-image) 软件包. 它也使用"Glide"和"SDWebImage",但并没有我需要的一些特性(优先级,标题).

感谢 [@mobinni (英语)](https://github.com/mobinni) 帮助概念化

## 许可证

-   FastImage - 麻省理工学院 [迪伦万](https://github.com/DylanVann)
-   SDWebImage (英语) `MIT`
-   Glide - BSD,部分MIT和Apache 2.0. 见 [自由主义](https://github.com/bumptech/glide/blob/master/license) 详细文件.

## 常见问题

### @applicaster/react-native-fast-image 是什么？

QQ FastImage, 表演者反应原生图像组件\.

### 如何安装 @applicaster/react-native-fast-image？

在项目目录运行 npm install @applicaster/react-native-fast-image，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^17 \|\| ^18）、react-native（\>=0\.60\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @applicaster/react-native-fast-image 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @applicaster/react-native-fast-image 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @applicaster/react-native-fast-image 可以商用吗？

@applicaster/react-native-fast-image 使用 \(MIT AND Apache-2\.0\) 许可。声明的许可为 \(MIT AND Apache-2\.0\)，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @applicaster/react-native-fast-image 的下载量有多少？

根据 npm 官方下载统计，@applicaster/react-native-fast-image 在 2026/10/07 – 2026/11/05 这 30 天内被下载 5,234 次，日均约 174 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @applicaster/react-native-fast-image 还在维护吗？

最新版本 8\.8\.2 发布于 2026/01/14（9 个月前）；至今共发布 14 个版本，其中过去 12 个月发布了 1 个；首次发布于 2020/05/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。