SectionList
用於渲染分區列表的高效能介面，支援最便利的功能
- 完全跨平台。
- 可配置的可見性回調。
- 列表標頭支援。
- 列表頁腳支援。
- 項目分隔線支援。
- 區段標頭支援。
- 區段分隔線支援。
- 異質資料和項目渲染支援。
- 下拉刷新。
- 滾動載入。
如果你不需要區段支援且想要更簡單的介面，請使用 <FlatList>。
範例
這是 VirtualizedList 的便利包裝器，因此繼承了它的屬性（以及 ScrollView 的屬性），這些屬性在此未明確列出，以及以下注意事項
- 當內容滾動出渲染視窗時，內部狀態不會被保留。請確保你的所有資料都捕獲在項目資料或外部儲存中，例如 Flux、Redux 或 Relay。
- 這是一個 PureComponent，這意味著如果 props 保持淺層相等，它將不會重新渲染。請確保你的 renderItem 函數依賴的所有內容都作為 prop（例如 extraData）傳遞，該 prop 在更新後不是 ===，否則你的 UI 可能不會在更改時更新。這包括 data prop 和父組件狀態。
- 為了限制記憶體並實現流暢滾動，內容在螢幕外非同步渲染。這意味著有可能滾動速度快於填充率，並短暫地看到空白內容。這是一種權衡，可以調整以適應每個應用程式的需求，我們正在幕後努力改進它。
- 預設情況下，列表會在每個項目上尋找 key 屬性，並將其用於 React key。或者，你可以提供自訂的 keyExtractor 屬性。
參考
屬性
VirtualizedList 屬性
必填renderItem
每個區段中每個項目的預設渲染器。可以在每個區段的基礎上覆蓋。應返回 React 元素。
| 類型 |
|---|
| 函數 |
渲染函數將傳遞一個具有以下鍵的物件
- 'item' (物件) - 此區段的
data鍵中指定的項目物件 - 'index' (數字) - 項目在區段內的索引。
- 'section' (物件) -
sections中指定的完整區段物件。 - 'separators' (物件) - 具有以下鍵的物件
- 'highlight' (函數) -
() => void - 'unhighlight' (函數) -
() => void - 'updateProps' (函數) -
(select, newProps) => void- 'select' (枚舉) - 可能的值為 'leading'、'trailing'
- 'newProps' (物件)
- 'highlight' (函數) -
必填sections
要渲染的實際資料，類似於 FlatList 中的 data 屬性。
| 類型 |
|---|
| Section 的陣列 |
extraData
一個標記屬性，用於告訴列表重新渲染（因為它實現了 PureComponent）。如果你的任何 renderItem、Header、Footer 等函數依賴於 data 屬性之外的任何內容，請將其放在這裡並將其視為不可變的。
| 類型 |
|---|
| 任何類型 |
initialNumToRender
在初始批次中渲染多少個項目。這應該足夠填滿螢幕，但不要太多。請注意，為了提高滾動到頂部操作的感知效能，這些項目永遠不會作為視窗渲染的一部分卸載。
| 類型 | 預設 |
|---|---|
| 數字 | 10 |
inverted
反轉滾動方向。使用 -1 的縮放變換。
| 類型 | 預設 |
|---|---|
| 布林值 | 否 |
ItemSeparatorComponent
在每個項目之間渲染，但不在頂部或底部。預設情況下，提供 highlighted、section 和 [leading/trailing][Item/Section] 屬性。renderItem 提供 separators.highlight/unhighlight，這將更新 highlighted 屬性，但你也可以使用 separators.updateProps 新增自訂屬性。可以是 React 組件（例如 SomeComponent），或 React 元素（例如 <SomeComponent />）。
| 類型 |
|---|
| 組件、函數、元素 |
keyExtractor
用於提取指定索引處給定項目的唯一鍵。鍵用於快取，並作為 React 鍵來追蹤項目重新排序。預設提取器檢查 item.key，然後檢查 item.id，然後像 React 一樣，回退到使用索引。請注意，這為每個項目設定了鍵，但每個整體區段仍然需要自己的鍵。
| 類型 |
|---|
| (item: 物件, index: 數字) => 字串 |
ListEmptyComponent
當列表為空時渲染。可以是 React 組件（例如 SomeComponent），或 React 元素（例如 <SomeComponent />）。
| 類型 |
|---|
| 組件、元素 |
ListFooterComponent
在列表的最末尾渲染。可以是 React 組件（例如 SomeComponent），或 React 元素（例如 <SomeComponent />）。
| 類型 |
|---|
| 組件、元素 |
ListHeaderComponent
在列表的最開始渲染。可以是 React 組件（例如 SomeComponent），或 React 元素（例如 <SomeComponent />）。
| 類型 |
|---|
| 組件、元素 |
onRefresh
如果提供，將新增標準的 RefreshControl 以實現「下拉刷新」功能。請確保也正確設定 refreshing 屬性。若要從頂部偏移 RefreshControl（例如 100 點），請使用 progressViewOffset={100}。
| 類型 |
|---|
| 函數 |
onViewableItemsChanged
當列的可見性變更時呼叫，由 viewabilityConfig 屬性定義。
| 類型 |
|---|
(callback: {changed: ViewToken[], viewableItems: ViewToken[]}) => void |
refreshing
在等待從刷新取得新資料時，將此設定為 true。
| 類型 | 預設 |
|---|---|
| 布林值 | 否 |
removeClippedSubviews
注意：在某些情況下可能存在錯誤（內容遺失） - 風險自負。
這可能會提高大型列表的滾動效能。
| 類型 | 預設 |
|---|---|
| 布林值 | 否 |
renderSectionFooter
在每個區段的底部渲染。
| 類型 |
|---|
(info: {section: Section}) => element ｜ null |
renderSectionHeader
在每個區段的頂部渲染。這些預設在 iOS 上會黏在 ScrollView 的頂部。請參閱 stickySectionHeadersEnabled。
| 類型 |
|---|
(info: {section: Section}) => element ｜ null |
SectionSeparatorComponent
在每個區段的頂部和底部渲染（請注意，這與僅在項目之間渲染的 ItemSeparatorComponent 不同）。這些旨在將區段與上方和下方的標頭分隔開，並且通常具有與 ItemSeparatorComponent 相同的 highlight 回應。也接收 highlighted、[leading/trailing][Item/Section] 以及來自 separators.updateProps 的任何自訂屬性。
| 類型 |
|---|
| 組件、元素 |
stickySectionHeadersEnabled
使區段標頭黏在螢幕頂部，直到下一個區段標頭將其推開。預設僅在 iOS 上啟用，因為這是該平台的標準。
| 類型 | 預設 |
|---|---|
| 布林值 | 否 Android true iOS |
方法
flashScrollIndicators() iOS
flashScrollIndicators();
瞬間顯示滾動指示器。
recordInteraction()
recordInteraction();
告知列表已發生互動，這應觸發可見性計算，例如，如果 waitForInteractions 為 true 且使用者尚未滾動。這通常由點擊項目或導航操作呼叫。
scrollToLocation()
scrollToLocation(params: SectionListScrollParams);
滾動到指定 sectionIndex 和 itemIndex（在區段內）的項目，該項目位於可見區域中，使得 viewPosition 0 將其放置在頂部（並且可能被黏性標頭覆蓋），1 在底部，而 0.5 在中間置中。
注意：如果未指定
getItemLayout或onScrollToIndexFailed屬性，則無法滾動到渲染視窗外的位置。
參數
| 名稱 | 類型 |
|---|---|
| params 必填 | 物件 |
有效的 params 鍵為
- 'animated' (布林值) - 列表是否應在滾動時執行動畫。預設為
true。 - 'itemIndex' (數字) - 要滾動到的項目的區段內索引。必填。
- 'sectionIndex' (數字) - 包含要滾動到的項目的區段索引。必填。
- 'viewOffset' (數字) - 偏移最終目標位置的固定像素數，例如，為了補償黏性標頭。
- 'viewPosition' (數字) - 值 0 將索引指定的項目放置在頂部，1 在底部，而 0.5 在中間置中。
類型定義
Section
一個物件，用於識別要為給定區段渲染的資料。
| 類型 |
|---|
| 任何類型 |
屬性
| 名稱 | 類型 | 描述 |
|---|---|---|
| data 必填 | 陣列 | 用於渲染此區段中項目的資料。物件陣列，很像 FlatList 的 data 屬性。 |
| key | 字串 | 可選的鍵，用於追蹤區段重新排序。如果你不打算重新排序區段，則預設將使用陣列索引。 |
| renderItem | 函數 | 可選地為此區段定義任意項目渲染器，覆蓋列表的預設 renderItem。 |
| ItemSeparatorComponent | 組件、元素 | 可選地為此區段定義任意項目分隔線，覆蓋列表的預設 ItemSeparatorComponent。 |
| keyExtractor | 函數 | 可選地為此區段定義任意鍵提取器，覆蓋預設 keyExtractor。 |