VirtualizedList

より便利な<FlatList>コンポーネントと<SectionList>コンポーネントの基本実装であり、これらはより詳しくドキュメント化されています。一般的に、これはFlatListが提供する以上の柔軟性が必要な場合にのみ使用すべきです。例えば、プレーンな配列の代わりに不変データで使用する場合などです。

仮想化は、アクティブなアイテムの有限なレンダリングウィンドウを維持し、レンダリングウィンドウ外のすべてのアイテムを適切なサイズの空白スペースで置き換えることで、大規模なリストのメモリ消費とパフォーマンスを大幅に向上させます。ウィンドウはスクロール動作に適応し、アイテムは、表示領域から遠い場合は低優先度（実行中のインタラクションの後）で、それ以外の場合は高優先度で増分的にレンダリングされ、空白スペースが表示される可能性を最小限に抑えます。

例

TypeScript
JavaScript

いくつかの注意点

コンテンツがレンダーウィンドウの外にスクロールされると、内部の状態は保持されません。すべてのデータが項目データまたはFlux、Redux、Relayのような外部ストアにキャプチャされていることを確認してください。
これはPureComponentであり、propsがシャローイコールである場合、再レンダリングされません。renderItem関数が依存するすべてのものが、更新後に===とならないprops（例：extraData）として渡されていることを確認してください。そうしないと、変更時にUIが更新されない可能性があります。これにはdataプロップと親コンポーネントの状態が含まれます。
メモリを制限し、スムーズなスクロールを可能にするために、コンテンツはオフスクリーンで非同期にレンダリングされます。これは、フィルレートよりも速くスクロールすると、一時的に空白のコンテンツが表示される可能性があることを意味します。これは各アプリケーションのニーズに合わせて調整できるトレードオフであり、私たちは舞台裏で改善に取り組んでいます。
デフォルトでは、リストは各項目の key プロップを探し、それをReactのキーとして使用します。代わりに、カスタムの keyExtractor プロップを提供することもできます。

リファレンス

Props

ScrollView Props

ScrollView Propsを継承します。

`data`

アイテムを取得するためにgetItemとgetItemCountに渡される不透明なデータ型。

型
any

必須
`getItem`

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

あらゆる種類のデータブロブからアイテムを抽出するための汎用アクセサ。

型
function

必須
`getItemCount`

tsx
(data: any) => number;

データブロブ内のアイテム数を決定します。

型
function

必須
`renderItem`

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

dataからアイテムを受け取り、リストにレンダリングします。

型
function

`CellRendererComponent`

CellRendererComponentは、renderItem/ListItemComponentによってレンダリングされたセルが、基になるScrollViewに配置される際にどのようにラップされるかをカスタマイズできます。このコンポーネントは、セル内の変更をVirtualizedListに通知するイベントハンドラを受け入れる必要があります。

型
`React.ComponentType<CellRendererProps>`

`ItemSeparatorComponent`

各アイテムの間にレンダリングされますが、上部または下部にはレンダリングされません。デフォルトでは、highlightedおよびleadingItemプロップが提供されます。renderItemはhighlightedプロップを更新するseparators.highlight/unhighlightを提供しますが、separators.updatePropsを使用してカスタムプロップを追加することもできます。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	No

`ListHeaderComponent`

すべてのアイテムの上部にレンダリングされます。Reactコンポーネント（例：SomeComponent）またはReact要素（例：<SomeComponent />）にすることができます。

型
component, element

`ListHeaderComponentStyle`

ListHeaderComponentの内部Viewのスタイル設定。

型
View Style

`debug`

debugをオンにすると、使用法と実装の両方のデバッグを支援するための追加のロギングと視覚的オーバーレイが有効になりますが、パフォーマンスに大きな影響を与えます。

型
boolean

`disableVirtualization`

非推奨

仮想化は、パフォーマンスとメモリの最適化を大幅に提供しますが、レンダリングウィンドウ外のReactインスタンスを完全にアンマウントします。これはデバッグ目的でのみ無効にする必要があります。

型
boolean

`extraData`

リストに再レンダリングを指示するためのマーカープロパティ（PureComponentを実装しているため）。renderItem、ヘッダー、フッターなどの関数がdataプロップ以外のものに依存している場合は、それをここに貼り付け、不変として扱います。

型
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;

指定されたインデックスにある特定のアイテムの一意のキーを抽出するために使用されます。キーはキャッシュとReactキーとして使用され、アイテムの並べ替えを追跡します。デフォルトのエクストラクターは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プロップも正しく設定してください。

型
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 プロップで定義された行の可視性が変更されたときに呼び出されます。

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

`persistentScrollbar`

型
bool

`progressViewOffset`

ロードインジケーターが正しく表示されるようにオフセットが必要な場合にこれを設定します。

型
number

`refreshControl`

カスタムのリフレッシュコントロール要素。設定された場合、内部で構築されたデフォルトの<RefreshControl>コンポーネントを上書きします。onRefreshおよびrefreshingプロップも無視されます。垂直方向のVirtualizedListでのみ機能します。

型
element

`refreshing`

更新による新しいデータを待っている間、これをtrueに設定します。

型
boolean

`removeClippedSubviews`

警告

このプロパティを使用すると、状況によってはバグ（コンテンツの欠落）が発生する可能性があります。自己責任でご使用ください。

true の場合、画面外の子ビューは、画面外になったときにネイティブのバックアップスーパービューから削除されます。これにより、大きなリストのスクロールパフォーマンスが向上する可能性があります。Androidではデフォルト値は true です。

型
boolean

`renderScrollComponent`

tsx
(props: object) => element;

カスタムのスクロールコンポーネント（例：異なるスタイルのRefreshControlを持つもの）をレンダリングします。

型
function

`viewabilityConfig`

フロータイプとさらなるドキュメントについては、ViewabilityHelper.jsを参照してください。

型
ViewabilityConfig

`viewabilityConfigCallbackPairs`

ViewabilityConfig/onViewableItemsChangedのペアのリスト。対応するViewabilityConfigの条件が満たされたときに、特定のonViewableItemsChangedが呼び出されます。フロータイプとさらなるドキュメントについては、ViewabilityHelper.jsを参照してください。

型
array of ViewabilityConfigCallbackPair

`updateCellsBatchingPeriod`

低優先度アイテムのレンダリングバッチ間の時間（例：画面外のかなり離れたアイテムをレンダリングする場合）。maxToRenderPerBatchと同様のフィルレート/応答性のトレードオフがあります。

型
number

`windowSize`

可視領域外にレンダリングされるアイテムの最大数を、可視長の単位で決定します。したがって、リストが画面全体を埋める場合、windowSize={21}（デフォルト）は、可視画面領域に加えて、ビューポートの上下に最大10画面をレンダリングします。この数を減らすとメモリ消費量が減り、パフォーマンスが向上する可能性がありますが、高速スクロール時に未レンダリングコンテンツの一時的な空白領域が表示される可能性が高まります。

型
number

Methods

`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プロップがないとガタつく可能性があります。

パラメータ

名前	型
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;
});

リスト内の特定のコンテンツピクセルオフセットまでスクロールします。

Param offsetは、スクロールするオフセットを期待します。horizontalがtrueの場合、オフセットはx値であり、それ以外の場合はy値です。

Param 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​

Methods​

flashScrollIndicators()​

getScrollableNode()​

getScrollRef()​

getScrollResponder()​

scrollToEnd()​

scrollToIndex()​

scrollToItem()​

scrollToOffset()​

例