無法通過本地資產迭代的陣營本地

Question

我試圖呈現滾動型圖像，像這樣：

renderIcons() 
{ 
    let activityImages= ['all','boat','camping','climbing','cycling','hiking','running','swimming','yoga']; 

    let icons = activityImages.map((image, index) => { 
     return (
      <TouchableWithoutFeedback key={index} onPress={() => {}}> 
       <View style={styles.imageWrap}> 
        <Image style={styles.imageDefault} source={require(`../../assets/activities/${image}.png`)} /> 
       </View> 
      </TouchableWithoutFeedback> 
     ); 
    }); 

    return icons; 
} 

而在渲染方法：

render() { 

return (
    <View style={styles.container}> 
     <ScrollView 
      style={styles.scrollContainer} 
      horizontal={true} 
     > 
      {this.renderIcons()} 
     </ScrollView> 
    </View> 
); 

}

每資產文件夾中的項目是具有相應文件名的圖像。

當我運行這個，我得到錯誤： 需要未知模塊「../../assets/activities/all.png」。

起初我以爲這是不正確的文件路徑，但是當我將圖像源改爲： source={require('../../assets/activities/all.png')} />，all.png正確呈現8次（數組長度），沒有任何錯誤。有沒有人遇到過類似的問題？

編輯：

到這一點，最好的解決方案可能是一個字典（github上issue和comment）

const iconsMap = {'burger-menu': require('../img/burger-menu.png')}; 
// this.props.icon = 'burger-menu' 
<Image src={iconsMap[this.props.icon} /> 

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} />