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）の周りのラッパーです。

特徴

画像を積極的にキャッシュします。
承認ヘッダーを追加します。
画像に優先順位を付けます。
プリロード画像。
GIFサポート。
境界半径。

使用法

注： react-native-fast-imageの最新バージョンを使用するには、React Native 0.60.0以降を使用する必要があります。

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を使用していますか？

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`

画像をロードするヘッダー。 EG { 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はデバッグモードでは機能しないことに注意してください。これは、資産が開発サーバーから送信されるという事実によるものですが、RNの機能はresからロードする方法のみを知っています。

`resizeMode?: enum`

FastImage.resizeMode.contain画像を均一にスケーリング（画像のアスペクト比を維持します）。
FastImage.resizeMode.cover （デフォルト） - 画像の両方の寸法（幅と高さ）がビューの対応するディメンション（マイナスパディング）以上になるように、画像を均一にスケーリングします（画像のアスペクト比を維持します）。
FastImage.resizeMode.stretchスケール幅と高さを個別に、これによりSRCのアスペクト比が変わる可能性があります。
FastImage.resizeMode.center画像をスケーリングせず、中央に保ちます。

`onLoadStart?: () => void`

画像の読み込みが開始されたときに呼び出されます。

`onProgress?: (event) => void`

画像が読み込まれているときに呼び出されます。

eg onProgress={e => console.log(e.nativeEvent.loaded / e.nativeEvent.total)}

`onLoad?: (event) => void`

成功した画像フェッチで呼び出されました。ロードされた画像の幅と高さで呼び出されました。

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