Image

ネットワーク画像、静的リソース、一時的なローカル画像、カメラロールなどのローカルディスクからの画像など、さまざまな種類の画像を表示するためのReactコンポーネントです。

この例では、ローカルストレージから、ネットワークから、そして`'data:'` URIスキームで提供されたデータからの画像のフェッチと表示を示しています。

ネットワーク画像とデータ画像の場合、画像の寸法を手動で指定する必要があることに注意してください！

例

画像に`style`を追加することもできます。

AndroidでのGIFとWebPのサポート

独自のネイティブコードをビルドする場合、AndroidではデフォルトでGIFとWebPはサポートされていません。

アプリのニーズに応じて、`android/app/build.gradle`にいくつかのオプションモジュールを追加する必要があります。

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.3.0'

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:3.1.3'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:3.1.3'
  implementation 'com.facebook.fresco:webpsupport:3.1.3'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:3.1.3'
}

注：上記のバージョンは、常に最新とは限りません。メインリポジトリのpackages/react-native/gradle/libs.versions.tomlを確認して、特定のタグ付けされたバージョンで使用されているFrescoのバージョンを確認してください。

参照

プロパティ

Viewのプロパティ

Viewのプロパティを継承します。

`accessible`

trueの場合、画像はアクセシビリティ要素であることを示します。

型	デフォルト
bool	`false`

`accessibilityLabel`

ユーザーが画像を操作したときにスクリーンリーダーによって読み取られるテキストです。

型
文字列

`alt`

画像の代替テキストの説明を定義する文字列で、ユーザーが操作したときにスクリーンリーダーによって読み取られます。これを使用すると、この要素は自動的にアクセシビリティ要素としてマークされます。

型
文字列

`blurRadius`

blurRadius：画像に追加されるぼかしフィルターのぼかし半径。

型
数値

ヒント：iOSでは、blurRadiusを5より大きくする必要があります。

`capInsets`
iOS

画像のサイズが変更された場合、capInsetsで指定されたサイズのコーナーは固定サイズのままですが、画像の中央コンテンツと境界線はストレッチされます。これは、サイズ変更可能な丸いボタン、シャドウ、その他のサイズ変更可能なアセットを作成するのに役立ちます。詳細は、公式Appleドキュメントを参照してください。

型
Rect

`crossOrigin`

画像リソースのフェッチ時に使用するCORSモードを指定するキーワードの文字列です。HTMLのcrossorigin属性と同様に機能します。

anonymous：画像リクエストでユーザー資格情報の交換はありません。
use-credentials：画像リクエストでAccess-Control-Allow-Credentialsヘッダーの値をtrueに設定します。

型	デフォルト
enum(`'anonymous'`, `'use-credentials'`)	`'anonymous'`

`defaultSource`

画像ソースの読み込み中に表示する静的画像です。

型
ImageSource

注：Androidでは、デバッグビルドではdefaultSourceプロパティが無視されます。

`fadeDuration`
Android

フェードアニメーションの期間（ミリ秒単位）。

型	デフォルト
数値	`300`

`height`

画像コンポーネントの高さ。

型
数値

`loadingIndicatorSource`

sourceと同様に、このプロパティは、画像の読み込みインジケーターをレンダリングするために使用されるリソースを表します。読み込みインジケーターは、画像が表示される準備が整うまで（通常は画像のダウンロード後）表示されます。

型
ImageSource（`uri`のみ）、数値

`onError`

読み込みエラー時に呼び出されます。

型
(`{nativeEvent: {error} }`) => void

`onLayout`

マウント時とレイアウト変更時に呼び出されます。

型
`({nativeEvent: LayoutEvent} => void`

`onLoad`

読み込みが正常に完了したときに呼び出されます。

例：onLoad={({nativeEvent: {source: {width, height}}}) => setImageRealSize({width, height})}

型
`({nativeEvent: ImageLoadEvent} => void`

`onLoadEnd`

