跳到主要内容

SectionList

用于渲染分段列表的高性能接口，支持最便捷的功能

  • 完全跨平台。
  • 可配置的可视性回调。
  • 列表头部支持。
  • 列表尾部支持。
  • 项目分隔符支持。
  • 段头支持。
  • 段分隔符支持。
  • 异构数据和项目渲染支持。
  • 下拉刷新。
  • 滚动加载。

如果不需要段支持并且想要更简单的界面，请使用 <FlatList>。

示例​

这是 <VirtualizedList> 的便捷包装器，因此继承了其 props（以及 <ScrollView> 的 props），这些 props 未在此处明确列出，以及以下注意事项

  • 当内容滚动出渲染窗口时，内部状态不会保留。请确保您的所有数据都捕获在项目数据或外部存储（如 Flux、Redux 或 Relay）中。
  • 这是一个 PureComponent，这意味着如果 props 保持浅相等，它将不会重新渲染。请确保您的 renderItem 函数依赖的所有内容都作为 prop（例如 extraData）传递，该 prop 在更新后不是 ===，否则您的 UI 可能不会在更改时更新。这包括 data prop 和父组件状态。
  • 为了约束内存并实现平滑滚动，内容以异步方式在屏幕外渲染。这意味着可能滚动速度快于填充率，并短暂地看到空白内容。这是一种权衡，可以调整以适应每个应用程序的需求，我们正在幕后努力改进它。
  • 默认情况下，列表在每个项目上查找 key prop，并将其用作 React key。或者，您可以提供自定义 keyExtractor prop。

参考

Props​

VirtualizedList Props​

继承 VirtualizedList Props。

必需
renderItem​

每个段中每个项目的默认渲染器。可以在每个段的基础上重写。应返回一个 React 元素。

类型
函数

渲染函数将传递一个对象，其中包含以下键

  • 'item' (object) - 此段的 data 键中指定的项目对象
  • 'index' (number) - 项目在段内的索引。
  • 'section' (object) - sections 中指定的完整段对象。
  • 'separators' (object) - 具有以下键的对象
    • 'highlight' (function) - () => void
    • 'unhighlight' (function) - () => void
    • 'updateProps' (function) - (select, newProps) => void
      • 'select' (enum) - 可能的值为 'leading'、'trailing'
      • 'newProps' (object)

必需
sections​

要渲染的实际数据，类似于 FlatList 中的 data prop。

类型
array of Sections

extraData​

用于告诉列表重新渲染的标记属性（因为它实现了 PureComponent）。如果您的任何 renderItem、Header、Footer 等函数依赖于 data prop 之外的任何内容，请将其放在此处并将其视为不可变的。

类型
any

initialNumToRender​

初始批次中要渲染的项目数。这应该足以填充屏幕，但不要太多。请注意，这些项目永远不会作为窗口渲染的一部分卸载，以提高滚动到顶部操作的感知性能。

类型默认
number10

inverted​

反转滚动方向。使用 -1 的缩放变换。

类型默认
booleanfalse

ItemSeparatorComponent​

在每个项目之间渲染，但不在顶部或底部。默认情况下，提供 highlighted、section 和 [leading/trailing][Item/Section] props。renderItem 提供 separators.highlight/unhighlight，这将更新 highlighted prop，但您也可以使用 separators.updateProps 添加自定义 props。可以是 React 组件（例如 SomeComponent），也可以是 React 元素（例如 <SomeComponent />）。

类型
component, function, element

keyExtractor​

用于为指定索引处的给定项目提取唯一键。键用于缓存，并用作 React 键以跟踪项目重新排序。默认提取器检查 item.key，然后检查 item.id，然后回退到使用索引，就像 React 一样。请注意，这会为每个项目设置键，但每个整体段仍然需要自己的键。

类型
(item: object, index: number) => string

ListEmptyComponent​

当列表为空时渲染。可以是 React 组件（例如 SomeComponent），也可以是 React 元素（例如 <SomeComponent />）。

类型
component, element

ListFooterComponent​

