react-native-fast-image

@amazon-devices/react-native-fast-imageライブラリは、パフォーマンスに優れた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ライブラリの依存関係を追加します。該当するReact Nativeバージョンのタブを選択してください。

React Native 0.72
React Native 0.83

"dependencies": {
   ...
   "@amazon-devices/react-native-fast-image": "~3.0.0"
}

"dependencies": {
   ...
   "@amazon-devices/react-native-fast-image": "~4.0.0"
}

npm installコマンドを使用して、依存関係を再インストールします。

例

import FastImage from '@amazon-devices/react-native-fast-image'

export const App = () => (
    <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（''など）。	なし
`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
source.cache
tintColor
defaultSource
onFastImageProgress（依存関係のImage.onProgressに問題があります。）

下位互換性の問題

v0.12リリース以降のOSには、amzn/react-native-fast-image（npmパッケージ）バージョンとの互換性がありません。古いバージョンの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がハードコードされていないことを確認します。アプリが最新のパッチを取得できるように、SemVerバージョン^3.0.0を使用してください。
package-lock.jsonを削除して、ロックされているfast-imageバージョンが削除されるようにします。 package-lock.jsonがほかの依存関係のロックにも使用されている場合は、このファイルから手動で@amazon-devices/react-native-fast-imageのエントリを削除することもできます。
node_modulesフォルダを削除して、npmでキャッシュされている古いバージョンが取得されないようにます。
再ビルドします。

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

NPMパッケージのバージョン	Vega SDKバージョン	Vega OSバージョン	React Nativeバージョン
~3.0.x+8.6.3	0.23以前	`OS 1.1 (1401010009820)`以前	0.72
~4.0.0	0.24	`OS 1.2 (2101020054720)`	0.72、0.83

Vegaライブラリとサービス

インストール

例

APIリファレンス

コンポーネントAPI

メソッド

Vegaでの例外

下位互換性の問題

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

関連リソース

​インストール

​例

​APIリファレンス

​コンポーネントAPI

​メソッド

​Vegaでの例外

​下位互換性の問題

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

​関連リソース

インストール

例

APIリファレンス

コンポーネントAPI

メソッド

Vegaでの例外

下位互換性の問題

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

関連リソース