勤做筆記那先，方便自己役电，幫助他人凶异。
屬性
ScrollViewprops... 集成了scrollview的屬性sections用來(lái)渲染的數(shù)據(jù)格了，類(lèi)似于 FlatList 中的data屬性看铆。
數(shù)據(jù)格式如下：
[
{ title: 'a', data: ['a1', 'a2'] },
{ title: 'b', data: ['b1', 'b2','b3'] },
{ title: 'c', data: ['c1'] },
]
initialNumToRender指定一開(kāi)始渲染的元素?cái)?shù)量，最好剛剛夠填滿(mǎn)一個(gè)屏幕盛末，這樣保證了用最短的時(shí)間給用戶(hù)呈現(xiàn)可見(jiàn)的內(nèi)容弹惦。注意這第一批次渲染的元素不會(huì)在滑動(dòng)過(guò)程中被卸載，這樣是為了保證用戶(hù)執(zhí)行返回頂部的操作時(shí)悄但，不需要重新渲染首批元素棠隐。keyExtractor一個(gè)不重復(fù)的keyrenderItem每一個(gè)section中的每一個(gè)列表項(xiàng)Item(參數(shù)名固定)
// item 列表項(xiàng)數(shù)據(jù)
// index 列表項(xiàng)在section中的索引
// section 列表項(xiàng)的section索引
// separators: {
// highlight',
// unhighlight,
// updateProps:{
// select,
// newProps,
// }
// }
renderItem={({ item, index, section, separators }) =>
<View style={styles.itemView}>
<Text >{item}</Text>
</View>
}
onEndReached當(dāng)列表被滾動(dòng)到距離內(nèi)容最底部不足onEndReachedThreshold的距離時(shí)調(diào)用。 一般用來(lái)實(shí)現(xiàn)加載更多算墨。extraData如果有除data以外的數(shù)據(jù)用在列表中（不論是用在renderItem還是Header或者Footer中）宵荒，請(qǐng)?jiān)诖藢傩灾兄付āＭ瑫r(shí)此數(shù)據(jù)在修改時(shí)也需要先修改其引用地址（比如先復(fù)制到一個(gè)新的Object或者數(shù)組中）净嘀，然后再修改其值报咳，否則界面很可能不會(huì)刷新。ItemSeparatorComponent行與行之間的分隔線(xiàn)組件挖藏。不會(huì)出現(xiàn)在第一行之前和最后一行之后inverted翻轉(zhuǎn)滾動(dòng)方向暑刃。實(shí)質(zhì)是將scale變換設(shè)置為-1。 [boolean]legacyImplementationListEmptyComponent當(dāng)列表數(shù)據(jù)為空時(shí)渲染的組件膜眠。onEndReachedThreshold決定當(dāng)距離內(nèi)容最底部還有多遠(yuǎn)時(shí)觸發(fā)onEndReached回調(diào)岩臣。注意此參數(shù)是一個(gè)比值而非像素單位。比如宵膨，0.5表示距離內(nèi)容最底部的距離為當(dāng)前列表可見(jiàn)長(zhǎng)度的一半時(shí)觸發(fā)架谎。onRefresh在列表頭部添加一個(gè)標(biāo)準(zhǔn)的RefreshControl控件，以便實(shí)現(xiàn)“下拉刷新”的功能辟躏。同時(shí)你需要正確設(shè)置refreshing屬性谷扣。
onViewableItemsChanged在可見(jiàn)行元素變化時(shí)調(diào)用∩铀觯可見(jiàn)范圍和變化頻率等參數(shù)的配置請(qǐng)?jiān)O(shè)置viewabilityConfig屬性会涎。refreshing在等待加載新數(shù)據(jù)時(shí)將此屬性設(shè)為true，列表就會(huì)顯示出一個(gè)正在加載的符號(hào)瑞凑。removeClippedSubviewsListHeaderComponent頭部組件末秃。ListFooterComponent尾部組件renderSectionHeader每個(gè)section的頭部組件。在iOS上籽御，這些headers是默認(rèn)粘接在ScrollView的頂部的（也可以通過(guò)stickySectionHeadersEnabled來(lái)控制）renderSectionFooter每個(gè)組的尾部組件练慕。SectionSeparatorComponent類(lèi)似于ItemSeparatorComponent惰匙。 section 之間的間隙stickySectionHeadersEnabled當(dāng)下一個(gè)section把它的前一個(gè)section的可視區(qū)推離屏幕的時(shí)候，讓這個(gè)section的header粘連在屏幕的頂端贺待。這個(gè)屬性在iOS上是默認(rèn)可用的徽曲，因?yàn)檫@是iOS的平臺(tái)規(guī)范。（說(shuō)白了就是吸頂效果）
方法
-
scrollToLocation滾動(dòng)列表到指定的區(qū)域（參數(shù)名固定）
/**
*
* @param I Item 點(diǎn)擊事件傳遞過(guò)來(lái)的index
* 'viewPosition' (number) - 為0時(shí)將這個(gè)列表項(xiàng)滾動(dòng)到可視區(qū)頂部
* (可能會(huì)被頂部粘接的header覆蓋),
* 為1時(shí)將它滾動(dòng)到可視區(qū)底部, 為0.5時(shí)將它滾動(dòng)到可視區(qū)中央麸塞。
* 'viewOffset' (number) - 繼續(xù)偏移30像素的位置
* 'sectionIndex' (number) - 第number個(gè)section
* 'itemIndex' (number) - 的第number個(gè)item
* 'animated' (boolean) - 是否啟用動(dòng)畫(huà)
*/
scrollToLocation(i) {
this.refs.SectionList.scrollToLocation({
animated : true,
itemIndex : 0,
sectionIndex : i,
viewOffset : 30
})
}
-
recordInteraction主動(dòng)通知列表發(fā)生了一個(gè)事件，以使列表重新計(jì)算可視區(qū)域涧衙。比如說(shuō)當(dāng)waitForInteractions 為 true 并且用戶(hù)沒(méi)有滾動(dòng)列表時(shí)哪工，就可以調(diào)用這個(gè)方法。不過(guò)一般來(lái)說(shuō)弧哎，當(dāng)用戶(hù)點(diǎn)擊了一個(gè)列表項(xiàng)雁比，或發(fā)生了一個(gè)導(dǎo)航動(dòng)作時(shí)，我們就可以調(diào)用這個(gè)方法撤嫩。 -
flashScrollIndicators短暫地顯示滾動(dòng)指示器偎捎。
<SectionList
keyExtractor={(item, index) => item + index}
ref='SectionList'
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={this.onRefresh}
tintColor={[CS.THEME11]}
colors={[CS.THEME11]}
/>
}
refreshing={refreshing}
sections={list}
renderItem={({ item }) =>
<Item
del={() => this.fetchDel(item)}
item={item}
btnPress={() => this.goToSendMsg(item)}
/>
}
ListEmptyComponent={<NullPage text={'暫無(wú)圈好友'}/>}
ListHeaderComponent={<Header data={}}/>}
ListFooterComponent={<View style={{ height: 100 }}/>}
renderSectionHeader={({ section }) =>
<View style={{ height: 24 }}>
<Text style={styles.sectionTitle}>{section.title}</Text>
</View>
}
getItemLayout={this._getItemLayout}
/>
注意：
- 當(dāng)某行滑出渲染區(qū)域之外后，其Item內(nèi)部狀態(tài)將不會(huì)保留序攘。
- 本組件繼承自
PureComponent而非通常的Component茴她，這意味著如果其props在淺比較中是相等的，則不會(huì)重新渲染程奠。所以請(qǐng)先檢查你的renderItem函數(shù)所依賴(lài)的props數(shù)據(jù)（包括data屬性以及可能用到的父組件的state）丈牢，如果是一個(gè)引用類(lèi)型（Object或者數(shù)組都是引用類(lèi)型），則需要先修改其引用地址（比如先復(fù)制到一個(gè)新的Object或者數(shù)組中）瞄沙，然后再修改其值己沛，否則界面很可能不會(huì)刷新。 - 為了保持滑動(dòng)的流暢距境，列表內(nèi)容會(huì)在屏幕外異步繪制申尼。所以快速滑動(dòng)有空白。
