JSS React Nativeサンプルアプリでの資産管理
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
JSS React Nativeアプリケーションには2種類の資産があります:
- アプリケーション内にリソースとして埋め込まれた静的アセット。
- リモートURLから取得したネットワーク資産。
切断モードで開発する場合は、将来のネットワーク資産を静的資産として扱うことをおすすめします。例えば、コードファーストのアプローチを取っている場合、コードベース内に資産が存在し、最終的にSitecoreにインポートするでしょう。その時点で、その資産はネットワーク資産となります。ただし、その前にすべての資産を静的資産として扱った状態でアプリをテストしておくと良いでしょう。
React Nativeでは、静的資産はコード内でrequire()文で参照しなければならず、React Nativeパッケージャがビルド時にアセットを参照し、アプリバンドルに組み込めるようにします。アセットパスは静的でなければならず、require() 関数に渡されるパスに動的値を使ってはいけません。
例えば、/data/routes/en.jsonファイルで提供される切断されたデータには、/data/media/img/sc_logo.png画像ファイルを参照する画像フィールドが含まれています。React Native Imageコンポーネントがその画像を静的に参照する必要がある場合、実行時に実行できない文であるrequire('/data/media/img/sc_logo.png')で要求する必要があります。
この制限を回避するには、静的アセットを切り離したモードでマッピングし、実行時にそれらのアセットへの参照を交換する必要があります。
/assets/images.disconnected.jsファイルのrequire()ステートメントに静的アセットパスをマッピングできます。ファイルは画像の位置と対応する静的require()ステートメントに対応するキーを持つオブジェクトをエクスポートします。
切断されたルートデータを取得する際、アプリケーションはデータを処理し、遭遇した静的な画像パスを先述の地図の対応値に置き換えます。実装の詳細は/src/dataService/dataService.disconnected.jsファイルを参照できます。
接続型または接続型トンネルモードで作業する場合は、/assets/images.connected.jsマップを使い、HTTPリクエストで取得した画像の参照を削除できます。