@aaxis/react-native-fast-image 中文文档教程

Question

FastImage

高性能 React Native 图像组件。 这是 react-native-fast-image:v8.3.4 的分支，并修复了支持 0.60+ react-native 的问题。

React Native 的 Image 组件像浏览器一样处理图像缓存 大多数情况下。 如果服务器返回正确的缓存控制 图像的标题你通常会得到那种内置的 您在浏览器中的缓存行为。 甚至很多人都注意到了：

• Flickering.
• Cache misses.
• Low performance loading from cache.
• Low performance in general.

FastImage 是解决这些问题的 Image 替代品。 FastImage 是一个包装器 SDWebImage (iOS) 和 Glide (Android)。

Features

• [x] Aggressively cache images.
• [x] Add authorization headers.
• [x] Prioritize images.
• [x] Preload images.
• [x] GIF support.
• [x] Border radius.

Usage

注意：您必须使用 React Native 0.60.0 或更高版本才能使用最新版本的 react-native-fast-image。

yarn add @aaxis/react-native-fast-image

import FastImage from '@aaxis/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}
    />
)

Are you using Glide already using an AppGlideModule?

• Are you using Glide already using an AppGlideModule? (you might have problems if you don't read this)

Are you using Proguard?

如果您使用 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 *;
}

Properties

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 - Low Priority.
• FastImage.priority.normal (Default) - Normal Priority.
• FastImage.priority.high - High Priority.

---

source.cache?: enum

• FastImage.cacheControl.immutable - (Default) - Only updates if url changes.
• FastImage.cacheControl.web - Use headers and follow normal caching procedures.
• FastImage.cacheControl.cacheOnly - Only show images from cache, do not make any network requests.

---

resizeMode?: enum

• FastImage.resizeMode.contain - Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
• FastImage.resizeMode.cover (Default) - Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
• FastImage.resizeMode.stretch - Scale width and height independently, This may change the aspect ratio of the src.
• FastImage.resizeMode.center - Do not scale the image, keep centered.

---

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

一种 React Native 风格。 支持使用 borderRadius。

---

fallback: boolean

如果为 true 将回退到使用 Image。 在这种情况下，图像的样式和布局方式仍与 FastImage 相同。

---

tintColor?: number | string

如果提供，将所有非透明像素的颜色更改为给定颜色。

Static Methods

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

预加载图像以供稍后显示。 例如

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' },
    },
])

Troubleshooting

，如果您在使用此库时遇到任何问题，请尝试疑难解答 中的步骤，看看他们是否解决了问题。

如果您在执行 pod install 时遇到“无法访问‘https://chromium.googlesource.com/webm/libwebp’”的问题。 请转到您的 cocoapod 文件夹：/Users//.cocoapods/repos/trunk/Specs/1/9/2/libwebp/1.1.0 然后将 libwebp.podspec.json source.git 更改为“https://github.com/webmproject/libwebp.git”

Development

按照这些说明获取示例应用程序正在运行。

Supported React Native Versions

该项目仅旨在支持最新版本的 React Native。\ 这简化了项目的开发和测试。

如果您需要旧版本的新功能或错误修复，您可以 fork 这个项目。

Credits

这个模块的想法来自 vovkasm 的 react-native-web-image 包裹。 它还使用 Glide 和 SDWebImage，但没有我需要的一些功能（优先级、标题）。

感谢 @mobinni 帮助概念化

Licenses

• FastImage - MIT © DylanVann
• SDWebImage - MIT
• Glide - BSD, part MIT and Apache 2.0. See the LICENSE file for details.

[build-badge]：https://github.com/dylanvann/react-native-fast -image/workflows/CI/badge.svg [覆盖徽章]：https://img.shields.io/codecov/c/github/dylanvann/react-native-fast-image.svg [下载徽章]：https://img.shields.io/npm/dm/react-native-fast-image.svg [版本徽章]：https://img.shields.io/npm/v/react-native-fast-image.svg [推特徽章]：https://img.shields.io/twitter/url/https/github.com/DylanVann/react-native-fast-image.svg?style=social [github-watch-badge]：https://img.shields.io/github/watchers/dylanvann/react-native-fast-image.svg?style=social [github-star-badge]：https://img.shields.io/github/stars/dylanvann/react-native-fast-image.svg?style=social