Аккордеонный компонент открывает целые элементы при нажатии на определенный в реагировать родной

Question

Как мне управлять открытием и закрытием сворачиваемого компонента в реагировать на натив? Я использую пакет accordion-collapse-react-native.Но если я нажму на один элемент, откроется весь складной заголовок. Я хочу, чтобы при щелчке по нему открывался только определенный компонент заголовка.Ниже приведен код. Как мне добиться этого?

код аккордеона

   <View>
  {detail.data.curriculum.map(curr => (
    <Collapse
      isCollapsed={this.state.collapsed}
      onToggle={isCollapsed => this.setState({ collapsed: isCollapsed })}
    >
      <CollapseHeader>
        {curr.type === "section" ? (
          <CardItem transparent>
            <Icon
              name="add"
              onPress={() =>
                this.setState({ collapsed: !this.state.collapsed })
              }
            />
            <Text>{curr.title}</Text>
          </CardItem>
        ) : (
          <View />
        )}
      </CollapseHeader>
      <CollapseBody>
        <ListItem>
          .. ..
          <Text>{curr.title}</Text>
        </ListItem>
      </CollapseBody>
    </Collapse>
  ))}
</View>

Это то, что я получаю

Answer 1

Использование act-native-collapsibe аккордеона очень просто, когда вы нажимаете на определенный раздел, другие разделы будут закрыты.Вы могли бы написать следующим образом

import React from 'react';
import Accordion from 'react-native-collapsible/Accordion';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      sections: this.generateSections(), // generate array of sections
      activeSections: [],
    };

    this.renderHeader = this.renderHeader.bind(this);
    this.renderContent = this.renderContent.bind(this);
    this.updateSections = this.updateSections.bind(this);
  }

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

  renderHeader(section, index, isActive) {
    return (
      <View style={styles.header}>
        <View style={styles.border}>
          <Text style={styles.title}>{section.title}</Text>
        </View>
      </View>
    );
  }

  renderContent(section) {
    return (
      <View>
        <Text>{section.content}</Text>
      </View>
    );
  }

  renderList() {
    return (
       <Accordion
         sections={this.state.sections}
         activeSections={this.state.activeSections}
         renderHeader={this.renderHeader}
         renderContent={this.renderContent}
         onChange={this.updateSections}
         touchableComponent={Touchable}
        />
    );
  }

  render() {
    return <View>{this.renderList()}</View>;
  }
}

export default MyComponent;