如何在 React-Native 中删除 Accordion 中的选定部分

Question

假设 Accordion 中有两个部分，我想删除其中的任何一个，因此我必须从数组中删除选定的数据，那么最好的方法是什么？

Answer 1

查看我使用 react-native-collapsible/Accordion 创建的这个示例

import React, { Component } from "react";
import { StyleSheet, Text, View, Button, SafeAreaView } from "react-native";
import Accordion from "react-native-collapsible/Accordion";

export default class AccordionView extends Component {
  state = {
    data: [
      {
        title: "Non-Veg Biryanis",
        section:
          "Biryani also known as biriyani, biriani, birani or briyani, is a mixed rice dish with its origins among the Muslims of the Indian subcontinent. This dish is especially popular throughout the Indian subcontinent, as well as among the diaspora from the region. It is also prepared in other regions such as Iraqi Kurdistan."
      },
      {
        title: "Pizzas",
        section:
          "Pizza is a savory dish of Italian origin, consisting of a usually round, flattened base of leavened wheat-based dough topped with tomatoes, cheese, and various other ingredients (anchovies, olives, meat, etc.) baked at a high temperature, traditionally in a wood-fired oven. In formal settings, like a restaurant, pizza is eaten with a knife and fork, but in casual settings, it is cut into wedges to be eaten while held in the hand. Small pizzas are sometimes called pizzettas."
      },
      {
        title: "Drinks",
        section:
          "A drink (or beverage) is a liquid intended for human consumption. In addition to their basic function of satisfying thirst, drinks play important roles in human culture. Common types of drinks include plain drinking water, milk, coffee, tea, hot chocolate, juice, and soft drinks. In addition, alcoholic drinks such as wine, beer, and liquor, which contain the drug ethanol, have been part of human culture for more than 8,000 years."
      },
      {
        title: "Deserts",
        section:
          'A dessert is typically the sweet course that concludes a meal in the culture of many countries, particularly Western culture. The course usually consists of sweet foods but may include other items. The word "dessert" originated from the French word desservir "to clear the table" and the negative of the Latin word service'
      }
    ],
    activeSections: []
  };

  renderHeader = section => {
    return (
      <View style={styles.header}>
        <Text style={styles.headerText}>{section.title}</Text>
      </View>
    );
  };

  renderContent = section => {
    return (
      <View style={styles.content}>
        <Text>{section.section}</Text>
        <Button title="Delete" onPress={this.onHandleDelete} />
      </View>
    );
  };

  updateSections = activeSections => {
    this.setState({ activeSections });
  };

  onHandleDelete = () => {
    /**
     * Get active section index
     */
    let selectedIndex = this.state.activeSections[0];
    let newData = this.state.data;
    /**
     * remove selected object from array
     */
    newData.splice(selectedIndex, 1);
    this.setState({
      data: newData
    });
  };

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Accordion
          sections={this.state.data}
          activeSections={this.state.activeSections}
          renderHeader={this.renderHeader}
          renderContent={this.renderContent}
          onChange={this.updateSections}
        />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "gray",
    paddingTop: 100
  },
  header: {
    backgroundColor: "#F5FCFF",
    padding: 10
  },
  headerText: {
    textAlign: "center",
    fontSize: 16,
    fontWeight: "500"
  },
  content: {
    padding: 20,
    backgroundColor: "#fff"
  }
});

根据您的要求更改此设置。

希望这对您有所帮助。如有疑问，请随意。