Console

Settings

Sign out

Notifications

Alexa

Amazonアプリストア

Ring

AWS

ドキュメント

Support

My Cases

Console

Vega開発者向けドキュメント

ホーム

開発

設計と開発

公開

リファレンス

サポート

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リファレンス

コンポーネント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` - 幅と高さを別々に拡大／縮小します。これにより、ソースの縦横比が変わることがあります。 `FastImage.resizeMode.center` - 画像の拡大／縮小は行わず、中央に配置します。	`FastImage.resizeMode.cover`
`onFastImageLoadStart`	画像の読み込みが開始されたときに呼び出されます。	なし
`onFastImageLoad`	画像の取得が成功したときに呼び出されます。読み込まれた画像の幅と高さが渡されます。	なし
`onFastImageError`	画像の取得でエラーが発生したときに呼び出されます。	なし
`onFastImageLoadEnd`	成功かエラーかにかかわらず、画像の読み込みが完了したときに呼び出されます。	なし

メソッド

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

既知の問題と制限事項

Vega向けReact Nativeライブラリには、APIサポートに関していくつかの例外があります。以下の機能はVegaプラットフォームではサポートされていません。

source.headers
source.cache
tintColor
defaultSource
onFastImageProgress（依存関係のImage.onProgressに問題があります。）

下位互換性の問題

v0.12リリース以降のOSには、amzn/react-native-fast-image（npmパッケージ）バージョン<=2.0.1726598878との互換性がありません。

古いバージョンのnpmパッケージに対してビルドされたアプリをv0.12+のOSで実行すると、起動時に次のクラッシュが発生します。

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の最新バージョンに対してアプリを再度ビルドする必要があります。

アプリのpackage.jsonが古いバージョンのfast-imageをハードコードしていないことを確認してください。

semvarバージョン^3.0.0を使用すると、アプリに最新のパッチを適用できます。
package-lock.jsonを削除すると、ロックされているfast-imageバージョンがすべて削除されます。

package-lock.jsonがほかの依存関係のロックにも使用されている場合は、このファイルから手動で@amazon-devices/react-native-fast-imageのエントリを削除することもできます。
node_modulesフォルダを削除して、npmで古いキャッシュされたバージョンが取得されないようにします。
アプリを再ビルドします。

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

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

その他のライブラリについては、サポート対象のサードパーティのライブラリとサービスを参照してください。

Last updated: 2025年10月3日