【React Native】文件翻譯閱讀紀錄 - Components(組件) - SectionList

by - 上午9:00

Facebook Open Source React Native


SectionList

一個高性能的界面，用於呈現分段列表，支持最方便的功能：

  • 完全跨平台。
  • 可配置的可見度回調。
  • 列表標題支持。
  • 列表頁腳支持。
  • 項目分隔符支持。
  • 節頭支持。
  • 節分隔符支持。
  • 異構數據和項呈現支持。
  • 拉到刷新。
  • 滾動加載。
如果您不需要節支持並希望使用更簡單的界面，請使用 <FlatList>。

 簡單例子：
// Example 1 (Homogeneous Rendering)
<SectionList
  renderItem={({item, index, section}) => <Text key={index}>{item}</Text>}
  renderSectionHeader={({section: {title}}) => (
    <Text style={{fontWeight: 'bold'}}>{title}</Text>
  )}
  sections={[
    {title: 'Title1', data: ['item1', 'item2']},
    {title: 'Title2', data: ['item3', 'item4']},
    {title: 'Title3', data: ['item5', 'item6']},
  ]}
  keyExtractor={(item, index) => item + index}
/>

// Example 2 (Heterogeneous Rendering / No Section Headers)
const overrideRenderItem = ({ item, index, section: { title, data } }) => <Text key={index}>Override{item}</Text>

<SectionList
  renderItem={({ item, index, section }) => <Text key={index}>{item}</Text>}
  sections={[
    { title: 'Title1', data: ['item1', 'item2'], renderItem: overrideRenderItem },
    { title: 'Title2', data: ['item3', 'item4'] },
    { title: 'Title3', data: ['item5', 'item6'] },
  ]}
/>
這是<VirtualizedList>的一個便利包裝器，因此繼承了它的道具（以及<ScrollView>的道具，這裡沒有明確列出，以及以下警告：
  • 內容滾出渲染窗口時，不會保留內部狀態。確保在項目數據或外部存儲（如Flux，Redux或Relay）中捕獲所有數據。
  • 這是一個PureComponent，這意味著如果道具保持淺層相等，它將不會重新渲染。確保renderItem函數所依賴的所有內容在更新後作為prop（例如extraData）傳遞，而不是===，否則您的UI可能無法更新更新。這包括數據prop和父組件狀態。
  • 為了限制內存並啟用平滑滾動，內容在屏幕外異步呈現。這意味著可以比填充率更快地滾動並暫時看到空白內容。這是一個可以調整以適應每個應用程序需求的權衡，我們正在努力在幕後進行改進。
  • 默認情況下，列表在每個項目上查找關鍵支柱，並將其用於React鍵。或者，您可以提供自定義 keyExtractor道具。

Props

Required props:
Optional props:

Methods

Type Definitions

參考

Props

sections

要渲染的實際數據，類似於 FlatList 中的數據prop。
TYPEREQUIRED
array of SectionsYes

initialNumToRender

初始批次中要渲染的項目數。這應該足以填滿屏幕，但不是更多。請注意，這些項目永遠不會作為窗口渲染的一部分卸載，以提高滾動到頂部操作的感知性能。
TYPEREQUIRED
numberYes

keyExtractor

用於為指定索引處的給定項提取唯一鍵。密鑰用於緩存，並作為跟踪項目重新排序的反應鍵。默認提取器檢查item.key，然後回退到使用索引，就像react一樣。請注意，這會為每個項目設置鍵，但每個整體部分仍需要自己的鍵。
TYPEREQUIRED
(item: Item, index: number) => stringYes

renderItem

每個部分中每個項目的默認渲染器。可以基於每個部分進行覆蓋。應該返回一個React元素。
TYPEREQUIRED
functionYes
render 函數將通過以下鍵傳遞給對象：
  • 'item' (object) -本節數據鍵中指定的item對象
  • 'index' (number) - 該部分中的項目索引。
  • 'section' (object) - 部分中指定的完整節對象。
  • 'separators' (object) - 具有以下鍵的對象：
    • 'highlight' (function) - () => void
    • 'unhighlight' (function) - () => void
    • 'updateProps' (function) - (select, newProps) => void
      • 'select' (enum) - 可能的值是 'leading', 'trailing'
      • 'newProps' (object)

onEndReached

當滾動位置在渲染內容的 onEndReachedThreshold 內時調用一次。
TYPEREQUIRED
[(info: {distanceFromEnd: number}) => void]No

extraData

用於告知列表重新呈現的標記屬性（因為它實現了PureComponent）。如果你的任何renderItem，Header，Footer等函數依賴於數據道具之外的任何東西，請將其粘貼在此處並進行不可變處理。
TYPEREQUIRED
anyNo

ItemSeparatorComponent

在每個項目之間渲染，但不在頂部或底部。默認情況下，提供突出顯示的部分和[前導/尾隨] [項目/分隔符]道具。 renderItem提供separators.highlight / unhighlight，它將更新突出顯示的prop，但您也可以使用separators.updateProps添加自定義道具。
TYPEREQUIRED
[component, function, element]No

