expo-image

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

インストール

package.jsonファイルにJavaScriptライブラリの依存関係を追加します。該当するReact Nativeバージョンのタブを選択してください。

React Native 0.72
React Native 0.83

dependencies: {
    ...
    "@amazon-devices/expo-image": "~2.0.0",
}

dependencies: {
    ...
    "@amazon-devices/expo-image": "~3.0.0",
}

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`の場合、ビューがアクセシビリティ要素であることを示します。ビューがアクセシビリティ要素の場合、その子要素は、単一の選択可能なコンポーネントとしてグループ化されます。
`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'`効果の時間をミリ秒単位で表します。

メソッド

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

実装の詳細

SVGおよびアニメーションのソースはサポートされません。
cachePolicyプロパティは機能しません。
onProgressコールバックとonErrorコールバックはサポートされません。
Vegaでは、onLoadEnd、onLoadStart、onLoadが呼び出されないことがあります。

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

NPMパッケージのバージョン	Vega SDKバージョン	Vega OSバージョン	React Nativeバージョン
2.0.1758683737	0.23以前	`OS 1.1 (1401010009820)`以前	0.72
3.0.1+1.6.0	0.24	`OS 1.2 (2101020054720)`	0.72、0.83

Vegaライブラリとサービス

インストール

使用例

APIリファレンス

コンポーネント

Imageのプロパティ

メソッド

実装の詳細

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

関連リソース

​インストール

​使用例

​APIリファレンス

​コンポーネント

​Imageのプロパティ

​メソッド

​実装の詳細

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

​関連リソース

インストール

使用例

APIリファレンス

コンポーネント

Imageのプロパティ

メソッド

実装の詳細

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

関連リソース