React Native の Image Require モジュールに画像を動的にロードするにはどうすればよいですか?

React Native Image Require モジュールの動的画像名

React Native では、Image Require モジュールを使用して開発者が静的画像リソースをアプリケーション。このモジュールは静的画像ファイル名では問題なく動作しますが、動的な画像名ではエラーが発生することがよくあります。

問題:

開発者が画像ファイル名に動的な文字列を使用しようとしました:

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

ただし、図に示すように、React Native は不明なモジュールを示すエラーをスローします以下:

Requiring unknown module "image!avatar". If you are sure the module is there, try restarting the packager.

解決策:

React Native ドキュメントの「静的リソース」セクションによると、イメージ名はソース属性で静的に指定する必要があります:

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

画像ファイル名に動的文字列を使用することは明示的に行われます推奨されない:

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

代わりに、解決策は条件付きレンダリングを利用して静的画像のファイル名を変数に割り当てることです:

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

追加の考慮事項:

• 静的画像リソースは、Xcode の xcassets バンドルに追加する必要があります
• React Native アプリへの静的リソースの追加の詳細については、http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your を参照してください。 -app-using-images-xcassets.

以上がReact Native の Image Require モジュールに画像を動的にロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。