Плоский список одного элемента с двумя кнопками - PullRequest
Новая
       22

Плоский список одного элемента с двумя кнопками

0 голосов
/ 08 февраля 2020

Плоский список отображает информацию из API, я хочу добавить кнопку удаления для каждого элемента. Где пользователь может щелкнуть по нему и иметь возможность удалить этот указанный c элемент.

Пожалуйста, проверьте мой код ниже. 

<FlatList
    numColumns={1}
    data={this.state.allDocs}
    renderItem={({ item }) => (
       <TouchableOpacity onPress={() => Linking.openURL('http://URL')}>
         <Text>{item.docName}</Text>
       </TouchableOpacity> 

       <TouchableOpacity onPress={deleteFunction}>
         <Text>Delete</Text>
       </TouchableOpacity> 
    )}
    keyExtractor={item => item.docName}
  />

Ответы [ 2 ]

0 голосов
/ 08 февраля 2020 
import React, { Component } from "react";
import {
  SafeAreaView,
  View,
  FlatList,
  StyleSheet,
  Text,
  TouchableOpacity
} from "react-native";

export default class Example extends Component {
  state = {
    data: [
      {
        id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
        title: "First Item"
      },
      {
        id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
        title: "Second Item"
      },
      {
        id: "58694a0f-3da1-471f-bd96-145571e29d72",
        title: "Third Item"
      }
    ]
  };

  renderItem = ({ item }) => {
    return (
      <View style={styles.item}>
        <Text>{item.title}</Text>
        <TouchableOpacity onPress={() => this.removeValue(item.id)}>
          <Text>Delete</Text>
        </TouchableOpacity>
      </View>
    );
  };

  removeValue = id => {
    let newData = this.state.data.filter(item => item.id !== id);
    this.setState({
      data: newData
    });
  };

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <FlatList
          data={this.state.data}
          renderItem={this.renderItem}
          keyExtractor={item => item.id}
        />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50
  },
  item: {
    backgroundColor: "#f9c2ff",
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
    flexDirection: "row",
    justifyContent: "space-between"
  }
});

Измените это в соответствии с вашими требованиями.

Надеюсь, это поможет вам. Не стесняйтесь сомнений.

0 голосов
/ 08 февраля 2020

Вам просто нужно передать функцию, которая удалит документ из вашего состояния следующим образом: 

export default class FlatListExample extends Component {

    _openDoc = async (index) => {
        const { allDocs } = this.state;

        Linking.openURL(allDocs[i].url);
    }

    _deleteDoc = (index) => {
        const { allDocs } = this.state;
        allDocs.splice(index, 1);

        this.setState({ allDocs });
    }

    render() {
        const { allDocs } = this.state;

        return (
            <FlatList
                data={allDocs}
                keyExtractor={item => item.docName}
                renderItem={({ item, index }) => (
                    <Fragment>
                        <TouchableOpacity onPress={() => this._openDoc(index)}>
                            <Text>{item.docName}</Text>
                        </TouchableOpacity> 

                        <TouchableOpacity onPress={() => this._deleteDoc(index)}>
                            <Text>Delete</Text>
                        </TouchableOpacity> 
                    </Fragment>
                )} />
        );
    }
}
...