单击“本机”中的特定项目时，手风琴组件会打开整个项目

Question

我如何使用React accordion-collapse-react-native包来管理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

使用 react-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;