ReactNativeのアプリで、ImageSetの画像の読み込みに失敗した。
読み込む画像の名前を見直したことで解決したので、解決方法をまとめる。
iOSアプリ詳しくないので間違ってたらツッコミお願いします。。
[2015/04/11 追記]
issueありました。。
- [require('image!name') assets should use virtual/Image Set name instead of filesystem file names #365]
(https://github.com/facebook/react-native/issues/365)
TL;DR
ImageSetの名前と、登録する画像ファイル名は、大文字小文字含めて一致させること!
<ImageSetの名前(大文字小文字一致)>+<なんでもいい>+<拡張子>
発生した問題
Imageコンポーネントにsource={require('image!<名前>')}を指定すると、以下のエラーになった。
Requiring unknown module "image!<名前>" .
参考にしたstackoverflowのページに、発生した問題のスクリーンショットがあるので、そちらを見れば分かやすいです。
ソース
読み込もうとしたImageSetは"aws_icon_iam"という名前。登録したファイル名は以下通り。
- Deployment_Management_IAM.png
- Deployment_Management_IAM_1.png
- Deployment_Management_IAM_2.png
解決
この回答に従った。
[Trouble requiring image module in React Native - stackoverflow]
(http://stackoverflow.com/questions/29308937/trouble-requiring-image-module-in-react-native/29381280#29381280)
I had similar problem, then renamed the image files in file system under the xcode project's Images.xcassets directories with suffixes and capitalization to match the image I'm loading.
For example, if source={require('image!Villagers')} it required the image files named precisely as Villagers.png, Villagers@2x.png and Villagers@3x.png. If the '@3x' part of filename wasn't there, the image would not get found.
回答によれば、(ファイルシステム上の)ファイル名と、ImageSetの名前が(大文字小文字含め)一致しないと駄目らしい。
そのため、以下のようにファイル名とImageSetの名前を同じにしたところ、問題が解決した。
差分
diff --git a/iOS/Images.xcassets/aws_icon_iam.imageset/Contents.json b/iOS/Images.xcassets/aws_icon_iam.imageset/Contents.json
index 5d728bb..2557241 100644
--- a/iOS/Images.xcassets/aws_icon_iam.imageset/Contents.json
+++ b/iOS/Images.xcassets/aws_icon_iam.imageset/Contents.json
@@ -3,21 +3,21 @@
{
"idiom" : "universal",
"scale" : "1x",
- "filename" : "Deployment_Management_IAM-1.png"
+ "filename" : "aws_icon_iam.png"
},
{
"idiom" : "universal",
"scale" : "2x",
- "filename" : "Deployment_Management_IAM.png"
+ "filename" : "aws_icon_iam@2x.png"
},
{
"idiom" : "universal",
"scale" : "3x",
- "filename" : "Deployment_Management_IAM-2.png"
+ "filename" : "aws_icon_iam@3x.png"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
-}
補足
- 大文字小文字の一致は必要。"aws_icon_iam"というImageSetに対し、"aws_icon_Iam.png","aws_icon_Iam@2x.png","aws_icon_Iam@3x.png"を登録したら同じエラーが発生した。
- ファイル名の末尾は"_1", "@2x", "__1"などにしても大丈夫だった。