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或者数组中),然后再修改其值,否则界面很可能不会刷新。
  • 为了保持滑动的流畅,列表内容会在屏幕外异步绘制。所以快速滑动有空白。

你可能感兴趣的:(react-native SectionList 使用详解)