Удалить элемент из FlatList в реагировать родной - PullRequest
Новая
       18

Удалить элемент из FlatList в реагировать родной

1 голос
/ 15 октября 2019

Я использую Flat List в реагировать родной, чтобы выбрать несколько изображений из галереи. Теперь я хочу удалить часть изображения перед его загрузкой на сервер. Я не уверен, как выполнить это действие.

Вот мой код ... 

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

Здесь я получаю список изображений правильно, но не уверен, как удалить изображение из списка, пожалуйстаПредлагаю ответить. Спасибо

Ответы [ 3 ]

2 голосов
/ 15 октября 2019

Я использую функцию удаления, как описано ниже, и разделяю весь код здесь:

Шаг 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>
}
1 голос
/ 15 октября 2019

Поскольку ваш код не завершен в вашем вопросе, я предполагаю, что ваш компонент SelectedLayout может иметь TouchableOpacity или что-то похожее на ручку нажатия (чтобы выбрать или удалить изображение). По сути, вы хотите изменить источник данных вашего Flatlist (т.е. массив this.state.imagesAddFile) из компонента SelectedLayout.

Создайте функцию в компоненте, содержащем плоский список, который получает имя изображения (или URL-адрес изображения в зависимости от структуры вашего объекта изображения), и эта функция должна удалить это изображение из вашего состояния (imagesAddFile). Теперь передайте эту функцию в качестве опоры вашему SelectedLayout и вызовите эту функцию из компонента SelectedLayout в onPress вашего Touchable **** в 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 внутри метода фильтра lodash, который принимает массив imagesAddFile, выполняет итерацию по нему и возвращает новый массив, удаляя объект изображения, имя которого равнона имя изображения. Пожалуйста, обратитесь к документу для уточнения.

В идеале вы должны сначала проверить, существует ли изображение в массиве или нет. Также я бы посоветовал не играть с именем изображения, использовать что-то уникальное, например, id или imageUrl

1 голос
/ 15 октября 2019

Ну, вы можете удалить нужный элемент на основе его 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})
}
...