如何在React-Native中删除手风琴中的选定部分

Question

假设手风琴中有两个部分，我想删除其中的任何一个，那么我将不得不从数组中删除选定的数据，这将是最好的方法？

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

根据您的要求更改。

希望这对您有所帮助。随时提出疑问。