読み込みが成功または失敗したときに呼び出されます。

型
() => void

`onLoadStart`

読み込み開始時に呼び出されます。

例：onLoadStart={() => this.setState({loading: true})}

型
() => void

`onPartialLoad`
iOS

画像の部分的な読み込みが完了したときに呼び出されます。「部分的な読み込み」を構成するものの定義はローダー固有ですが、これはプログレッシブJPEG読み込みを目的としています。

型
() => void

`onProgress`

ダウンロードの進行状況で呼び出されます。

型
(`{nativeEvent: {loaded, total} }`) => void

`progressiveRenderingEnabled`
Android

trueの場合、プログレッシブJPEGストリーミングを有効にします - https://frescolib.org/docs/progressive-jpegs.

型	デフォルト
bool	`false`

`referrerPolicy`

リソースのフェッチ時に使用するリファラーを示す文字列です。画像リクエストのReferrer-Policyヘッダーの値を設定します。HTMLのreferrerpolicy属性と同様に機能します。

型	デフォルト
enum(`'no-referrer'`, `'no-referrer-when-downgrade'`, `'origin'`, `'origin-when-cross-origin'`, `'same-origin'`, `'strict-origin'`, `'strict-origin-when-cross-origin'`, `'unsafe-url'`)	`'strict-origin-when-cross-origin'`

`resizeMethod`
Android

画像の寸法が画像ビューの寸法と異なる場合に画像のサイズを変更するために使用するメカニズムです。デフォルトはautoです。

auto：ヒューリスティックを使用してresizeとscaleのどちらかを選択します。
resize：メモリ内のエンコードされた画像をデコードする前に変更するソフトウェア操作です。画像がビューよりもはるかに大きい場合は、scaleの代わりにこれを使用する必要があります。
scale：画像が縮小または拡大されて描画されます。resizeと比較して、scaleは高速（通常はハードウェアアクセラレーション）で、より高品質の画像を生成します。これは、画像がビューよりも小さい場合に使用してください。画像がビューよりもわずかに大きい場合にも使用してください。
none：サンプリングは実行されず、画像はフル解像度で表示されます。これは、メモリを大量に消費する画像をレンダリングしようとするとAndroidがランタイム例外をスローするため、まれな状況でのみ使用してください。

resizeとscaleの詳細については、https://frescolib.org/docs/resizingを参照してください。

型	デフォルト
enum(`'auto'`, `'resize'`, `'scale'`, `'none'`)	`'auto'`

`resizeMode`

フレームが生の画像寸法と一致しない場合に画像のサイズを変更する方法を決定します。デフォルトはcoverです。

cover：画像のアスペクト比を維持するように画像を均一にスケールし、
- 画像の両方の寸法（幅と高さ）がビューの対応する寸法（パディングを除く）以上になるようにします。
- スケールされた画像の少なくとも1つの寸法が、ビューの対応する寸法（パディングを除く）と等しくなります。
contain：画像のアスペクト比を維持するように画像を均一にスケールし、画像の両方の寸法（幅と高さ）がビューの対応する寸法（パディングを除く）以下になるようにします。
stretch：幅と高さを個別にスケールします。これにより、srcのアスペクト比が変更される可能性があります。
repeat：画像を繰り返し表示してビューのフレームを覆います。画像のサイズとアスペクト比は維持されます。ただし、ビューよりも大きい場合は、ビューに収まるように均一に縮小されます。
center：ビューの両方の寸法に沿って画像を中央に配置します。画像がビューよりも大きい場合は、ビューに収まるように均一に縮小します。

型	デフォルト
enum(`'cover'`, `'contain'`, `'stretch'`, `'repeat'`, `'center'`)	`'cover'`

`resizeMultiplier`
Android

