在本机反应中从 FlatList 中删除项目

Question

我正在使用 Flat List 对来自图库的 select 多张图片做出原生反应。现在我想在将其上传到服务器之前删除一些图像。我不确定如何执行该操作。

这是我的代码...

<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

嗯，您可以根据 index.start 通过修改 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 实现，我们将使用 splice 将其从 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 或类似于处理点击的东西（到 select 或删除图像） . 基本上你想要的是从 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);

只不过是一个 JSX shorthand inside lodash filter 方法，它获取 imagesAddFile 数组，迭代它并通过删除名称等于图像名称的图像对象返回新数组。请参阅文档以获得更好的说明。

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

这样独特的东西

在本机反应中从 FlatList 中删除项目

Remove item from FlatList in react native

react-native

react-native-flatlist