Console

Settings

Sign out

Notifications

Alexa

Amazonアプリストア

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バージョンとの間でのみ保証されます。

アプリのビルドに使用している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での例外

Vega向けReact Nativeライブラリには、APIサポートに関していくつかの例外があります。このセクションでは、これらの例外について説明します。

Vegaプラットフォームでは、source.headersはサポートされません。
Vegaプラットフォームでは、source.cacheはサポートされません。
Vegaプラットフォームでは、tintColorはサポートされません。
Vegaプラットフォームでは、defaultSourceはサポートされません。
Vegaプラットフォームでは、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をハードコードしていないことを確認してください。
1. 推奨 - アプリが最新のパッチを取得できるように、SemVerバージョン^3.0.0を使用します。
package-lock.jsonを削除すると、ロックされているfast-imageバージョンがすべて削除されます。
1. 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