resizeMethodがresizeに設定されている場合、目的の寸法はこの値で乗算されます。残りのリサイズ操作にはscaleメソッドが使用されます。デフォルトの1.0は、ビットマップのサイズが目的の寸法に合うように設計されていることを意味します。1.0より大きい乗算子は、リサイズオプションを目的の寸法より大きく設定し、結果として得られるビットマップはハードウェアサイズから縮小されます。デフォルトは1.0です。

このプロパティは、目的の寸法が非常に小さく、ソース画像がかなり大きい場合に最も役立ちます。resizeリサイズメソッドはダウンサンプリングを実行し、ソース画像と目的の画像サイズの間に大幅な画質の低下が生じ、多くの場合、ぼやけた画像になります。乗算子を使用することで、デコードされた画像はターゲットサイズよりもわずかに大きくなりますが、ソース画像（ソース画像が十分に大きい場合）よりも小さくなります。これにより、エイリアシングアーチファクトが乗算された画像でのスケーリング操作を通じて擬似的な品質を生み出します。

ソース画像の寸法が200x200で、目的の寸法が24x24の場合、resizeMultiplierを2.0に設定すると、Frescoは画像を48x48にダウンサンプリングします。Frescoは最も近い2の累乗（つまり、50x50）を選択し、そのサイズのビットマップに画像をデコードします。乗算子がない場合、最も近い2の累乗は25x25になります。結果の画像はシステムによって縮小されます。

型	デフォルト
数値	`1.0`

`source`

画像ソース（リモートURLまたはローカルファイルリソース）。

このプロパティには、幅と高さ、およびスケール/その他のURI引数を指定して複数のリモートURLを含めることもできます。ネイティブ側は、画像コンテナの測定サイズに基づいて表示する最適なuriを選択します。cacheプロパティを追加して、ネットワークリクエストがローカルキャッシュとどのようにやり取りするかを制御できます。（詳細については、「画像のキャッシュ制御」を参照してください）。

現在サポートされているフォーマットは、png、jpg、jpeg、bmp、gif、webp、psd（iOSのみ）です。さらに、iOSはいくつかのRAW画像形式をサポートしています。サポートされているカメラモデルの最新リストについては、Appleのドキュメントを参照してください（iOS 12の場合は、https://support.apple.com/en-ca/HT208967を参照してください）。

webp形式は、JavaScriptコードにバンドルされている場合にのみiOSでサポートされることにご注意ください。

型
ImageSource

`src`

画像のリモートURLを表す文字列。このプロパティはsourceプロパティよりも優先されます。

例: src={'https://reactnative.dokyumento.jp/img/tiny_logo.png'}

型
文字列

`srcSet`

考えられる候補画像ソースのカンマ区切りのリストを表す文字列。各画像ソースには、画像のURLとピクセル密度記述子が含まれています。記述子が指定されていない場合は、1xの記述子がデフォルトになります。

srcSetに1x記述子が含まれていない場合、srcの値が1x記述子付きの画像ソースとして使用されます（提供されている場合）。

このプロパティは、srcプロパティとsourceプロパティの両方よりも優先されます。

例: srcSet={'https://reactnative.dokyumento.jp/img/tiny_logo.png 1x, https://reactnative.dokyumento.jp/img/header_logo.svg 2x'}

型
文字列

`style`

型
画像スタイルプロパティ、レイアウトプロパティ、シャドウプロパティ、変換

`testID`

UIオートメーションテストスクリプトで使用されるこの要素の一意の識別子。

型
文字列

`tintColor`

すべての非透過ピクセルの色をtintColorに変更します。

型
色

`width`

画像コンポーネントの幅。

型
数値

メソッド

`abortPrefetch()`
Android

static abortPrefetch(requestId: number);

プリフェッチリクエストの中断。

パラメータ

名前	型	説明
`requestId` 必須	数値	`prefetch()`によって返されるリクエストID。

`getSize()`

static getSize(
  uri: string,
  success: (width: number, height: number) => void,
  failure?: (error: any) => void,
): any;

表示する前に画像の幅と高さ（ピクセル単位）を取得します。画像が見つからない場合、またはダウンロードに失敗した場合は、このメソッドは失敗する可能性があります。

