SectionList
SectionList
用于渲染分段列表的高性能界面,支持最方便的功能:
- 完全跨平台。
- 可配置的可视性回调。
- 列表头支持。
- 列出页脚支持。
- 项目分隔符支持。
- 节头支持。
- 部分分隔符支持。
- 异构数据和项目渲染支持。
- 拉到刷新。
- 滚动加载。
如果您不需要部分支持并想要更简单的界面,请使用<FlatList>。
简单的例子:
<SectionList
renderItem={{item}) => <ListItem title={item} />}
renderSectionHeader={{section}) => <Header title={section.title} />}
sections={[ // homogenous rendering between sections
{data: [...], title: ...},
{data: [...], title: ...},
{data: [...], title: ...},
]}
/>
<SectionList
sections={[ // heterogeneous rendering between sections
{data: [...], renderItem: ...},
{data: [...], renderItem: ...},
{data: [...], renderItem: ...},
]}
/>
这是一个方便的包装<VirtualizedList>,因此继承了ScrollView其中未明确列出的道具(以及那些道具)以及以下注意事项:
- 当内容滚出渲染窗口时内部状态不会保留。确保所有数据都在项目数据或外部商店(如Flux,Redux或Relay)中捕获。
- 这
PureComponent
意味着如果props
保持浅浅平等,它不会重新渲染。确保你的renderItem
函数所依赖的所有东西都作为一个道具(egextraData
)传递,而不是===
在更新之后传递,否则你的UI可能不会在更改时更新。这包括data
prop和父组件状态。
- 为了约束内存并启用平滑滚动,内容将异步呈现在屏幕外。这意味着可以以比填充率更快的速度滚动,并可以立即查看空白内容。这是一种权衡,可以根据每个应用程序的需要进行调整,并且我们正在努力在幕后改进它。
- 默认情况下,列表
key
在每个项目上查找一个道具并将其用于React键。或者,您可以提供自定义keyExtractor
道具。
道具
stickySectionHeadersEnabled?:
方法
scrollToLocation(params: object)
滚动到该项目指定的sectionIndex
和itemIndex
定位在,使得所述可视区域(区段),viewPosition
在底部0地方它在顶部(并且可以由粘性头被覆盖),1,和0.5为中心在中间。viewOffset
是固定数量的像素来抵消最终目标位置,例如以补偿粘性标题。
注意:不能在不指定getItemLayout
道具的情况下滚动到渲染窗口之外的位置。
recordInteraction()
告诉列表发生了交互,这应该触发可视性计算,例如,如果waitForInteractions
为true并且用户没有滚动。这通常是通过点击项目或导航操作来调用的。
flashScrollIndicators()
瞬间显示滚动指示器。