一瞬哼、SectionList和FlatList的區(qū)別
1.SectionList可以分組顯示，F(xiàn)latList不可以
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)數(shù)據(jù)源
- sections：數(shù)據(jù)類型是Array類型
(2) 頭部荣赶、每個(gè)區(qū)的Item、尾部組件
- ListHeaderComponent:ReactClass 列表的頭部組件
- ListFooterComponent:ReactClass 列表的尾部組件
- renderSectionHeader:(info:{section:SectionT}) =>React.Element 每個(gè)區(qū)的頭部組件鸽斟。通過函數(shù)返回Element拔创，info參數(shù)的形式為：{section:{key:number,data:[Object,Object,...]}}
- renderItem:(info:{item:Item,index:number}) => ?React.Element 區(qū)section中的每個(gè)Item，類似iOS里的UITableView中的區(qū)里的cell富蓄。通過函數(shù)可以返回Element剩燥。
(2)分割線
- ItemSeparatorComponent:ReactClass 行與行之間的分割線組件,不會(huì)出現(xiàn)在第一行之前和最后一行之后
- SectionSeparatorCopponent:ReactClass 區(qū)和區(qū)之間的分割線
(3)初始化一屏顯示的數(shù)量
- initialNumToRender:numbe指定一開始渲染的元素?cái)?shù)量，為了讓在最短的時(shí)間給用戶呈現(xiàn)可見的內(nèi)容立倍，我們一般都設(shè)置剛剛填滿一屏灭红。
(4刷新
- onRefresh :( )=>void 如果設(shè)置了此項(xiàng)會(huì)在列表的頭部添加一個(gè)標(biāo)準(zhǔn)的RefreshControl控件，實(shí)現(xiàn)下拉刷新的功能口注。要結(jié)合refreshing屬性变擒。
- refreshing :boolean 是否處于刷新狀態(tài)在等待加載數(shù)據(jù)時(shí)，將其設(shè)置為true寝志，列表就會(huì)顯示一個(gè)正在加載的符號(hào)娇斑；加載完成設(shè)置為false。
(5)上拉加載的效果
- onEndReachedThreshold:number這里的參數(shù)number是一個(gè)比值材部。將值設(shè)置為0.5表示：距離內(nèi)容最底部的距離為當(dāng)前列表可見長度一半時(shí)觸發(fā)onEndReached方法毫缆，達(dá)到上拉加載的效果。
- onEndReached:（info:{distanceFromEnd:number}）=>void
(6)為每個(gè)Item生成一個(gè)key
- keyExtractor:(item:ItemT,index:number) =>string此函數(shù)用于為給定的item生成一個(gè)不重復(fù)的key乐导。Key的作用是使React能夠區(qū)分同類元素的不同個(gè)體苦丁，以便在刷新的時(shí)候能夠確定其變化的位置，減少重新渲染的開銷物臂。若不指定此函數(shù)芬骄，則默認(rèn)抽取item.key作為key的值猾愿。若item.key也不存在，則使用數(shù)組下標(biāo)账阻。
（7）ListEmptyComponent:ReactClass|React.Element
- 當(dāng)列表為空的時(shí)候所渲染的蒂秘，可以是component、function或者element淘太。
三.Demo
要實(shí)現(xiàn)的界面如下：
SectionList布局.png
主要實(shí)現(xiàn)如下:
設(shè)置數(shù)據(jù)源：
constructor(props){
super(props);
this.state = {
data2:[{title:'簡書活動(dòng)精選',content:'分享自今日頭條app:[匆匆而過姻僧，再見長島......] http://',time:'去年'},{title:'簡叔',content:'分享自今日頭條app:[匆匆而過，再見長島......] http://',time:'去年'}]
}
}
SectionList實(shí)現(xiàn):
<SectionList
//數(shù)據(jù)源 這里需要設(shè)置key蒲牧，如果key的值相同那么就只會(huì)顯示一個(gè)組撇贺，第二個(gè)組的renderSectionHeader不會(huì)顯示
sections = {[
{renderItem:this._renderItemSec,key:'s1',data:[{}]},
{renderItem:this._renderItem,key:'s2',data:this.state.data2}
]}
//每個(gè)組的頭部組件
renderSectionHeader={this._renderSectionHeader}
//是否是刷新狀態(tài)
refreshing={false}
//刷新控件，當(dāng)下拉的時(shí)候冰抢，觸發(fā)方法
onRefresh={()=>{alert('刷新')}}
//每一行的分割組件
ItemSeparatorComponent = {this._itemSeparator}
//組和組的分割組件
SectionSeparatorComponent = {this._sectionSeparator}
//給每個(gè)item設(shè)置一個(gè)key
keyExtractor = {(item,index) =>('index'+index+item)}
//達(dá)到上拉加載的效果松嘶，表示距離可見視圖底部為當(dāng)前列表可見長度的0。1倍時(shí)候觸發(fā)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>評(píng)論</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>關(guān)注</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>投稿請(qǐng)求</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>
)
}