画像の寸法を取得するには、最初に画像をロードまたはダウンロードする必要がある場合があります。その後、キャッシュされます。これは、原則としてこのメソッドを使用して画像をプリロードできることを意味しますが、その目的には最適化されておらず、将来、画像データを完全にロード/ダウンロードしない方法で実装される可能性があります。画像をプリロードするための適切でサポートされている方法は、別のAPIとして提供されます。

パラメータ

名前	型	説明
`uri` 必須	文字列	画像の場所。
`success` 必須	関数	画像が正常に見つかり、幅と高さが取得された場合に呼び出される関数。
`failure`	関数	画像の取得に失敗するなど、エラーが発生した場合に呼び出される関数。

`getSizeWithHeaders()`

static getSizeWithHeaders(
  uri: string,
  headers: {[index: string]: string},
  success: (width: number, height: number) => void,
  failure?: (error: any) => void,
): any;

リクエストのヘッダーを提供できる機能を使用して、表示する前に画像の幅と高さ（ピクセル単位）を取得します。画像が見つからない場合、またはダウンロードに失敗した場合は、このメソッドは失敗する可能性があります。また、静的な画像リソースでは機能しません。

パラメータ

名前	型	説明
`uri` 必須	文字列	画像の場所。
`headers` 必須	オブジェクト	リクエストのヘッダー。
`success` 必須	関数	画像が正常に見つかり、幅と高さが取得された場合に呼び出される関数。
`failure`	関数	画像の取得に失敗するなど、エラーが発生した場合に呼び出される関数。

`prefetch()`

await Image.prefetch(url);

後で使用する目的でリモート画像をディスクキャッシュにダウンロードすることでプリフェッチします。ブール値に解決されるPromiseを返します。

パラメータ

名前	型	説明
`url` 必須	文字列	画像のリモートの場所。
`callback`	関数 Android	`requestId`を使用して呼び出される関数。

`queryCache()`

static queryCache(
  urls: string[],
): Promise<Record<string, 'memory' | 'disk' | 'disk/memory'>>;

キャッシュの照会を実行します。「disk」、「memory」、または「disk/memory」などのURLからキャッシュの状態へのマッピングに解決されるPromiseを返します。リクエストされたURLがマッピングに含まれていない場合、キャッシュに存在しないことを意味します。

パラメータ

名前	型	説明
`urls` 必須	配列	キャッシュを確認する画像URLのリスト。

`resolveAssetSource()`

static resolveAssetSource(source: ImageSourcePropType): {
  height: number;
  width: number;
  scale: number;
  uri: string;
};

アセット参照を、uri、scale、width、heightのプロパティを持つオブジェクトに解決します。

パラメータ

名前	型	説明
`source` 必須	ImageSource、数値	数値（`require('./foo.png')`によって返される不透明な型）またはImageSource。

型定義

`ImageCacheEnum`
iOS

キャッシュされた応答のキャッシュ処理または戦略を設定するために使用できる列挙型。

型	デフォルト
列挙型（`'default'`、`'reload'`、`'force-cache'`、`'only-if-cached'`）	`'default'`

default：ネイティブプラットフォームのデフォルト戦略を使用します。
reload：URLのデータは元のソースからロードされます。既存のキャッシュデータを使用してURLロードリクエストを満たすことはできません。
force-cache：既存のキャッシュデータは、その年齢または有効期限に関係なく、リクエストを満たすために使用されます。リクエストに対応するキャッシュに既存のデータがない場合、データは元のソースからロードされます。
only-if-cached：既存のキャッシュデータは、その年齢または有効期限に関係なく、リクエストを満たすために使用されます。URLロードリクエストに対応するキャッシュに既存のデータがない場合、元のソースからデータをロードしようとはせず、ロードは失敗したと見なされます。

`ImageLoadEvent`

onLoadコールバックで返されるオブジェクト。

