跳到主要内容

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”（对象）- 此分段的 data 键中指定的项目对象
  • “index”（数字）- 项目在分段中的索引。
  • “section”（对象）- sections 中指定的完整分段对象。
  • “separators”（对象）- 具有以下键的对象
    • “highlight”（函数）- () => void
    • “unhighlight”（函数）- () => void
    • “updateProps”（函数）- (select, newProps) => void
      • “select”（枚举）- 可能的值为“leading”、“trailing”
      • “newProps”（对象）

必需
sections​

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

类型
Section 的数组，请参阅 Section

extraData​

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

类型
任意类型

initialNumToRender​

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

类型默认值
数字10

inverted​

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

类型默认值
布尔值false

ItemSeparatorComponent​

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

类型
组件、函数、元素

keyExtractor​

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

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

ListEmptyComponent​

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

类型
组件、元素

ListFooterComponent​

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

类型
组件、元素

ListHeaderComponent​

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

类型
组件、元素

onRefresh​

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

类型
函数

onViewableItemsChanged​

当行的可视性更改时调用，由 viewabilityConfig prop 定义。

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

refreshing​

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

类型默认值
布尔值false

removeClippedSubviews​

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

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

类型默认值
布尔值false

renderSectionFooter​

在每个分段的底部渲染。

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

renderSectionHeader​

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

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

SectionSeparatorComponent​

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

类型
组件、元素

stickySectionHeadersEnabled​

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

类型默认值
布尔值false
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
必需
对象

有效的 params 键包括

  • “animated”（布尔值）- 列表在滚动时是否应执行动画。默认为 true。
  • “itemIndex”（数字）- 要滚动到的项目的分段内索引。必需。
  • “sectionIndex”（数字）- 包含要滚动到的项目的分段的索引。必需。
  • “viewOffset”（数字）- 偏移最终目标位置的固定像素数，例如，补偿粘性标题。
  • “viewPosition”（数字）- 值 0 将索引指定的项目放置在顶部，1 在底部，0.5 在中间居中。

类型定义​

Section​

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

类型
任意类型

属性

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