反应本地静态图像与可变路径

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