Console

Settings

Sign out

Notifications

Alexa

Amazonアプリストア

Ring

AWS

ドキュメント

Support

My Cases

Console

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

ホーム

開発

設計と開発

公開

リファレンス

サポート

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

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

注：このページでは、Vega SDKバージョン0.20以前でサポートされるreact-native-fast-imageライブラリバージョン2.0.0について説明しています。このライブラリは、Vega SDKバージョン0.21以降は引き続きサポートされません。react-native-fast-imageバージョン3.0.0にアップグレードしてください。

@amazon-devices/react-native-fast-imageライブラリバージョン2.0.0は、パフォーマンスに優れたReact Native画像コンポーネントを使用してreact-native-fast-image（英語のみ）をVegaでサポートします。

React NativeのImageコンポーネントでは、ブラウザとほとんど同じような画像キャッシュの処理が行われます。サーバーが画像の適切なキャッシュ制御ヘッダーを返す場合、ブラウザーに表示される組み込みのキャッシュ動作になります。他のユーザーからは、次のような報告が寄せられています。

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

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

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

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

このライブラリとAPIの詳細については、FastImage GitHubリポジトリにあるREADME.md（英語のみ）を参照してください。

インストール

package.jsonファイルにJavaScriptライブラリの依存関係を追加します。
クリップボードにコピーしました。
```
"dependencies": {
   ...
   "@amazon-devices/react-native-fast-image": "~2.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` - 幅と高さを個別にスケーリングします。これにより、srcのアスペクト比が変わる場合があります。 `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に問題があります。）

下位互換性の問題

Vega OSバージョンv0.12、OS 1.1（201010334050）以降のバージョンは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バージョン~2.0.0を使用すると、アプリに最新のパッチを適用できます。
package-lock.jsonを削除すると、ロックされているfast-imageバージョンがすべて削除されます。

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

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

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

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

Last updated: 2025年9月30日