は、ネイティブコードの下に与えられたイメージソース

Question

のために働いていないが必要な反応ネイティブ反応

 
Requiring unknown module "../../images/Foo.png".If you are sure the module is there, try restarting the packager or running "npm install". 

を文句を言うしかし、私はrequireコールで画像ソースパスをハードコーディング場合、同じコードが正常に動作します。

コードが機能しない：アイコン名を決定するメソッド呼び出しがあります。 require('../../images/'+imageIconNameFor(prediction.type)行に注目してください。

const PredictionItem = ({prediction}) => (
<TouchableHighlight onPress={() => itemPressed()}> 
    <View style={styles.predictionItem}> 
     <Image style={styles.predictionIcon} source={require('../../images/'+imageIconNameFor(prediction.type))}></Image> 
    </View> 
</TouchableHighlight> 
); 
function imageIconNameFor(predictionType) { 
    return "Foo.png"; 
} 

はコード作業：代わりに、私はrequireコールにアイコン名をハードコーディングすると、アイコン名を決定するためのメソッドを呼び出し、それが正常に動作します。 require('../../images/Foo.png')行に注目してください。

const PredictionItem = ({prediction}) => (
<TouchableHighlight onPress={() => itemPressed()}> 
    <View style={styles.predictionItem}> 
     <Image style={styles.predictionIcon} source={require('../../images/Foo.png')}></Image> 
    </View> 
</TouchableHighlight> 
); 
function imageIconNameFor(predictionType) { 
    return "Foo.png"; 
} 

文字列を連結してイメージソースを構築すると、別の動作が発生するのはなぜですか？
なぜrequire('../../images/'+imageIconNameFor(prediction.type)は画像をレンダリングできませんが、require('../../images/Foo.png')は問題なく動作しますか？

メソッド呼び出しは問題ではないことに注意してください。エラーメッセージには、メソッド呼び出しを使用して計算されたイメージの完全パスが含まれます。完全な経路にもかかわらず、ネイティブの反応は、欠落しているモジュールに不満を抱いています。
リアクションネイティブバージョンは0.37.0です。私はこれをios-simulatorでテストしました。

Answer 1

残念なことに、これは反応ネイティブパッケージャがどのように動作するかを示しています。要求のイメージ名は静的に知っている必要があります。公式docsの例です：

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

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

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