react-native SectionList 使用详解

勤做笔记，方便自己，帮助他人。

属性

• ScrollView props... 集成了scrollview的属性

• sections 用来渲染的数据，类似于 FlatList 中的data属性。
  数据格式如下：

[
    { title: 'a', data: ['a1', 'a2'] },
    { title: 'b', data: ['b1', 'b2','b3'] },
    { title: 'c', data: ['c1'] },
]

• initialNumToRender 指定一开始渲染的元素数量，最好刚刚够填满一个屏幕，这样保证了用最短的时间给用户呈现可见的内容。注意这第一批次渲染的元素不会在滑动过程中被卸载，这样是为了保证用户执行返回顶部的操作时，不需要重新渲染首批元素。

• keyExtractor 一个不重复的key

• renderItem 每一个section中的每一个列表项Item(参数名固定)

// item  列表项数据 
// index  列表项在section中的索引
// section  列表项的section索引
// separators:  {
//    highlight',
//    unhighlight,
//    updateProps:{
//        select,
//        newProps,
//    }
// } 
 renderItem={({ item, index, section, separators }) =>
  
    {item}
  
}

• onEndReached 当列表被滚动到距离内容最底部不足onEndReachedThreshold的距离时调用。 一般用来实现加载更多。

• extraData 如果有除data以外的数据用在列表中（不论是用在renderItem还是Header或者Footer中），请在此属性中指定。同时此数据在修改时也需要先修改其引用地址（比如先复制到一个新的Object或者数组中），然后再修改其值，否则界面很可能不会刷新。

• ItemSeparatorComponent 行与行之间的分隔线组件。不会出现在第一行之前和最后一行之后

• inverted 翻转滚动方向。实质是将scale变换设置为-1。 [boolean]

• legacyImplementation

• ListEmptyComponent 当列表数据为空时渲染的组件。

• onEndReachedThreshold 决定当距离内容最底部还有多远时触发onEndReached回调。注意此参数是一个比值而非像素单位。比如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发。

• onRefresh 在列表头部添加一个标准的RefreshControl控件，以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。

• onViewableItemsChanged 在可见行元素变化时调用。可见范围和变化频率等参数的配置请设置viewabilityConfig属性。

• refreshing 在等待加载新数据时将此属性设为true，列表就会显示出一个正在加载的符号。

• removeClippedSubviews

• ListHeaderComponent 头部组件。

• ListFooterComponent 尾部组件

• renderSectionHeader 每个section的头部组件。在iOS上，这些headers是默认粘接在ScrollView的顶部的（也可以通过 stickySectionHeadersEnabled 来控制）

• renderSectionFooter 每个组的尾部组件。

• SectionSeparatorComponent 类似于ItemSeparatorComponent。 section 之间的间隙

• stickySectionHeadersEnabled 当下一个section把它的前一个section的可视区推离屏幕的时候，让这个section的header粘连在屏幕的顶端。这个属性在iOS上是默认可用的，因为这是iOS的平台规范。（说白了就是吸顶效果）

方法

• scrollToLocation 滚动列表到指定的区域（参数名固定）

 /**
     *
     * @param I Item 点击事件传递过来的index
     * 'viewPosition' (number) - 为0时将这个列表项滚动到可视区顶部 
     * (可能会被顶部粘接的header覆盖), 
     * 为1时将它滚动到可视区底部, 为0.5时将它滚动到可视区中央。
     * 'viewOffset' (number) - 继续偏移30像素的位置
     * 'sectionIndex' (number) - 第number个section
     * 'itemIndex' (number) - 的第number个item
     * 'animated' (boolean) -  是否启用动画
     */
    scrollToLocation(i) {
        this.refs.SectionList.scrollToLocation({
            animated : true,
            itemIndex : 0,
            sectionIndex : i,
            viewOffset : 30
        })
    }

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

 item + index}
  ref='SectionList'
  refreshControl={
    
  }
  refreshing={refreshing}
  sections={list}
  renderItem={({ item }) =>
     this.fetchDel(item)}
      item={item}
      btnPress={() => this.goToSendMsg(item)}
    />
  }
  ListEmptyComponent={}
  ListHeaderComponent={
}
  ListFooterComponent={}
  renderSectionHeader={({ section }) =>
    
      {section.title}
    
  }
  getItemLayout={this._getItemLayout}
/>

注意：

• 当某行滑出渲染区域之外后，其Item内部状态将不会保留。
• 本组件继承自PureComponent而非通常的Component，这意味着如果其props在浅比较中是相等的，则不会重新渲染。所以请先检查你的renderItem函数所依赖的props数据（包括data属性以及可能用到的父组件的state），如果是一个引用类型（Object或者数组都是引用类型），则需要先修改其引用地址（比如先复制到一个新的Object或者数组中），然后再修改其值，否则界面很可能不会刷新。
• 为了保持滑动的流畅，列表内容会在屏幕外异步绘制。所以快速滑动有空白。