反應本地靜態圖像與可變路徑

Question

可以說我有地圖（）循環內我的主要組件render（）函數。

<ScrollView>  
    {this.state.items.map((item, i) => { 
     return(
     <MyItem key={i} item={item} /> 
     ) 
    })} 
</ScrollView> 

而且渲染（）組件的功能：

<View> 
    <Text>{this.props.item.title}</Text> 
    <Image source={require('../relative_path_to_image/' + this.props.item.imageName + '.png')} 
</View> 

如果我這樣做，我得到一個錯誤：「確保模塊存在......等等等等」

如果我去做了以下方式我得到了同樣的錯誤：

render(){ 
    var imageSource= require('../relative_path_to_image/' + this.props.item.imageName + '.png'); 

    return (
    <View> 
     <Text>{this.props.item.title}</Text> 
     <Image source={imageSource} 
    </View> 
) 
} 

如果我有硬編碼寫出來（見下文）路徑一切工作正常！

var imageSource= require('hardcoded_path_to_image.png'); 

所以，我可能需要一種方法來使用require（）函數在循環內呈現圖像。我認爲這是對所有應用程序的公平需求，爲什麼不按預期工作？

Answer 1

你不需要圖像的動態路徑。圖像路徑應該是靜態的。我建議你通過靜態路徑作爲組件的道具。

例如：

class BlaBlaBla extends Component { 
 
    constructor() { 
 
    this.state = { 
 
     myPicsArray: [ 
 
     require('path/to/some/image'), 
 
     require('path/to/someAnother/image'), 
 
     require('path/to/someAnotherAnother/image') 
 
     ] 
 
    } 
 
    } 
 
    
 
    render() { 
 
    <ScrollView>  
 
    {this.state.items.map((item, i) => { 
 
     return(
 
     <MyItem key={i} item={item} /> 
 
     ) 
 
    })} 
 
    </ScrollView> 
 
    } 
 
}