VirtualizedList

更方便的 <FlatList> 和 <SectionList> 組件的基礎實作，這些組件的文件也更完善。一般來說，只有在您需要比 FlatList 提供的彈性更大的情況下才應該真正使用此組件，例如用於不可變資料而不是純陣列。

虛擬化透過維護有限的活動項目渲染視窗，並將渲染視窗外的所有項目替換為適當大小的空白空間，大幅改善大型列表的記憶體消耗和效能。視窗會適應滾動行為，並且項目會以低優先順序（在任何正在執行的互動之後）以遞增方式渲染（如果它們遠離可見區域），否則以高優先順序渲染以最大程度地減少看到空白空間的可能性。

範例

TypeScript
JavaScript

一些注意事項

當內容滾動出渲染視窗時，內部狀態不會保留。請確保您的所有資料都擷取在項目資料或外部儲存區（如 Flux、Redux 或 Relay）中。
這是一個 PureComponent，這表示如果 props 是淺層相等 (shallow-equal)，它將不會重新渲染。請確保您的 renderItem 函式所依賴的所有內容都作為 prop 傳遞（例如 extraData），且在更新後不是 ===，否則您的 UI 可能不會在變更時更新。這包括 data prop 和父組件狀態。
為了限制記憶體並實現流暢滾動，內容會異步地在螢幕外渲染。這表示滾動速度可能快於填充率，並且可能會短暫看到空白內容。這是一種權衡，可以調整以適應每個應用程式的需求，我們正在幕後努力改進它。
預設情況下，列表會在每個項目上尋找 key prop，並將其用於 React key。或者，您可以提供自訂的 keyExtractor prop。

參考

Props

ScrollView Props

繼承 ScrollView Props。

`data`

傳遞給 getItem 和 getItemCount 以檢索項目的不透明資料類型。

類型
any

必填
`getItem`

tsx
(data: any, index: number) => any;

用於從任何種類的資料 blob 中提取項目的通用存取器。

類型
function

必填
`getItemCount`

tsx
(data: any) => number;

決定資料 blob 中有多少個項目。

類型
function

必填
`renderItem`

tsx
(info: any) => ?React.Element<any>

從 data 中取得一個項目，並將其渲染到列表中

類型
function

`CellRendererComponent`

CellRendererComponent 允許自訂當 renderItem/ListItemComponent 渲染的 cell 放入底層 ScrollView 時的包裝方式。此組件必須接受事件處理程序，以通知 VirtualizedList cell 內的變更。

類型
`React.ComponentType<CellRendererProps>`

`ItemSeparatorComponent`

在每個項目之間渲染，但不在頂部或底部渲染。預設情況下，會提供 highlighted 和 leadingItem props。renderItem 提供 separators.highlight/unhighlight，這將更新 highlighted prop，但您也可以使用 separators.updateProps 新增自訂 props。可以是 React 組件（例如 SomeComponent），或 React 元素（例如 <SomeComponent />）。

類型
component, function, element

`ListEmptyComponent`

當列表為空時渲染。可以是 React 組件（例如 SomeComponent），或 React 元素（例如 <SomeComponent />）。

類型
component, element

`ListItemComponent`

每個資料項目都使用此元素渲染。可以是 React 組件類別，或渲染函式。

類型
component, function

`ListFooterComponent`

在所有項目的底部渲染。可以是 React 組件（例如 SomeComponent），或 React 元素（例如 <SomeComponent />）。

類型
component, element

`ListFooterComponentStyle`

用於 ListFooterComponent 的內部 View 的樣式。

類型	必填
ViewStyleProp	否

`ListHeaderComponent`

在所有項目的頂部渲染。可以是 React 組件（例如 SomeComponent），或 React 元素（例如 <SomeComponent />）。

類型
component, element

`ListHeaderComponentStyle`

用於 ListHeaderComponent 的內部 View 的樣式。

類型
View Style

`debug`

debug 將開啟額外的記錄和視覺覆蓋，以協助偵錯使用方式和實作，但效能會大幅降低。

類型
boolean

`disableVirtualization`

已棄用。 虛擬化提供顯著的效能和記憶體最佳化，但會完全卸載渲染視窗外的 react 實例。您應該只需要為了偵錯目的而停用此功能。