在列表的最末尾渲染。可以是 React 组件（例如 SomeComponent），也可以是 React 元素（例如 <SomeComponent />）。

类型
component, element

ListHeaderComponent​

在列表的最开始处渲染。可以是 React 组件（例如 SomeComponent），也可以是 React 元素（例如 <SomeComponent />）。

类型
component, element

onRefresh​

如果提供，将添加标准 RefreshControl 以实现“下拉刷新”功能。请确保也正确设置 refreshing prop。要从顶部偏移 RefreshControl（例如 100 像素），请使用 progressViewOffset={100}。

类型
函数

onViewableItemsChanged​

当行的可见性发生变化时调用，由 viewabilityConfig prop 定义。

类型
(callback: {changed: ViewToken[], viewableItems: ViewToken[]}) => void

refreshing​

在等待来自刷新的新数据时，将此项设置为 true。

类型默认
booleanfalse

removeClippedSubviews​

注意：在某些情况下可能存在错误（内容丢失） - 使用风险自负。

这可能会提高大型列表的滚动性能。

类型默认
booleanfalse

renderSectionFooter​

在每个段的底部渲染。

类型
(info: {section: Section}) => element ｜ null

renderSectionHeader​

在每个段的顶部渲染。在 iOS 上，这些默认情况下会粘在 ScrollView 的顶部。请参阅 stickySectionHeadersEnabled。

类型
(info: {section: Section}) => element ｜ null

SectionSeparatorComponent​

在每个段的顶部和底部渲染（请注意，这与仅在项目之间渲染的 ItemSeparatorComponent 不同）。这些旨在将段与上方和下方的标题分隔开，并且通常具有与 ItemSeparatorComponent 相同的突出显示响应。还接收来自 separators.updateProps 的 highlighted、[leading/trailing][Item/Section] 和任何自定义 props。

类型
component, element

stickySectionHeadersEnabled​

使段标题粘在屏幕顶部，直到下一个段标题将其推开。仅在 iOS 上默认启用，因为那是该平台的标准。

类型默认
booleanfalse
Android
true
iOS

方法​

flashScrollIndicators()
iOS
​

tsx
flashScrollIndicators();

短暂显示滚动指示器。

recordInteraction()​

tsx
recordInteraction();

告诉列表已发生交互，这应触发可视性计算，例如，如果 waitForInteractions 为 true 并且用户尚未滚动。这通常由点击项目或导航操作调用。

scrollToLocation()​

tsx
scrollToLocation(params: SectionListScrollParams);

滚动到指定 sectionIndex 和 itemIndex（在段内）的项目，该项目位于可视区域中，使得 viewPosition 0 将其放置在顶部（并且可能被粘性标题覆盖），1 在底部，而 0.5 在中间居中。

注意：如果未指定 getItemLayout 或 onScrollToIndexFailed prop，则无法滚动到渲染窗口之外的位置。

参数

名称类型
params
必需
object

有效的 params 键是

  • 'animated' (boolean) - 列表在滚动时是否应进行动画处理。默认为 true。
  • 'itemIndex' (number) - 要滚动到的项目的段内索引。必需。
  • 'sectionIndex' (number) - 包含要滚动到的项目的段的索引。必需。
  • 'viewOffset' (number) - 用于偏移最终目标位置的固定像素数，例如，补偿粘性标题。
  • 'viewPosition' (number) - 值 0 将索引指定的项目放置在顶部，1 在底部，而 0.5 在中间居中。

类型定义​

Section​

一个对象，用于标识要为给定段渲染的数据。

类型
any

属性

名称类型描述
data
必需
array用于渲染此段中的项目的数据。对象数组，很像 FlatList 的 data prop。
keystring用于跟踪段重新排序的可选键。如果您不打算重新排序段，则默认情况下将使用数组索引。
renderItem函数可选择为此段定义任意项目渲染器，覆盖列表的默认 renderItem。
ItemSeparatorComponentcomponent, element可选择为此段定义任意项目分隔符，覆盖列表的默认 ItemSeparatorComponent。
keyExtractor函数可选择为此段定义任意键提取器，覆盖默认 keyExtractor。