inverted

反轉滾動方向。使用-1的比例變換。
TYPEREQUIRED
[boolean]No

ListFooterComponent

在列表的最後呈現。可以是React Component Class，渲染函數或渲染元素。

TYPEREQUIRED
[component, function, element]No

legacyImplementation

TYPEREQUIRED
[boolean]No

ListEmptyComponent

列表為空時呈現。可以是React Component Class，渲染函數或渲染元素。
TYPEREQUIRED
[component, function, element]No

onEndReachedThreshold

距離末尾多少（以列表的可見長度為單位）列表的下邊緣必須來自內容的末尾才能觸發onEndReached回調。因此，當內容的結尾在列表的可見長度的一半之內時，值0.5將觸發onEndReached。
TYPEREQUIRED
[number]No

onRefresh

如果提供，將為“Pull to Refresh”功能添加標準RefreshControl。確保正確設置刷新道具。
TYPEREQUIRED
[() => void]No

onViewableItemsChanged

當viewabilityConfig prop定義時，行的可見度發生變化時調用。
TYPEREQUIRED
functionNo
該函數將通過以下鍵傳遞給對象：
  • 'viewableItems' (array of ViewTokens)
  • 'changed' (array of ViewTokens)
ViewToken 類型由ViewabilityHelper.js導出：
NAMETYPEREQUIRED
itemanyYes
keystringYes
indexnumberNo
isViewablebooleanYes
sectionanyNo

refreshing

在等待刷新的新數據時設置為true。
TYPEREQUIRED
[boolean]No

removeClippedSubviews

注意：在某些情況下可能存在錯誤（缺少內容） - 使用風險自負。

 這可以改善大型列表的滾動性能。
TYPEREQUIRED
booleanNo

ListHeaderComponent

在列表的最開始處呈現。可以是React Component Class，渲染函數或渲染元素。
TYPEREQUIRED
component, function, elementNo

renderSectionFooter

在每個部分的底部呈現。
TYPEREQUIRED
[(info: {section: SectionT}) => ?React.Element]No

renderSectionHeader

呈現在每個部分的頂部。這些在iOS上默認粘貼到ScrollView的頂部。請參見stickySectionHeadersEnabled。
TYPEREQUIRED
[(info: {section: SectionT}) => ?React.Element]No

SectionSeparatorComponent

在每個部分的頂部和底部渲染（請注意，這與ItemSeparatorComponent不同，後者僅在項目之間呈現）。這些用於將部分與上方和下方的標題分開，並且通常具有與ItemSeparatorComponent相同的高亮響應。還接收來自separators.updateProps的突出顯示的[leading / trailing] [Item / Separator]和任何自定義道具。
TYPEREQUIRED
[ReactClass]No

stickySectionHeadersEnabled

使章節標題貼在屏幕頂部，直到下一個標題將其推下。僅在iOS上默認啟用，因為那是平台標準。
TYPEREQUIRED
booleanNo

方法

scrollToLocation()

scrollToLocation(params);
滾動到位於可查看區域中的指定sectionIndex和itemIndex（在該部分內）的項目，以便viewPosition 0將其置於頂部（並且可以由粘性標題覆蓋），底部為1，並且居中於中間。
注意：如果不指定getItemLayout或onScrollToIndexFailed prop，則無法滾動到渲染窗口之外的位置。
參數:
NAMETYPEREQUIREDDESCRIPTION
paramsobjectYesSee below.
有效的參數是：
  • 'animated' (boolean) - 列表是否應該在滾動時執行動畫。默認為true。
  • 'itemIndex' (number) - 要滾動到的項目的部分內的索引。需要。
  • 'sectionIndex' (number) - 包含要滾動到的項的部分的索引。需要。
  • 'viewOffset' (number) - 用於偏移最終目標位置的固定數量的像素，例如以補償粘性標題。
  • 'viewPosition' (number) - 值為0時，index指定的項目位於頂部，1位於底部，0.5位於中間。

recordInteraction()

recordInteraction();
告訴列表發生了交互，這應該觸發可視性計算，例如，如果waitForInteractions為true且用戶未滾動。這通常通過點擊項目或導航操作來調用。

flashScrollIndicators()

flashScrollIndicators();
暫時顯示滾動指示器。

類型定義

部分

標識要為給定節創建的數據的對象。

TYPE
any
屬性:
NAMETYPEDESCRIPTION
dataarray本節中用於呈現項目的數據。 對像數組，很像FlatList的數據道具。
[key]string用於跟踪部分重新排序的可選鍵。 如果您不打算重新排序部分，則默認情況下將使用數組索引。
[renderItem]function（可選）為此部分定義任意項呈示器，覆蓋列表的默認renderItem。
[ItemSeparatorComponent]component, function, element可選擇為此部分定義任意項分隔符，覆蓋列表的默認ItemSeparatorComponent。
[keyExtractor]function可選擇為此部分定義任意鍵提取器，覆蓋默認的keyExtractor。


Share
Tweet
Pin
Share
Tags : , , , , , , , , , , , , , , ,

You May Also Like

0 意見