ReactNative 应用 SectionList 实现分组列表

一、SectionList 简述

ReactNative长列表数据组件一共有三个：

• ListView 核心组件，数据量大时性能较差，占用内存持续增加，故诞生FlatList组件。
• FlatList 用于替代 ListView，支持下拉刷新和上拉加载。
• SectionList 高性能的分组列表组件。

其中，SectionList支持下面的常用功能：

• 完全跨平台；
• 支持水平布局模式；
• 行组件显示或隐藏时可配置回调事件；
• 支持单独的头部组件；
• 支持单独的尾部组件；
• 支持自定义行间分隔线；
• 支持下拉刷新；
• 支持上拉加载；

1.1 属性集合

1.2 方法集合

二、应用示例

import React, { Component } from 'react';
import {
  AppRegistry,
  View,
  Text,
  SectionList,
} from 'react-native';
 
class HomeScreen extends React.Component {
 
  constructor(props) {
    super(props);
  }
 
  _renderItem = (info) => {
    var txt = '  ' + info.item.title;
    return <Text
      style={{ height: 60, textAlignVertical: 'center', backgroundColor: "#ffffff", color: '#5C5C5C', fontSize: 15 }}>{txt}</Text>
  }
 
  _sectionComp = (info) => {
    var txt = info.section.key;
    return <Text
      style={{ height: 50, textAlign: 'center', textAlignVertical: 'center', backgroundColor: '#9CEBBC', color: 'white', fontSize: 30 }}>{txt}</Text>
  }
 
  render() {
    var sections = [
      { key: "A", data: [{ title: "阿童木" }, { title: "阿玛尼" }, { title: "爱多多" }] },
      { key: "B", data: [{ title: "表哥" }, { title: "贝贝" }, { title: "表弟" }, { title: "表姐" }, { title: "表叔" }] },
      { key: "C", data: [{ title: "成吉思汗" }, { title: "超市快递" }] },
      { key: "W", data: [{ title: "王磊" }, { title: "王者荣耀" }, { title: "往事不能回味" },{ title: "王小磊" }, { title: "王中磊" }, { title: "王大磊" }] },
    ];
 
    return (
      <View style={{ flex: 1 }}>
        <SectionList
          renderSectionHeader={this._sectionComp}
          renderItem={this._renderItem}
          sections={sections}
          ItemSeparatorComponent={() => <View><Text></Text></View>}
          ListHeaderComponent={() => <View style={{ backgroundColor: '#25B960', alignItems: 'center', height: 30 }}><Text style={{ fontSize: 18, color: '#ffffff' }}>通讯录</Text></View>}
          ListFooterComponent={() => <View style={{ backgroundColor: '#25B960', alignItems: 'center', height: 30 }}><Text style={{ fontSize: 18, color: '#ffffff' }}>通讯录尾部</Text></View>}
        />
      </View>
    );
  }
 
}
 
AppRegistry.registerComponent('App', () => HomeScreen);

三、拓展阅读

• 官方文档