Question

我正在尝试使用this库在react native中创建带有可折叠标题的表。我正在使用图书馆中的Accordion来满足我的要求。

下面是我编写的代码：

import Accordion from 'react-native-collapsible/Accordion';
const LOREM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dictum nisi. Integer porta vulputate turpis ut finibus. Integer mollis, libero id interdum pretium, diam mi tempor dolor, ac dictum orci dui in mi. Quisque pulvinar massa ut eros hendrerit elementum. Donec sagittis enim eget odio eleifend, ac consectetur ex fringilla. Donec in lacinia purus. Curabitur condimentum laoreet est, ac tincidunt quam hendrerit congue. Phasellus vestibulum justo a leo faucibus tristique. Proin et urna suscipit, tempus metus vitae, vulputate lorem. Mauris augue orci, viverra quis lacus ut, molestie dapibus turpis. Ut consectetur urna finibus, ullamcorper lorem sed, aliquet leo. Sed non velit sed sem pulvinar egestas non eu mi. Nulla nulla augue, pretium nec diam vel, fringilla hendrerit ligula. Aliquam ut molestie dui, in tempor lacus."
export default class HomeView extends Component {

  constructor(props) {
    super(props);
    this.state = {
      resultData: [
        {title: 'A', data: ['Alex', 'Alexa', 'Alexi'], content:LOREM},
        {title: 'D', data: ['Devin'], content:LOREM},
        {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie'], content:LOREM},
      ]
    }
  renderHeaderSection = (section) => {
    return(
      <Text>{section.title}</Text>
    )    
  }
  renderContent = (_content) => {
    return(
      <Text>{_content.content}</Text>
    )
  }
  render() {
    return (
      <View>
        <ScrollView>
          <Accordion
            sections={this.state.resultData}
            renderHeader={this.renderHeaderSection}
            renderContent={this.renderContent}
            initiallyActiveSection={0}
            underlayColor={'#d7e9f8'}
          />
        </ScrollView>
      </View>
    )
  }
}

现在的问题是，当我运行应用程序时，初始活动部分显示其内容。但是，当我点击任何节标题时，展开的节将关闭，然后再也不会展开。而且我点击的部分也不会展开。

是我做错了什么还是想念什么？有或没有任何第三方库，还有其他方法可以实现这一目标吗？

带有Accordian的React Native中的可折叠ListView

0 个答案: