Question

假设我在主要组件 render（）函数中有 map（）循环。

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

组件的 render（）函数：

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

如果我这样做，我会收到错误： '确保模块存在... blah blah'

如果我按照以下方式执行此操作我得到相同的错误：

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

您不能要求图像的动态路径。图像路径应该是完全静态的。我建议你将静态路径作为道具传递给组件。

例如：

＆＃13;

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

＆＃13;

使用可变路径

1 个答案: