React-Native SectionList使用

• SectionList的简单实用

const titles = [
    { key: '0', data: ['目录一', '目录一', '目录一', '目录一'] },
    { key: '1', data: ['目录二'] },
    { key: '2', data: ['目录二'] }
];

<SectionList
     SectionSeparatorComponent{this.sectionSeparatorComponent.bind(this)}
     ListHeaderComponent={this.listHeaderComponent.bind(this)}
     sections={titles}
     renderItem={this.renderItem.bind(this)}
     keyExtractor={this.keyExtractor.bind(this)}
     >
</SectionList>

keyExtractor(item, index) {
        return item;
 }
listHeaderComponent() {
        return (
            <View style={{ height: autoHeight(10) }}></View>
        );
 }
sectionSeparatorComponent() {
        return (
            <View style={{ height: autoHeight(10) }}></View>
        );
}

• 效果图如下
  
  
  

  image.png