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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,569评论 25 708
  • 终于!得空看了新海诚的《你的名字》。因为觉得好看,所以又再看了一遍。第二遍期间发现了很多之前没发现到的细节,也算不...
    十一安阅读 1,752评论 4 9
  • 一直都在划算像那些背包客一样只有诗和远方,可种种原因都一再耽搁。十一月从深圳辞职回长沙重新找了份工作,可心里一直感...
    北冥有kios阅读 848评论 5 7
  • 有的东西将她放在心中,作为一个永久性的收藏,其实是对她最好的处理方式。一如阳光,随远,但却温暖依存,因为太阳还在!...
    明媚的忧伤阅读 280评论 0 1
  • 等到暮色湮没最低矮的树梢 沉入湖泊深处的褶皱 就又是我没得挑拣的景色 一颗尘埃落入人间 我义无反顾地伸手接住 暖风...
    千秋_阅读 161评论 1 3