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