React Native 列表视图之 SectionList

高性能的分组(section)列表组件，支持下面这些常用的功能：

• 完全跨平台。
• 行组件显示或隐藏时可配置回调事件。
• 支持单独的头部组件。
• 支持单独的尾部组件。
• 支持自定义行间分隔线。
• 支持分组的头部组件。
• 支持分组的分隔线。
• 支持多种数据源结构
• 支持下拉刷新。
• 支持上拉加载。

属性

名称	类型	必填	说明
sections	array of Sections	是	用来渲染的数据，类似于 FlatList 中的 data 属性。
initialNumToRender	number	是	指定一开始渲染的元素数量，最好刚刚够填满一个屏幕，这样保证了用最短的时间给用户呈现可见的内容。
keyExtractor	(item: Item, index: number) => string	是	此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。
renderItem	function	是	从data中挨个取出数据并渲染到列表中。
ItemSeparatorComponent	component	否	行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后。
ListEmptyComponent	component, function, element	否	列表为空时渲染该组件。可以是 React Component, 也可以是一个 render 函数，或者渲染好的 element。
ListFooterComponent	component, function, element	否	尾部组件。可以是 React Component, 也可以是一个 render 函数，或者渲染好的 element。
ListHeaderComponent	component, function, element	否	头部组件。可以是 React Component, 也可以是一个 render 函数，或者渲染好的 element。
columnWrapperStyle	style object	否	如果设置了多列布局（即将numColumns值设为大于 1 的整数），则可以额外指定此样式作用在每行容器上。
extraData	any	否	如果有除data以外的数据用在列表中（不论是用在renderItem还是头部或者尾部组件中），请在此属性中指定。同时此数据在修改时也需要先修改其引用地址（比如先复制到一个新的 Object 或者数组中），然后再修改其值，否则界面很可能不会刷新。
getItemLayout	function	否	getItemLayout是一个可选的优化，用于避免动态测量内容尺寸的开销，不过前提是你可以提前知道内容的高度。
horizontal	boolean	否	设置为 true 则变为水平布局模式。
inverted	boolean	否	翻转滚动方向。实质是将 scale 变换设置为-1。
onEndReached	function	否	当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。
onRefresh	function	否	如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。
refreshing	boolean	否	在等待加载新数据时将此属性设为 true，列表就会显示出一个正在加载的符号。

实例

1. 逻辑代码

import React, {Component} from 'react';
import {
  StyleSheet, 
  SectionList,
  Text,
  View
} from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      turnOn: true,
      turnOff: false
    }
  }
  render() {
    return (
      <View style = {styles.container}>
        <View style={styles.title_view}>
          <Text style={styles.title_text}>
          SectionList
          </Text>
        </View>
        <View style={styles.list}>
          <SectionList
            sections = {[
              {title:'A',data:['阿年','阿诚']},
              {title:'B',data:['白白','白马','步青云']},
              {title:'C',data:['菜菜','超','chen']},
              {title:'D',data:['大叔','东子']},
              {title:'E',data:['EDIFIER']}
            ]}
            renderItem={({item}) =>
              <Text style={styles.item}>{item}</Text>
            }
            renderSectionHeader = {({section})=>
              <Text style={styles.sectionHeader}>{section.title}</Text>
            }
            keyExtractor = {(item,index) => index}
          />
        </View>
      </View> 
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  title_view:{
    flexDirection:'row',
    height:50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor:'#27b5ee',
  },
  title_text: {
    fontSize:20,
    color:'white'
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

2. 效果图

sectionList_demo.jpg