在返回的 map() 对象中设置图像

Question

调用地图函数后无法加载图像：

this.rosImgs.push({img: '../imgs/ros_eat.png', id: this.imgId});

getRosette(){
    return this.rosImgs.map((obj) =>
      <TouchableHighlight key={obj.id} onPress={() => this.imgClick()}>
        <Image
          source={require(obj.img)}
        />
      </TouchableHighlight>
    );
  }

发生以下错误：

Unknown named module:'../imgs/ros_eat.png'

但是当我这样做时 source={require('../imgs/ros_eat.png')} 它有效。

请帮忙

Answer 1

在react native中，图片无法动态加载，需要先解析。所以我建议像下面这样更改代码。

this.rosImgs.push({img: require('../imgs/ros_eat.png'), id: this.imgId});

getRosette(){
    return this.rosImgs.map((obj) =>
      <TouchableHighlight key={obj.id} onPress={() => this.imgClick()}>
        <Image
          source={obj.img}
        />
      </TouchableHighlight>
    );
  }

在返回的 map() 对象中设置图像

set image in returned map() object

javascript

image

react-native

map-function