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要求を通じて取得されたイメージへの参照を削除できます。