0

我有

<ScrollView horizontal={true} >
  {this.state.images.map((uri,i) => 
  <Thumb key={i} number={i} uri={uri} onDelete ={this.deleteImage.bind(this)} /> )}
</ScrollView>

这里每个Thumb班级都有Image. 每当我单击图像时，都需要将其从ScrollView.

我的拇指组件看起来像这样

 class Thumb extends React.Component {
constructor(props){
  super(props);

  this.state = {
    show : false
  }
}


  shouldComponentUpdate(nextProps, nextState) {
    console.log(nextProps,'nextprops')
    return false;
  }
  render() {
    return (
      <View style={[styles.button ]}>


            <View style={[{position:'relative'},styles.img]} >
              <View style={{position:'absolute'}}>
                <Image style={styles.img} source={{uri:this.props.uri.path}}/>
              </View>

              <View style={[styles.img , {position:'absolute',alignItems:'center',justifyContent:'center',opacity:1}]}>

              <TouchableHighlight onPress = {() => {this.props.onDelete(this.props))}}>
                <Icon name="close" size = {30} color="white"/>
                 </TouchableHighlight>
              </View>
            </View>

      </View>
    );
  }
}

我正在尝试删除

deleteImage(deleteProp){
//  console.log(_scrollView)
//  _scrollView.props.children.splice(deleteProp.number,1)
//  console.log(_scrollView)
  console.log(deleteProp,'prop from delete method');
   console.log(this.state.images ,'before')
 let images = this.state.images;
 console.log(images.splice(deleteProp.number ,1),'splice data');
  this.setState({images : images});
 console.log(this.state.images,'after')
  if(this.state.images.length == 0 ){
    this.setState({loading:false})
  }
}

我应该如何实现这一目标？

我尝试删除相应的状态明智的 Image 对象，但它总是删除 ScrollView（或最后一个 Thumb 组件）的最后一个图像。

我是 react-native 和 Android 的新手，我不知道 ScrollView 可以做到这一点。请建议我正确的方法。

4

2 回答 2

2

这是一个很常见的问题，会混淆keys组件中的角色扮演。我们认为键只是动态生成的组件的唯一标识符。但它也可以作为 React 知道哪些组件需要重绘的一种手段。

因此，我建议将您更改key为图像本身的独特之处，而不是位置。

<Thumb key={uri.path} number={i} uri={uri} onDelete={this.deleteImage.bind(this)} />

这是关于keys.

密钥只需要在其兄弟姐妹中是唯一的，而不是全局唯一的。作为最后的手段，您可以将数组中的项目索引作为键传递。如果项目从不重新排序，这可以很好地工作，但重新排序会很慢。（强调我的）。

这是另一篇关于为什么键很重要的好文章。

此外，当您有正在生成组件的数组时，我喜欢“预加载”函数以不需要传递给它的索引、ID 等。

// original component
<Thumb key={i} number={i} uri={uri} onDelete={this.deleteImage.bind(this)} />
// updated function by adding index to bind params and unique key
<Thumb key={uri.path} number={i} uri={uri} onDelete={this.deleteImage.bind(this,i)} />

这样，当您想删除时，您只需调用this.props.onDelete(). 只是一种偏好，但我认为它更干净。

于 2016-11-19T20:13:16.273 回答
0

拇指：

class Thumb extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            show : false
        }
    }

    shouldComponentUpdate(nextProps, nextState) {
        console.log(nextProps,'nextprops')
        return false;
    }

    render() {
        return (
            <View style={[styles.button ]}>
                <View style={[{position:'relative'},styles.img]} >
                    <View style={{position:'absolute'}}>
                        <Image style={styles.img} source={{uri:this.props.uri.path}}/>
                    </View>
                    <View style={[styles.img , {position:'absolute',alignItems:'center',justifyContent:'center',opacity:1}]}>
                        <TouchableHighlight onPress = {this.props.onDelete}>
                            <Icon name="close" size = {30} color="white"/>
                        </TouchableHighlight>
                    </View>
                </View>
            </View>
        );
    }
}

滚动视图

<ScrollView horizontal={true} >
    {this.state.images.map((uri,index) => 
    <Thumb key={index} uri={uri} onDelete={this.deleteImage.bind(this, index)}/> )}
</ScrollView>

删除图像（）

deleteImage(index) {
    const images = this.state.images;
    const newImages = [...images.slice(0, index), ...images.slice(index + 1, images.length)];
    let newState = { images: newImages };

    if(images.length === 0){
        newState = { ...newState, loading: false };
    }

    this.setState(newState);
}
于 2016-11-20T07:05:40.503 回答