带有两个按钮的平面列表单个项目

Question

平面列表显示来自 API 的信息，我想为每个项目添加一个删除按钮。用户可以在其中单击它并能够删除该特定项目。

请检查下面我的代码。

<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}
  />

Answer 1

您只需要传递一个函数，该函数会像这样从您的状态中删除文档：

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>
                )} />
        );
    }
}

Answer 2

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"
  }
});

根据您的要求进行更改。

希望对您有所帮助。有疑问欢迎留言。

带有两个按钮的平面列表单个项目

Flat list single item with two buttons

react-native

touchableopacity

react-native-flatlist