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

时间:2016-12-23 17:30:49

标签: javascript image react-native map-function

调用map函数后我无法加载图像:

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

发生以下错误:

  

未知的命名模块:'.. / imgs / ros_eat.png'

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

请帮忙

1 个答案:

答案 0 :(得分:2)

在本机反应中,图像无法动态加载并在之前进行解析。所以我建议改变下面的代码。

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