勤做笔记，方便自己，帮助他人。
属性
-
ScrollViewprops... 集成了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 }) =>
<View style={styles.itemView}>
<Text >{item}</Text>
</View>
}
-
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短暂地显示滚动指示器。
<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={'暂无圈好友'}/>}
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}
/>
注意：
- 当某行滑出渲染区域之外后，其Item内部状态将不会保留。
- 本组件继承自
PureComponent而非通常的Component，这意味着如果其props在浅比较中是相等的，则不会重新渲染。所以请先检查你的renderItem函数所依赖的props数据（包括data属性以及可能用到的父组件的state），如果是一个引用类型（Object或者数组都是引用类型），则需要先修改其引用地址（比如先复制到一个新的Object或者数组中），然后再修改其值，否则界面很可能不会刷新。 - 为了保持滑动的流畅，列表内容会在屏幕外异步绘制。所以快速滑动有空白。
网友评论