ReactNative的SectionList

一、SectionList和FlatList的区别

1.SectionList可以分组显示，FlatList不可以
2.SectionList支持头部吸顶悬浮效果

如果显示的列表不需要分组，可以使用，如果你的列表需要分组则使用SectionList.官方给出的SectionList的简单例子有如下两种：
（1）不同的section渲染相同类型的子组件

 }
    renderSectionHeader = {({section}) => 
}
    sections = {[
        {data: [...], title: ...},
        {data: [...], title: ...},
        {data: [...], title: ...},
]}
/>

(2)不同section渲染不同类型的子组件

二、属性

(1)数据源

• sections：数据类型是Array类型

(2) 头部、每个区的Item、尾部组件

• ListHeaderComponent:ReactClass 列表的头部组件
• ListFooterComponent:ReactClass 列表的尾部组件
• renderSectionHeader:(info:{section:SectionT}) =>React.Element 每个区的头部组件。通过函数返回Element，info参数的形式为：{section:{key:number,data:[Object,Object,...]}}
• renderItem:(info:{item:Item,index:number}) => ?React.Element 区section中的每个Item，类似iOS里的UITableView中的区里的cell。通过函数可以返回Element。

(2)分割线

• ItemSeparatorComponent:ReactClass 行与行之间的分割线组件,不会出现在第一行之前和最后一行之后
• SectionSeparatorCopponent:ReactClass 区和区之间的分割线

(3)初始化一屏显示的数量

• initialNumToRender:numbe指定一开始渲染的元素数量，为了让在最短的时间给用户呈现可见的内容，我们一般都设置刚刚填满一屏。

(4刷新

• onRefresh :( )=>void 如果设置了此项会在列表的头部添加一个标准的RefreshControl控件，实现下拉刷新的功能。要结合refreshing属性。
• refreshing :boolean 是否处于刷新状态在等待加载数据时，将其设置为true，列表就会显示一个正在加载的符号；加载完成设置为false。

(5)上拉加载的效果

• onEndReachedThreshold:number这里的参数number是一个比值。将值设置为0.5表示：距离内容最底部的距离为当前列表可见长度一半时触发onEndReached方法，达到上拉加载的效果。
• onEndReached:（info:{distanceFromEnd:number}）=>void

(6)为每个Item生成一个key

• keyExtractor:(item:ItemT,index:number) =>string此函数用于为给定的item生成一个不重复的key。Key的作用是使React能够区分同类元素的不同个体，以便在刷新的时候能够确定其变化的位置，减少重新渲染的开销。若不指定此函数，则默认抽取item.key作为key的值。若item.key也不存在，则使用数组下标。

（7）ListEmptyComponent:ReactClass|React.Element

• 当列表为空的时候所渲染的，可以是component、function或者element。

三.Demo

要实现的界面如下：

SectionList布局.png

主要实现如下:

设置数据源：

constructor(props){
        super(props);
        this.state = {
            data2:[{title:'活动精选',content:'分享自今日头条app:[匆匆而过，再见长岛......] http://',time:'去年'},{title:'简叔',content:'分享自今日头条app:[匆匆而过，再见长岛......] http://',time:'去年'}]
        }
    }

SectionList实现:

 {alert('刷新')}}
                    //每一行的分割组件
                    ItemSeparatorComponent = {this._itemSeparator}
                    //组和组的分割组件
                    SectionSeparatorComponent = {this._sectionSeparator}
                    //给每个item设置一个key
                    keyExtractor = {(item,index) =>('index'+index+item)}
                    //达到上拉加载的效果，表示距离可见视图底部为当前列表可见长度的0。1倍时候触发onEndReached方法
                    onEndReachedThreshold={0.1}
                    onEndReached={(info) =>{alert('到底底部')}}
                    //列表头部组件
                    ListHeaderComponent = {this._listHeader}
                    //列表尾部组件
                    ListFooterComponent = {this._listFooter}
                />
 _renderSectionHeader = (info) =>{
        return(
            
                
                    简信
                    新简信
                
            
        )
    }
    _itemSeparator(){
        return(
            
        )
    }
    _renderItem = (info) =>{
        return(
            
                
                
                    
                        {info.item.title}
                        {info.item.time}
                    
                    {info.item.content}
                
            
        )
    }
 _renderItemSec = (info) =>{
        return(
            
                
                    
                       
                        评论
                    
                    
                        
                        喜欢和赞
                    
                    
                        
                        关注
                    
                
                
                    
                        
                        投稿请求
                    
                    
                        
                        赞赏
                    
                    
                        
                        其他提醒
                    
                
            
        )
    }
   _listHeader = ()=>{
        return(
            
        )
    }
    _listFooter = ()=>{
        return(
            
        )
    }
    _sectionSeparator =()=>{
        return(
            
        )
    }