expo-image

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、最新のリリースノートを参照してください。

@amazon-devices/expo-imageは、React NativeおよびExpoを対象に、クロスプラットフォーム対応のパフォーマンスに優れた画像コンポーネントを提供します。このライブラリでは、画像のプレースホルダーの軽量表現であるBlurHash（英語のみ）とThumbHash（英語のみ）がサポートされます。また、ソースが変更されたときの画像間の遷移もサポートされます。@amazon-devices/expo-imageには、CSSのobject-fitプロパティとobject-positionプロパティが実装されています。

インストール
例
APIリファレンス
既知の問題と制限事項
サポートされているバージョン
関連トピック

インストール

package.jsonファイルにJavaScriptライブラリの依存関係を追加します。
クリップボードにコピーしました。
```
 dependencies: {
     ...
     "@amazon-devices/expo-image": "~2.0.1",
 }
```
npm installコマンドを使用して、依存関係を再インストールします。

例

この例は、thumbhashプレースホルダーと複数のソースを含む画像を示しています。

クリップボードにコピーしました。

import React from 'react';
import {StyleSheet, View} from 'react-native';
import {Image} from '@amazon-devices/expo-image';

export const App = () => {
  return (
    <View style={styles.container}>
      <Image
        source={[
          'https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg',
          'https://climateforlife.pl/wp-content/uploads/2023/10/panda.png',
        ]}
        style={styles.image}
        placeholder="thumbhash:/1QcSHQRnh493V4dIh4eXh1h4kJUI"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
  },
  image: {
    width: 300,
    aspectRatio: 1,
  },
});

APIリファレンス

このライブラリとAPIリファレンスの詳細については、ドキュメントページを参照してください。 Expo公式ドキュメントのexpo-imageのページ（英語のみ）を参照してください。

コンポーネント

コンポーネント	説明
`Image`	画像を読み込んでレンダリングするクロスプラットフォームのReactコンポーネント。

Imageのプロパティ

