VirtualizedList

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

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

使用例

TypeScript
JavaScript

いくつかの注意点

コンテンツがレンダーウィンドウの外にスクロールされると、内部の状態は保持されません。すべてのデータが項目データまたはFlux、Redux、Relayのような外部ストアにキャプチャされていることを確認してください。
これは PureComponent であり、props がシャローイコール（浅い比較で等しい）の場合、再レンダリングされません。renderItem 関数が依存するすべてのものが、更新後に === とならないプロップ（例：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、Header、Footerなどの関数が 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`

これにより、大きなリストのスクロールパフォーマンスが向上する場合があります。

注意: 状況によってはバグ（コンテンツの欠落）が発生する可能性があります - 自己責任で使用してください。

型
boolean

`renderScrollComponent`

tsx
(props: object) => element;

カスタムのスクロールコンポーネントをレンダリングします。例えば、異なるスタイルの RefreshControl を使用する場合などです。

型
function

`viewabilityConfig`

Flowの型と詳細なドキュメントについては ViewabilityHelper.js を参照してください。

型
ViewabilityConfig

`viewabilityConfigCallbackPairs`

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

型
ViewabilityConfigCallbackPairの配列

`updateCellsBatchingPeriod`

低優先度の項目レンダリングバッチ間の時間。例えば、画面からかなり離れた項目をレンダリングする場合など。maxToRenderPerBatch と同様のフィルレート/応答性のトレードオフがあります。

型
number

`windowSize`

可視領域外にレンダリングされる項目の最大数を、可視長の単位で決定します。したがって、リストが画面を埋めている場合、windowSize={21}（デフォルト）は、可視画面領域に加えて、ビューポートの上10画面分と下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 プロップがないと、カクつく可能性があります。

パラメータ

名前	型
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​

メソッド​

flashScrollIndicators()​

getScrollableNode()​

getScrollRef()​

getScrollResponder()​

scrollToEnd()​

scrollToIndex()​

scrollToItem()​

scrollToOffset()​

使用例