「不明なモジュールが必要です」エラーを発生させずに React Native で画像を動的にロードするにはどうすればよいですか?

React Native の動的イメージの要件

React Native の Image モジュールを使用する場合、動的名を使用する必要があるときにイメージ名がどのように参照されるかを考慮することが重要です。

標準的なシナリオでは、require() 関数での静的イメージ名の使用は問題なく機能します。ただし、動的なイメージ名を使用すると、複雑な問題が発生する可能性があります。この問題は、require('image!' 'avatar') を使用して動的イメージ名の文字列を含めようとすると発生します。その結果、「不明なモジュールが必要です」というイライラするエラーが発生する可能性があります。

React Native の動的イメージ名のサポート

残念ながら、React Native のドキュメントによると、React Native を使用する場合には制限があります。動的な画像名。ドキュメントの「静的リソース」に特化したセクションでは、「バンドル内のイメージを参照するために許可される唯一の方法は、ソース内に文字通り require('image!name-of-the-asset') を記述することです」と明示的に記載されています。 」これは、単に文字列とイメージ名を連結して動的にすることはできないことを意味します。

動的イメージの要件の処理

この制限を回避するには、動的イメージ名を割り当てる必要があります。変数に。これを実現する方法は次のとおりです:

var icon = this.props.active ? require('image!my-icon-active') : require('image!my-icon-inactive');
<Image source={icon} />

あるいは、react-native パッケージのasset() ヘルパー関数を利用して画像を動的に要求することもできます:

import { asset } from 'react-native';

const dynamicImageSource = asset('image!' + icon);

<Image source={dynamicImageSource} />

これを覚えておいてください。どちらの方法でも、Xcode 内のアプリの xcassets バンドルに画像を追加する必要があります。

これらのガイドラインに従うことで、恐ろしい「不明なモジュールが必要です」エラーが発生することなく、React Native アプリケーションで動的イメージ名を効果的に利用できます。

以上が「不明なモジュールが必要です」エラーを発生させずに React Native で画像を動的にロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。