React Native で動的に名前が付けられた画像を表示するにはどうすればよいですか?

React Native の動的イメージ名: Image Require モジュールの使用

React Native を使用する場合、Image モジュールを使用するとイメージを表示できますあなたのアプリケーションで。通常、イメージは、require('image!name-of-the-asset') 構文を使用して静的に参照できます。

しかし、動的なイメージ名を使用しようとすると、一般的な疑問が生じます。たとえば、「avatar」などの画像名を表す動的文字列がある場合、次のコードは機能しません:

<Image source={require('image!' + 'avatar')} />

これにより、「不明なモジュール "image!avatar が必要です"」というエラーが発生します。 "".

説明

React Native によるドキュメントでは、静的リソースは前述の静的構文を使用して直接参照する必要があります。画像の動的な読み込みはサポートされていません。

// Correct:
<Image source={require('image!my-icon')} />

// Incorrect:
var icon = 'my-icon-active';
<Image source={require('image!' + icon)} />

代替ソリューション

動的な画像名を使用する必要がある場合は、画像アセットを別の配列に保存するか、オブジェクトを取得し、Image コンポーネントのソース prop を使用してそれらを参照します。

const images = {
  avatar: require('image!avatar'),
  logo: require('image!logo'),
};

<Image source={images[dynamicImageName]} />

Additional注

iOS の場合は、Xcode プロジェクト内のアセット カタログに画像を忘れずに含める必要があります。これは、React Native アプリケーションで画像が正しく参照されるために必要です。

以上がReact Native で動的に名前が付けられた画像を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。