プロパティ	説明	サポートあり
`accessibilityLabel`	ユーザーが画像を操作したときにスクリーンリーダーが読み上げるテキストです。ウェブではaltタグが設定され、ウェブクローラーとリンクトラバーサルに使用されます。	✅ はい
`accessible`	`true`の場合、ビューがアクセシビリティ要素であることを示します。ビューがアクセシビリティ要素の場合、その子要素は、選択可能な1つのコンポーネントとしてグループ化されます。	✅ はい
`allowDownscaling`	ビューコンテナのサイズに合わせて画像を縮小するかどうかを示します。デフォルトは`true`です。`false`に設定すると、特に大規模なアセットを扱う場合に、アプリのパフォーマンスに悪影響を及ぼす可能性があります。ただし、`false`に設定することで、画像のサイズ変更がスムーズになり、エンドユーザーは常に利用可能な最高品質のアセットにアクセスできるようになります。	✅ はい
`alt`	ユーザーが画像を操作したときにスクリーンリーダーが読み上げるテキストです。ウェブでは`alt`タグが設定され、ウェブクローラーとリンクトラバーサルに使用されます。これは`accessibilityLabel`のエイリアスです。	✅ はい
`blurRadius`	ぼかしの半径をポイント単位で表します。たとえば、`0`は、ぼかし効果が適用されないことを意味します。この効果はプレースホルダーには適用されません。	✅ はい
`contentFit`	コンテナに合わせて画像のサイズをどのように変更するかを決定します。画像は、「縦横比を維持する」や「最大スペースまで拡大する」など、さまざまな方法でコンテナ全体に表示できます。CSSの`object-fit`プロパティに似ています。	✅ はい
`contentPosition`	`contentFit`と組み合わせて使用することで、画像をコンテナ内のx/y座標でどのように配置するかを指定できます。CSSの`object-position`プロパティに相当します。	✅ はい
`defaultSource`	警告：非推奨。画像ソースのデフォルト値。React NativeのImageの`defaultSource`に対する互換性を提供します。代わりに`placeholder`プロパティを使用してください。	✅ はい
`fadeDuration`	警告：非推奨。React NativeのImageの`fadeDuration`に対する互換性を提供します。代わりに`transition`を使用して時間を指定してください。	✅ はい
`focusable`	このビューを非タッチ入力デバイスでフォーカス可能にするかどうかを指定します。たとえば、ハードウェアキーボードによるフォーカスを受け取るかどうかを示します。	✅ はい
`loadingIndicatorSource`	警告：非推奨。React NativeのImageの`loadingIndicatorSource`に対する互換性を提供します。代わりに`placeholder`プロパティを使用してください。	✅ はい
`onError`	画像の取得でエラーが発生したときに呼び出されます。	✅ はい
`onLoad`	画像の読み込みが正常に完了したときに呼び出されます。	✅ はい
`onLoadEnd`	画像の読み込みが成功または失敗したときに呼び出されます。	✅ はい
`onLoadStart`	画像の読み込みが開始されたときに呼び出されます。	✅ はい
`placeholder`	正しい画像の読み込み中にまだ画像が表示されていないときや、ソースが設定されていない場合に表示する画像。	✅ はい
`priority`	読み込みを完了する優先順位。複数の読み込みが一度にキューに追加された場合、優先順位の高い読み込みが最初に開始されます。優先順位はベストエフォートとして扱われ、読み込みが開始または終了する順序を保証するものではありません。	✅ はい
`recyclingKey`	最終的な画像の読み込みとレンダリングが行われる前に、画像ビューのコンテンツが空白またはプレースホルダーにリセットされます。`FlashList`などのビューをリサイクルして、新しいソースが完全に読み込まれる前に以前のソースが表示されないようにするのに役立ちます。	✅ はい
`resizeMode`	警告：非推奨。React NativeのImageの`resizeMode`に対する互換性を提供します。`"repeat"`オプションはサポートされていません。代わりに、より強力な`contentFit`プロパティと`contentPosition`プロパティを使用してください。	✅ はい
`source`	画像のソース。リモートURL、ローカルファイルリソース、`require()`関数の結果の数値のいずれかを指定できます。ソースの配列を指定すると、コンテナのサイズに最も適していて、かつ画面スケールに最も近いソースが選択されます。この場合は、`width`、`height`、`scale`の各プロパティを指定する必要があります。	✅ はい
`tintColor`	テンプレート画像（たとえば、不透明度だけが重要となるビットマップ画像）の色付けに使用される色。この色はすべての不透明ピクセルに適用され、画像の形状に取り込まれます。この効果はプレースホルダーには適用されません。	✅ はい
`transition`	画像ソースを切り替えたときに、画像ビューのコンテンツをどのように遷移させるかを記述します。数値として指定した場合、`「cross-dissolve」`効果の時間をミリ秒単位で表します。	✅ はい
`onProgress`	動画の再生やファイルのアップロードに使用されます。React Nativeドキュメント：https://reactnative.dev/docs/image#onprogress	❌いいえ

メソッド

メソッド	説明
`clearDiskCache`	ディスクキャッシュからすべての画像を非同期的に消去します。
`clearMemoryCache`	メモリに格納されているすべての画像を非同期的に消去します。
`prefetch`	指定されたURLの画像を事前に読み込み、後で画像ビューで使用できるようにします。事前に読み込まれた画像は常にディスクにキャッシュされるため、`disk`（デフォルト）または`memory-disk`キャッシュポリシーを使用する必要があります。

既知の問題と制限事項

このライブラリでは、SVGおよびアニメーションのソースはサポートされません。
Vegaでは、onLoadEnd、onLoadStart、onLoadが呼び出されないことがあります。

サポートされているバージョン

パッケージのバージョン	ベース	@amazon-devices/react-native-keplerバージョン
2.0.x	1.6.0	2.0.x

サポート対象のサードパーティのライブラリとサービス

Last updated: 2025年9月30日