現在、React Native を使用してテスト アプリを構築しています。これまでのところ、Image モジュールは正常に動作しています。
たとえば、 という名前の画像がある場合avatar、以下のコード スニペットは正常に機能します。
<Image source={require('image!avatar')} />
しかし、これを動的な文字列に変更すると、
<Image source={require('image!' + 'avatar')} />
次のエラーが発生します:
不明なモジュール「image!avatar」が必要です。モジュールが存在することが確実な場合は、パッケージャーを再起動してください。
明らかに、これは不自然な例ですが、動的なイメージ名は重要です。React Native は動的なイメージ名をサポートしていないのでしょうか?
ベストアンサー1
これについては、ドキュメントの「静的リソース「：」
バンドル内の画像を参照する唯一の方法は、ソースに require('image!name-of-the-asset') と文字通り記述することです。
// 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 バンドルに画像を追加することも忘れないでください。