型
オブジェクト

プロパティ

名前	型	説明
`source`	オブジェクト	ソースオブジェクト

ソースオブジェクト

プロパティ

名前	型	説明
`width`	数値	ロードされた画像の幅。
`height`	数値	ロードされた画像の高さ。
`uri`	文字列	画像のリソース識別子を表す文字列。

`ImageSource`

型
オブジェクト、オブジェクトの配列、数値

プロパティ（オブジェクトまたはオブジェクトの配列として渡す場合）

名前	型	説明
`uri`	文字列	画像のリソース識別子を表す文字列。これは、httpアドレス、ローカルファイルパス、または静的画像リソースの名前です。
`width`	数値	ビルド時に既知の場合に指定できます。その場合、その値を使用してデフォルトの`<Image/>`コンポーネントの寸法が設定されます。
`height`	数値	ビルド時に既知の場合に指定できます。その場合、その値を使用してデフォルトの`<Image/>`コンポーネントの寸法が設定されます。
`scale`	数値	画像のスケールファクターを示すために使用されます。指定されていない場合は`1.0`がデフォルトになり、1つの画像ピクセルが1つのディスプレイポイント/DIPに相当することを意味します。
`bundle` iOS	文字列	画像が含まれているiOSアセットバンドル。設定されていない場合は`[NSBundle mainBundle]`がデフォルトになります。
`method`	文字列	使用するHTTPメソッド。指定されていない場合は`'GET'`がデフォルトになります。
`headers`	オブジェクト	リモート画像のリクエストと一緒に送信するHTTPヘッダーを表すオブジェクト。
`body`	文字列	リクエストと共に送信するHTTPボディ。これは有効なUTF-8文字列でなければならず、追加のエンコーディング（例：URLエスケープまたはbase64）を適用せずに、指定どおりに送信されます。
`cache` iOS	`ImageCacheEnum`	リクエストがキャッシュされた応答をどのように処理するかを決定します。

数値を渡す場合

number - require('./image.jpg')のようなものによって返される不透明な型。

例​

AndroidでのGIFとWebPのサポート​

参照

プロパティ​

Viewのプロパティ​

accessible​

accessibilityLabel​

alt​

blurRadius​

capInsets iOS​

crossOrigin​

defaultSource​

fadeDuration Android​

height​

loadingIndicatorSource​

onError​

onLayout​

onLoad​

onLoadEnd​

onLoadStart​

onPartialLoad iOS​

onProgress​

progressiveRenderingEnabled Android​

referrerPolicy​

resizeMethod Android​

resizeMode​

resizeMultiplier Android​

source​

src​

srcSet​

style​

testID​

tintColor​

width​

メソッド​

abortPrefetch() Android​

getSize()​

getSizeWithHeaders()​

prefetch()​

queryCache()​

resolveAssetSource()​

型定義​

ImageCacheEnumiOS​

ImageLoadEvent​

ソースオブジェクト​

ImageSource​

例

AndroidでのGIFとWebPのサポート

プロパティ

Viewのプロパティ

`accessible`

`accessibilityLabel`

`alt`

`blurRadius`

`capInsets`
iOS

`crossOrigin`

`defaultSource`

`fadeDuration`
Android

`height`

`loadingIndicatorSource`

`onError`

`onLayout`

`onLoad`

`onLoadEnd`

`onLoadStart`

`onPartialLoad`
iOS

`onProgress`

`progressiveRenderingEnabled`
Android

`referrerPolicy`

`resizeMethod`
Android

`resizeMode`

`resizeMultiplier`
Android

`source`

`src`

`srcSet`

`style`

`testID`

`tintColor`

`width`

メソッド

`abortPrefetch()`
Android

`getSize()`

`getSizeWithHeaders()`

`prefetch()`

`queryCache()`

`resolveAssetSource()`

型定義

`ImageCacheEnum`
iOS

`ImageLoadEvent`

ソースオブジェクト

`ImageSource`