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

时间:2015-11-19 11:04:46

标签: javascript jquery reactjs react-native

  

在我的场景中,我正在显示带有删除图标的图像数组。一世   需要删除图像,同时单击删除图标。如何删除   这使用反应原生

     

这是示例代码。

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我只能删除第一个选定的图像。但我需要删除多个图像

2 个答案:

答案 0 :(得分:2)

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

&#13;
&#13;
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 > )
}
&#13;
&#13;
&#13;

答案 1 :(得分:-1)

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