SectionList

参考文档

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

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

本组件实质是基于组件的封装，继承了其所有 props（也包括所有)的 props）。此外还有下面这些需要注意的事项：

当某行滑出渲染区域之外后，其内部状态将不会保留。请确保你在行组件以外的地方保留了数据。
本组件继承自PureComponent而非通常的Component，这意味着如果其props在浅比较中是相等的，则不会重新渲染。所以请先检查你的renderItem函数所依赖的props数据（包括data属性以及可能用到的父组件的state），如果是一个引用类型（Object或者数组都是引用类型），则需要先修改其引用地址（比如先复制到一个新的Object或者数组中），然后再修改其值，否则界面很可能不会刷新。（译注：这一段不了解的朋友建议先学习下js中的基本类型和引用类型。）
为了优化内存占用同时保持滑动的流畅，列表内容会在屏幕外异步绘制。这意味着如果用户滑动的速度超过渲染的速度，则会先看到空白的内容。这是为了优化不得不作出的妥协，而也在设法持续改进。
默认情况下每行都需要提供一个不重复的key属性。你也可以提供一个keyExtractor函数来生成key。

Props

属性	类型	必填	描述
sections	array of Sections	是	用来渲染的数据，类似于FlatList中的data属性。
initialNumToRender	number	是	指定一开始渲染的元素数量，最好刚刚够填满一个屏幕，这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载，这样是为了保证用户执行返回顶部的操作时，不需要重新渲染首批元素。
keyExtractor	(item: Item, index: number) => string	否	此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。若不指定此函数，则默认抽取item.key作为key值。若item.key也不存在，则使用数组下标。注意这只设置了每行（item）的key，对于每个组（section）仍然需要另外设置key。
renderItem	function	是	用来渲染每一个section中的每一个列表项的默认渲染器。可以在section级别上进行覆盖重写。必须返回一个react组件。
onEndReached	[(info: {distanceFromEnd: number}) => void]	否	当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用
extraData	any	否	如果有除data以外的数据用在列表中（不论是用在renderItem还是Header或者Footer中），请在此属性中指定。同时此数据在修改时也需要先修改其引用地址（比如先复制到一个新的Object或者数组中），然后再修改其值，否则界面很可能不会刷新。
ItemSeparatorComponent	[component, function, element]	否	行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后。默认情况下，提供了突出显示的部分和[开头/结尾] [项目/分隔符]属性。 renderItem提供了spacers.highlight / unhighlight，它将更新突出显示的属性，但是您也可以使用spacers.updateProps添加自定义属性。
inverted	boolean	否	翻转滚动方向。实质是将scale变换设置为-1。
ListFooterComponent	[component, function, element]	否	尾部组件。
legacyImplementation	boolean	否
ListEmptyComponent	[component, function, element]	否	当列表数据为空时渲染的组件。
onEndReachedThreshold	number	否	决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。
onRefresh	[() => void]	必填	如果设置了此选项，则会在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性
onViewableItemsChanged	function	否	在可见行元素变化时调用。可见范围和变化频率等参数的配置请设置viewabilityConfig属性。
refreshing	boolean	否	在等待加载新数据时将此属性设为true，列表就会显示出一个正在加载的符号。
removeClippedSubviews	boolean	否	注意：在某些情况下可能存在错误（缺少内容）-使用风险自负。这可以提高大型列表的滚动性能。
ListHeaderComponent	component, function, element	否	头部组件。
renderSectionFooter	[(info: {section: SectionT}) => ?React.Element]	否	每个组的尾部组件。
renderSectionHeader	[(info: {section: SectionT}) => ?React.Element]	否	在每个section的头部渲染。在iOS上，这些headers是默认粘接在ScrollView的顶部的. 参见[stickySectionHeadersEnabled]。
SectionSeparatorComponent	ReactClass	否	在每个section的顶部和底部渲染(区别于ItemSeparatorComponent，它仅在列表项之间渲染)。它的作用是为了从视觉上把section与它上方或下方的headers区别开来，从这个意义上讲，它的作用和ItemSeparatorComponent是一样的. 它也接受highlighted, [leading/trailing][Item/Separator]这两个默认提供的属性或其他通过separators.updateProps添加的自定义属性.
stickySectionHeadersEnabled	boolean	否	当下一个section把它的前一个section的可视区推离屏幕的时候，让这个section的header粘连在屏幕的顶端。这个属性在iOS上是默认可用的，因为这是iOS的平台规范。

方法

scrollToLocation()

scrollToLocation(params);

将可视区内位于特定sectionIndex 或 itemIndex (section内)位置的列表项，滚动到可视区的制定位置。比如说，viewPosition 为0时将这个列表项滚动到可视区顶部 (可能会被顶部粘接的header覆盖), 为1时将它滚动到可视区底部, 为0.5时将它滚动到可视区中央。

注意: 如果没有设置getItemLayout，就不能滚动到位于外部渲染区的位置。

参数：

名称	类型	必填	说明
params	object	否	看下面的说明

有效的参数键为：

'animated'（布尔值）-列表在滚动时是否应进行动画处理。默认为true。
'itemIndex'（数字）-滚动到该项目的部分内的索引。需要。
'sectionIndex'（数字）-包含要滚动到的项目的部分的索引。需要。
'viewOffset'（数字）-一个以假定为单位，到最终位置偏移距离的固定值，从而可以替换的头标所占据的空间。
'viewPosition'（数字）-值为0时，将由index指定的项目放在顶部，将1指定在底部，将0.5指定在中间居中。

recordInteraction()

recordInteraction();

主动通知列表发生了一个事件，以使列表重新计算可视区域。比如说当waitForInteractions 为 true 并且用户没有滚动列表时，就可以调用这个方法。不过一般来说，当用户点击了一个列表项，或发生了一个导航动作时，就可以调用这个方法

flashScrollIndicators()

flashScrollIndicators();

短暂地显示滚动指示器。

类型定义

Section

标识给定部分要呈现的数据的对象。类型： any

名称	类型	说明
data	array	本部分中用于渲染项目的数据。对象数组，很像FlatList的数据属性
[key]	string	可选键，用于跟踪节的重新排序。如果您不打算对部分进行重新排序，则默认情况下将使用数组索引。
[renderItem]	function	（可选）为此部分定义一个任意项目渲染器，以覆盖列表的默认renderItem。
[ItemSeparatorComponent]	component, function, element	（可选）为此部分定义一个任意的项目分隔符，以覆盖列表的默认ItemSeparatorComponent。
[keyExtractor]	function	（可选）为此部分定义一个任意密钥提取器，以覆盖默认的keyExtractor。

Example

渲染一组需要分组的数据，且还带有分组标签。

import React, { Component } from 'react';
import { SectionList, StyleSheet, Text, View } from 'react-native';
export  class pageComponent extends Component {
    render() {
        return (
            <View style={styles.container}>
                <SectionList
                    sections={[
                        {title: 'D', data: ['Devin']},
                        {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
                    ]}
                    renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
                    renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
                    keyExtractor={(item, index) => index}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 44
    },
    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,
    },
})

3.2.6 SectionList