Как я могу удалить выбранный раздел в Accordion в React-Native - PullRequest
Новая
       6

Как я могу удалить выбранный раздел в Accordion в React-Native

0 голосов
/ 17 января 2020

Предположим, в Аккордеоне есть два раздела. Я хочу удалить любой из них, поэтому мне придется удалить выбранные данные из массива, что будет лучшим подходом?

1 Ответ

1 голос
/ 18 января 2020

Проверьте этот пример, который я создаю, используя 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"
  }
});

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

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

...