[解決済み] React Native - Dynamic Namesを使用した画像要求モジュール

質問

現在、React Nativeを使用してテストアプリを作成しています。Imageモジュールは今のところ問題なく動作しています。

例えば avatar という名前の画像があった場合、以下のコードスニペットは正常に動作します。

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

しかし、これを動的な文字列に変更すると、次のようになります。

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

エラーが出ます。

不明なモジュール "image!avatar" を要求しています。モジュールがあることを確認している場合、パッケージャを再起動してみてください。

明らかに、これは作為的な例ですが、動的な画像名は重要です。React Native は動的な画像名をサポートしていないのでしょうか？

どのように解決するのですか？

これは、ドキュメントの " のセクションでカバーされています。 静的リソース "のセクションで説明されています。

バンドル内の画像を参照するために唯一許された方法は、文字通りソースに 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バンドルに追加することを忘れないようにする必要があります（コメントからすると、すでに行っているようですが）。

http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-app-using-images-xcassets