類型
boolean

`extraData`

用於告知列表重新渲染的標記屬性（因為它實作了 PureComponent）。如果您的任何 renderItem、Header、Footer 等函式依賴於 data prop 之外的任何內容，請將其放在這裡並將其視為不可變的。

類型
any

`getItemLayout`

tsx
(
  data: any,
  index: number,
) => {length: number, offset: number, index: number}

類型
function

`horizontal`

如果為 true，則水平並排渲染項目，而不是垂直堆疊。

類型
boolean

`initialNumToRender`

初始批次中要渲染的項目數。這應該足以填滿螢幕，但不要太多。請注意，為了提高滾動到頂部動作的感知效能，這些項目永遠不會作為視窗化渲染的一部分卸載。

類型	預設
number	`10`

`initialScrollIndex`

不要從頂部開始並從第一個項目開始，而是從 initialScrollIndex 開始。這會停用「滾動到頂部」最佳化，該最佳化會使前 initialNumToRender 個項目始終渲染，並立即渲染從此初始索引開始的項目。需要實作 getItemLayout。

類型
number

`inverted`

反轉滾動方向。使用 -1 的比例轉換。

類型
boolean

`keyExtractor`

tsx
(item: any, index: number) => string;

用於為指定索引處的給定項目提取唯一 key。Key 用於快取，並作為 react key 來追蹤項目重新排序。預設提取器會檢查 item.key，然後檢查 item.id，然後回退到使用索引，就像 React 所做的那樣。

類型
function

`maxToRenderPerBatch`

每個增量渲染批次中要渲染的最大項目數。一次渲染的項目越多，填充率就越好，但回應能力可能會受到影響，因為渲染內容可能會干擾回應按鈕點擊或其他互動。

類型
number

`onEndReached`

當滾動位置到達列表邏輯結尾的 onEndReachedThreshold 範圍內時，呼叫一次。

類型
`(info: {distanceFromEnd: number}) => void`

`onEndReachedThreshold`

列表的尾端邊緣必須距離內容結尾多遠（以列表的可見長度單位計），才會觸發 onEndReached 回調。因此，值為 0.5 將在內容結尾位於列表可見長度的一半範圍內時觸發 onEndReached。

類型	預設
number	`2`

`onRefresh`

tsx
() => void;

如果提供，將新增標準 RefreshControl 以實現「下拉刷新」功能。請確保也正確設定 refreshing prop。

類型
function

`onScrollToIndexFailed`

tsx
(info: {
  index: number,
  highestMeasuredFrameIndex: number,
  averageItemLength: number,
}) => void;

用於處理滾動到尚未測量的索引時的失敗。建議的動作是計算您自己的偏移量並 scrollTo 它，或盡可能滾動，然後在渲染更多項目後重試。

類型
function

`onStartReached`

當滾動位置到達列表邏輯開頭的 onStartReachedThreshold 範圍內時，呼叫一次。

類型
`(info: {distanceFromStart: number}) => void`

`onStartReachedThreshold`

列表的前緣邊緣必須距離內容開頭多遠（以列表的可見長度單位計），才會觸發 onStartReached 回調。因此，值為 0.5 將在內容開頭位於列表可見長度的一半範圍內時觸發 onStartReached。

類型	預設
number	`2`

`onViewableItemsChanged`

當列的可見性變更時呼叫，由 viewabilityConfig prop 定義。

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

`persistentScrollbar`

類型
bool

`progressViewOffset`

當載入指示器需要偏移量才能正確顯示時，設定此項。

類型
number

`refreshControl`

自訂刷新控制元素。設定後，它會覆寫內部建置的預設 <RefreshControl> 組件。onRefresh 和 refreshing props 也會被忽略。僅適用於垂直 VirtualizedList。

類型
element

`refreshing`

在等待從刷新取得新資料時，將此項設定為 true。

類型
boolean

`removeClippedSubviews`

這可能會提高大型列表的滾動效能。

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

類型
boolean

`renderScrollComponent`

tsx
(props: object) => element;

渲染自訂滾動組件，例如使用不同樣式的 RefreshControl。

類型
function

`viewabilityConfig`

請參閱 ViewabilityHelper.js 以取得 flow 類型和更多文件。

