Question

我在react native中使用Flat List从图库中选择多个图像。现在，我想删除一些图像，然后再将其上传到服务器。我不确定如何执行该操作。

这是我的代码...

<FlatList
          style={{ paddingBottom: 5, paddingTop: 10 }}
          data={this.state.imagesAddFile}
          keyExtractor={(y, z) => z.toString()}
          renderItem={({ item }) => (
            <SelectedLayout
             ImageName = {item.name}
            />
          )}
        />

我在这里正确获取图像列表，但不确定如何从列表中删除图像，请提出答案。谢谢

Answer 1

我正在使用类似以下方法的删除功能，在这里共享所有代码：

第1步：在渲染视图中添加一个TouchableOpacity，如以下代码所示：

<TouchableOpacity onPress={() => this.deleteAddress(itemData.item._id)}>
                <Icon name="trash" style={{paddingLeft: 10,paddingRight:10}} size={20} color="red" />
              </TouchableOpacity>

第2步：添加一个类似于以下代码的确认框：

deleteAddress(id) {
    Alert.alert(
      'Delete Address',
      'Are you sure want to delete this address ?',
      [
        {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
        {text: 'OK', onPress: () => this.deleteAddressDetail(id)},
      ],
      { cancelable: false }
    )
  }

第3步：在此处调用您的API或其他任何东西

deleteAddressDetail(id) {
  //Delete api or anything here
  //after that call your list so updated state data will render
}

您更新后的清单代码：

<FlatList
        data={this.state.addressList}
        keyExtractor={this._keyExtractor}
        extraData={this.state}
        renderItem={this.renderRowItem}
      />

使用类似以下代码的渲染项：

renderRowItem = (itemData) => {
  <TouchableOpacity onPress={() => this.deleteAddress(itemData.item._id)}>
                    <Icon name="trash" style={{paddingLeft: 10,paddingRight:10}} size={20} color="red" />
                  </TouchableOpacity>
}

Answer 2

好吧，您可以根据其索引删除所需的项目。从修改flatList开始

<FlatList
          style={{ paddingBottom: 5, paddingTop: 10 }}
          data={this.state.imagesAddFile}
          keyExtractor={(y, z) => z.toString()}
          renderItem={({ item,index }) => (
            <SelectedLayout
             onPress={(index) =>this.removeItemFromList(index)} 
             ImageName = {item.name}
            />
          )}
        />

您应该将组件SelectedLayout包装在TouchableOpacity内，以便实现onPress或您喜欢的任何方式。如果您能提供给我代码，我可以告诉您。

现在，removeItemFromList实现，我们将使用拼接将其从imagesAddFile状态中删除。

removeItemFromList(index){
   let newimagesAddFile = this.state.imagesAddFile;
   newimagesAddFile.splice(index,1); //to remove a single item starting at index
   this.setState({imagesAddFile:newimagesAddFile})
}

Answer 3

由于您的问题代码尚未完成，因此我假设您的SelectedLayout组件可能有TouchableOpacity或类似的东西来处理水龙头（选择或删除图像）。基本上，您想要的是从SelectedLayout组件修改Flatlist的数据源（即this.state.imagesAddFile数组）。

在包含平面列表的组件中创建一个函数，该函数接收图像名称（或图像url，具体取决于图像对象的结构），并且该函数应从状态中删除该图像（imagesAddFile）。现在将此函数作为道具传递给您的SelectedLayout，并从SelectedLayout中的Touchable ****的onPress中的SelectedLayout组件调用此函数。您可以使用lodash方法，因为它们非常方便且编写得很好。（您会经常使用它们）

您的组件可能看起来像这样：

handleImageTap = (imageName) => {
   const { imagesAddFile } = this.state;
   this.setState({
      imagesAddFile: _.filter(imagesAddFile,imageObj => 
       imageObj.name !== imageName);
   })
}

render() {
  return(
   <FlatList
     style={{ paddingBottom: 5, paddingTop: 10 }}
     data={this.state.imagesAddFile}
     keyExtractor={(y, z) => z.toString()}
     renderItem={({ item }) => (
       <SelectedLayout
        ImageName = {item.name}
        handleImageTap = {this.handleImageTap}
       />
     )}
  />
  )

行

_.filter(imagesAddFile,imageObj => imageObj.name !== imageName);

只是lodash过滤器方法中的JSX简写，它采用imagesAddFile数组，对其进行迭代，并通过删除名称与image name相等的image对象返回新数组。请参考该文档以获取更好的说明。

理想情况下，您应该首先检查图像是否在数组中。另外我建议不要使用图像名称，不要使用id或imageUrl

从React Native中的FlatList中删除项目

3 个答案: