---
title: "JSS React Nativeサンプルアプリでの資産管理"
slug: "handling-assets-in-the-jss-react-native-sample-app"
abstract: "JSS React Nativeが資産をどのように扱うかの概要"
---
# JSS React Nativeサンプルアプリでの資産管理

JSS React Nativeアプリケーションには2種類の資産があります:

-   アプリケーション内にリソースとして埋め込まれた静的アセット。
-   リモートURLから取得したネットワーク資産。

[切断モードで](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/run-a-jss-for-react-native-app-in-disconnected-mode.html "Run a JSS for React Native app in disconnected mode")開発する場合は、将来のネットワーク資産を静的資産として扱うことをおすすめします。例えば[、コードファーストのアプローチ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/code-first-development-workflow.html "Code-first development workflow")を取っている場合、コードベース内に資産が存在し、最終的に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リクエストで取得した画像の参照を削除できます。