類型
ViewabilityConfig

`viewabilityConfigCallbackPairs`

ViewabilityConfig/onViewableItemsChanged 配對的列表。當滿足其對應 ViewabilityConfig 的條件時，將呼叫特定的 onViewableItemsChanged。請參閱 ViewabilityHelper.js 以取得 flow 類型和更多文件。

類型
ViewabilityConfigCallbackPair 陣列

`updateCellsBatchingPeriod`

低優先順序項目渲染批次之間的時間量，例如用於渲染遠離螢幕的項目。與 maxToRenderPerBatch 類似的填充率/回應能力權衡。

類型
number

`windowSize`

決定在可見區域外渲染的最大項目數，以可見長度單位計。因此，如果您的列表填滿螢幕，則 windowSize={21}（預設值）將渲染可見螢幕區域，以及視 viewport 上方和下方最多 10 個螢幕。減少此數字將減少記憶體消耗，並可能提高效能，但會增加快速滾動可能會顯示未渲染內容的短暫空白區域的可能性。

類型
number

方法

`flashScrollIndicators()`

tsx
flashScrollIndicators();

`getScrollableNode()`

tsx
getScrollableNode(): any;

`getScrollRef()`

tsx
getScrollRef():
  | React.ElementRef<typeof ScrollView>
  | React.ElementRef<typeof View>
  | null;

`getScrollResponder()`

tsx
getScrollResponder () => ScrollResponderMixin | null;

提供對底層滾動回應器的控制代碼。請注意，this._scrollRef 可能不是 ScrollView，因此我們需要檢查它是否回應 getScrollResponder，然後才能呼叫它。

`scrollToEnd()`

tsx
scrollToEnd(params?: {animated?: boolean});

滾動到內容的結尾。如果沒有 getItemLayout prop，可能會不流暢。

參數

名稱	類型
params	object

有效的 params 鍵為

'animated' (boolean) - 列表是否應在滾動時執行動畫。預設為 true。

`scrollToIndex()`

tsx
scrollToIndex(params: {
  index: number;
  animated?: boolean;
  viewOffset?: number;
  viewPosition?: number;
});

有效的 params 包含

'index' (number)。必填。
'animated' (boolean)。選填。
'viewOffset' (number)。選填。
'viewPosition' (number)。選填。

`scrollToItem()`

tsx
scrollToItem(params: {
  item: ItemT;
  animated?: boolean;
  viewOffset?: number;
  viewPosition?: number;
);

有效的 params 包含

'item' (Item)。必填。
'animated' (boolean)。選填。
'viewOffset' (number)。選填。
'viewPosition' (number)。選填。

`scrollToOffset()`

tsx
scrollToOffset(params: {
  offset: number;
  animated?: boolean;
});

滾動到列表中特定的內容像素偏移量。

參數 offset 預期要滾動到的偏移量。如果 horizontal 為 true，則偏移量為 x 值，在任何其他情況下，偏移量為 y 值。

參數 animated（預設為 true）定義列表是否應在滾動時執行動畫。

範例​

參考

Props​

ScrollView Props​

data​

必填 getItem​

必填 getItemCount​

必填 renderItem​

CellRendererComponent​

ItemSeparatorComponent​

ListEmptyComponent​

ListItemComponent​

ListFooterComponent​

ListFooterComponentStyle​

ListHeaderComponent​

ListHeaderComponentStyle​

debug​

disableVirtualization​

extraData​

getItemLayout​

horizontal​

initialNumToRender​

initialScrollIndex​

inverted​

keyExtractor​

maxToRenderPerBatch​

onEndReached​

onEndReachedThreshold​

onRefresh​

onScrollToIndexFailed​

onStartReached​

onStartReachedThreshold​

onViewableItemsChanged​

persistentScrollbar​

progressViewOffset​

refreshControl​

refreshing​

removeClippedSubviews​

renderScrollComponent​

viewabilityConfig​

viewabilityConfigCallbackPairs​

updateCellsBatchingPeriod​

windowSize​

方法​

flashScrollIndicators()​

getScrollableNode()​

getScrollRef()​

getScrollResponder()​

scrollToEnd()​

scrollToIndex()​

scrollToItem()​

scrollToOffset()​

範例