反應原生要求不工作了下面給出的代碼圖像源

Question

，反應原生抱怨

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

但相同的代碼工作正常，如果我硬編碼在require調用圖像源路徑。

代碼不起作用：有一個方法調用來確定圖標名稱。請注意0​​一行。

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調用硬編碼的圖標名稱，它工作正常。請注意0​​一行。

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模擬器上測試了這個。

Answer 1

不幸的是，這是react-native包裝工程師的工作原理，require中的圖像名稱必須靜態識別。以下是官方示例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} />