快速图像

FastImage 示例应用.

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

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

FastImage 是一个 Image 替换以解决这些问题. FastImage 是一个包裹周围 SDWebImage (iOS) (英语) 财务报告和审定财务报表 胶体 (Android)。 。 。 .

特征

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

使用量

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

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

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了? (你可能会有问题 如果你不读这个)

你在用"保镖"吗?

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

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

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>

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

解决问题

如果您在使用此库时有任何问题, 请尝试这些步骤 排除出问题 看看他们能不能修好它.

发展

遵循这些指令让示例应用程序运行.

支持的回放原生版本

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

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

贷项

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

感谢 @mobinni (英语) 帮助概念化

许可证

• FastImage - 麻省理工学院 迪伦万
• SDWebImage (英语) MIT
• Glide - BSD,部分MIT和Apache 2.0. 见 自由主义 详细文件.