如何使用 react native 删除动态图像？

Question

在我的场景中，我正在显示带有删除图标的图像数组。一世 单击删除图标时需要删除图像。如何实现 这使用本机反应

这里是示例代码。

var image=["uri1","uri2","uri3"] //image url
var GetImageField = React.createClass({
  deleteImage:function(){
       this._imageDelete.setNativeProps({height: 0});
    },
render:function() {
      var self =this;

   return (<View> 
           {
             image.map(function(val){
              return (
                <Image source={val} style={styles.uploadImage} ref={component => self._imageDelete = component}>
                     <TouchableHighlight underlayColor="#ffa456" onPress={self.deleteImage} style={{backgroundColor:'#fff'}}>
                           <Text style={styles.deleteImage} >delete</Text>
                     </TouchableHighlight>
                </Image>)
              })
          }
          </View>)
}

使用 setNativeProps 我只能删除第一个选定的图像。但我需要删除多个图像

Answer 1

在 React 中处理这类事情的方式是使用组件状态。这些图像应该是初始状态，当您将它们从状态中移除时，React 将更新组件以反映更改：

var GetImageField = React.createClass({
getInitialState: function() {
	return {
	  images: ["uri1", "uri2", "uri3"]
	}
},

deleteImage: function(val) {
	this.setState({
		  images: this.state.images.filter(function(img){
		    return img !== val
		  })
	});
},

render: function() {
  var self = this;
  return ( < View >

      {
        this.state.images.map(function(val) {
	        return ( < Image source = {val}
		          style = {styles.uploadImage}
		          ref = {component => self._imageDelete = component} >
		          < TouchableHighlight underlayColor = "#ffa456"
		          onPress = {self.deleteImage.bind(self, val)}
		          style = {{ backgroundColor: '#fff'}} >
		             < Text style = {styles.deleteImage} > delete < /Text>
		          </TouchableHighlight >
		          < /Image>)
	        })
          }

      </View > )
}

Answer 2

 this.setState({
          arrayholder: this.state.arrayholder.filter(function(img){
            return img !== key
          })
  });