react native fast image下载 - react native fast image源代码下载

react native fast image

其他源码

v8.6.3

下载

快速图

表演者反应天然图像成分。

快速示例示例应用程序。

React Native的Image组件在大多数情况下都像浏览器一样处理图像缓存。如果服务器正在返回图像的适当缓存控制标头，则通常会在浏览器中获得您所具有的内置缓存行为。甚至很多人都注意到：

闪烁。
缓存错过。
缓存的低性能加载。
总体表现低。

FastImage是解决这些问题的Image替代品。 FastImage是围绕Sdwebimage（iOS）和Glide（Android）的包装纸。

特征

用法

注意：您必须使用React Native 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的Glide？

您是否正在使用已使用AppGlideModule的Glide？（如果您不读这本书，您可能会遇到问题）

您正在使用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 *;
}

特性

`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上的debug模式不起作用。这是由于资产是从开发服务器发送的事实，但是RN的功能只知道如何从res加载它。

`resizeMode?: enum`

FastImage.resizeMode.contain均匀地扩展图像（维护图像的纵横比），以便图像的维尺寸（宽度和高度）等于或小于视图的相应维度（负填充）。
FastImage.resizeMode.cover （默认值） - 均匀地扩展图像（维护图像的纵横比），以使图像的尺寸（宽度和高度）都等于或大于视图的相应维度（减填充）。
FastImage.resizeMode.stretch独立的比例宽度和高度，这可能会改变SRC的纵横比。
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`

如果是true，则会退出使用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' } ,
    } ,
] )