ReactNative的SectionList
2017-08-02 本文已影响400人
丿雫
一、SectionList和FlatList的区别
1.SectionList可以分组显示，FlatList不可以
2.SectionList支持头部吸顶悬浮效果
如果显示的列表不需要分组，可以使用<Flatlist>，如果你的列表需要分组则使用SectionList.官方给出的SectionList的简单例子有如下两种：
（1）不同的section渲染相同类型的子组件
<SectionList
renderItem = {({item}) => <ListItem title = {item.title}/>}
renderSectionHeader = {({section}) => <Header title={section.key}>}
sections = {[
{data: [...], title: ...},
{data: [...], title: ...},
{data: [...], title: ...},
]}
/>
(2)不同section渲染不同类型的子组件
<SectionList
sections = {[
{data: [...], renderItem: ...},
{data: [...], renderItem: ...},
{data: [...], renderItem: ...},
]}
/>
二、属性
(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实现:
<SectionList
//数据源 这里需要设置key，如果key的值相同那么就只会显示一个组，第二个组的renderSectionHeader不会显示
sections = {[
{renderItem:this._renderItemSec,key:'s1',data:[{}]},
{renderItem:this._renderItem,key:'s2',data:this.state.data2}
]}
//每个组的头部组件
renderSectionHeader={this._renderSectionHeader}
//是否是刷新状态
refreshing={false}
//刷新控件，当下拉的时候，触发方法
onRefresh={()=>{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(
<View style={{paddingHorizontal:px2dp(40),height:px2dp(100),borderBottomColor:'gray',borderBottomWidth:px2dp(0.6),backgroundColor:'white'}}>
<View style={{flex:1,flexDirection:'row',justifyContent:'space-between',alignItems:'center'}} >
<Text style={{fontSize:px2dp(38)}}>简信</Text>
<Text style={{color:'red',fontSize:px2dp(38)}}>新简信</Text>
</View>
</View>
)
}
_itemSeparator(){
return(
<View style={{height:px2dp(2),width:theme.screenWidth,backgroundColor:theme.lightGray}}></View>
)
}
_renderItem = (info) =>{
return(
<View style={{width:theme.screenWidth,height:px2dp(160),flexDirection:'row',alignItems:'center',paddingHorizontal:px2dp(40),paddingVertical:px2dp(30)}}>
<Image style={{width:px2dp(110),height:px2dp(110),borderRadius:px2dp(55)}} source = {require('../image/photo.png')}/>
<View style={{marginLeft:px2dp(30),flex:1,height:px2dp(100)}}>
<View style={{marginHorizontal:0,marginTop:0,height:px2dp(45),flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
<Text style={{fontSize:px2dp(38)}} key ={info.item.name}>{info.item.title}</Text>
<Text style={{fontSize:px2dp(24),color:'gray',marginRight:0}}>{info.item.time}</Text>
</View>
<Text style={{marginTop:px2dp(20), marginRight:px2dp(30),height:px2dp(30),fontSize:px2dp(26),color:'gray'}} numberOfLines={1}>{info.item.content}</Text>
</View>
</View>
)
}
_renderItemSec = (info) =>{
return(
<View style={{height:px2dp(400), flex:1}}>
<View style={styles.buttonview}>
<TouchableOpacity style={[styles.button,{marginLeft:(theme.screenWidth-px2dp(150)*3)/8}]}>
<Image style={styles.image} source={require('../image/companyservice_hg.png')}/>
<Text>评论</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Image style={styles.image} source={require('../image/companyservice_hg.png')}/>
<Text>喜欢和赞</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.button,{marginRight:(theme.screenWidth-px2dp(150)*3)/8}]}>
<Image style={styles.image} source={require('../image/companyservice_hg.png')}/>
<Text>关注</Text>
</TouchableOpacity>
</View>
<View style={styles.buttonview}>
<TouchableOpacity style={[styles.button,{marginLeft:(theme.screenWidth-px2dp(150)*3)/8}]}>
<Image style={styles.image} source={require('../image/companyservice_hg.png')}/>
<Text>投稿请求</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Image style={styles.image} source={require('../image/companyservice_hg.png')}/>
<Text>赞赏</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.button,{marginRight:(theme.screenWidth-px2dp(150)*3)/8}]}>
<Image style={styles.image} source={require('../image/companyservice_hg.png')}/>
<Text>其他提醒</Text>
</TouchableOpacity>
</View>
</View>
)
}
_listHeader = ()=>{
return(
<View style={{backgroundColor:theme.lightGray,height:px2dp(40)}}></View>
)
}
_listFooter = ()=>{
return(
<View style={{backgroundColor:theme.lightGray,height:px2dp(40)}}></View>
)
}
_sectionSeparator =()=>{
return(
<View style={{height:px2dp(40),backgroundColor:theme.lightGray,borderBottomColor:'gray',borderBottomWidth:px2dp(0.4),borderTopColor:'gray',borderTopWidth:px2dp(0.4)}}></View>
)
}
