react-native-fast-imageバージョン3.0.0

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

@amazon-devices/react-native-fast-imageバージョン3.0.0は、パフォーマンスに優れたReact Native画像コンポーネントを提供するreact-native-fast-image（英語のみ）をVegaでサポートします。

React NativeのImageコンポーネントは、ブラウザと同様に画像キャッシュを処理します。サーバーが画像の適切なキャッシュ制御ヘッダーを返す場合、ブラウザーに表示される組み込みのキャッシュ動作になります。

次のことにも気付くかもしれません。

ちらつき
キャッシュの失敗
キャッシュからの読み込みパフォーマンスが低い
全般的なパフォーマンスが低い

FastImageはImageを置き換えるもので、ウェブ以外のプラットフォームでこれらの問題を解決します。

このライブラリはアプリにデプロイされ、別途インストールプロセスを必要とすることなくVega向けReact Nativeアプリで利用できます。ライブラリは自動リンクされており、アプリは実行時にリンクします。このライブラリは、そのライブラリがビルドされたVega向けReact Nativeのバージョンとのみ互換性があることが保証されています。

アプリのVega向けReact Nativeのバージョンをアップレベルするときは、ライブラリの依存関係をアップレベルするベストプラクティスを検討してください。

このライブラリとAPIリファレンスの詳細については、ドキュメントを参照してください。 README.md（英語のみ）を参照してください。

インストール

package.jsonファイルにJavaScriptライブラリの依存関係を追加します。
クリップボードにコピーしました。
```
"dependencies": {
   ...
   "@amazon-devices/react-native-fast-image": "~3.0.0"
}
```
npm 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}
    />
)

APIリファレンス

コンポーネント

プロパティ	説明	デフォルト	サポートあり
`source`	読み込むリモート画像のソース。	なし	✅はい
`source.uri`	画像を読み込むリモートURL（例：https://facebook.github.io/react/img/logo_og.png）。	なし	✅はい
`source.priority`	`FastImage.priority.low` - 低い優先度 `FastImage.priority.normal` - 標準の優先度 `FastImage.priority.high` - 高い優先度	`FastImage.priority.normal`	✅はい
`resizeMode`	`FastImage.resizeMode.contain` - 幅と高さがビューの対応する寸法（パディングを除く）と同じかそれ以下になるように（縦横比を維持して）画像を均一に拡大縮小します。画像全体が表示されるようにしますが、空きスペースが残る場合があります。 `FastImage.resizeMode.cover` - 幅と高さがビューの対応するサイズ（パディングを除く）と同じかそれ以上になるように（縦横比を維持して）画像を均一に拡大縮小します。コンテナが完全に満たされるようにしますが、画像の一部が切り取られる場合があります。 `Fastimage.resizeMode.Stretch` - 幅と高さを個別にスケーリングします。これにより、srcのアスペクト比が変わる場合があります。 `FastImage.resizeMode.center` - 画像を拡大縮小せず、中央に保ちます。	`FastImage.resizeMode.cover`	✅はい
`onFastImageLoadStart`	画像の読み込みが開始されたときに呼び出されます。	なし	✅はい
`onFastImageLoad`	画像の取得が成功したときに呼び出されます。読み込まれた画像の幅と高さが渡されます。	なし	✅はい
`onFastImageError`	画像の取得でエラーが発生したときに呼び出されます。	なし	✅はい
`onFastImageLoadEnd`	成功かエラーかにかかわらず、画像の読み込みが完了したときに呼び出されます。	なし	✅はい
source.headers	認証されたリクエストにキーと値のペアのオブジェクトを渡すことができます。		❌いいえ
`source.cache`	キャッシュポリシーを設定します。		❌いいえ
`tintColor`	アイコンと画像を色付けします。		❌いいえ
`defaultSource`	メイン画像ソースの読み込み中にプレースホルダー画像を表示します。		❌いいえ
`onFastImageProgress`	画像の読み込みの進行状況を追跡します。依存関係`Image.onProgress`に問題があります。		❌いいえ

メソッド

メソッド	説明
`preLoad`	後で表示するために画像を事前に読み込みます。
`clearMemoryCache`	メモリキャッシュからすべての画像を消去します。
`clearDiskCache`	ディスクキャッシュからすべての画像を消去します。

既知の問題と制限事項

下位互換性の問題

v0.12リリース以降のOSには、amzn/react-native-fast-image（npmパッケージ）バージョン<=2.0.1726598878との互換性がありません。
v0.12+のOS（古いバージョンのnpmパッケージ）でアプリを実行すると、起動時にアプリがクラッシュします

Volta:Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'FastImageTurboModule' could not be found.Verify that a module by this name is registered in the native binary.

このクラッシュを回避するには、@amazon-devices/react-native-fast-imageの最新バージョンに対してアプリを再度ビルドする必要があります。
1. アプリのpackage.jsonが古いバージョンのfast-imageをハードコードしていないことを確認してください。
  
  SemVarバージョン^3.0.0を使用すると、アプリが最新のパッチを取得できるようになります。
2. package-lock.jsonを削除すると、ロックされているfast-imageバージョンがすべて削除されます。
  
  package-lock.jsonがほかの依存関係のロックにも使用されている場合は、このファイルから手動で@amazon-devices/react-native-fast-imageのエントリを削除することもできます。
3. node_modulesフォルダを削除して、npmで古いキャッシュされたバージョンが取得されないようにします。
4. アプリを再ビルドします。

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

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

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

Last updated: 2025年10月3日