VirtualizedList
より便利な<FlatList>および<SectionList>コンポーネント（これらの方がドキュメントが充実しています）の基本実装です。一般的に、FlatListでは柔軟性が不足する場合（例：プレーンな配列ではなく不変データを使用する場合）にのみ使用する必要があります。
仮想化により、アクティブなアイテムの有限レンダリングウィンドウを維持し、レンダリングウィンドウ外のすべてのアイテムを適切なサイズの空白スペースに置き換えることで、大規模リストのメモリ消費量とパフォーマンスが大幅に向上します。ウィンドウはスクロール動作に適応し、アイテムは、表示領域から離れている場合は低優先度（実行中のインタラクションの後）、そうでない場合は高優先度で段階的にレンダリングされ、空白スペースが表示される可能性を最小限に抑えます。
例
- TypeScript
- JavaScript
いくつかの注意点
- コンテンツがレンダリングウィンドウからスクロールアウトすると、内部状態は保持されません。すべてのデータは、アイテムデータまたはFlux、Redux、Relayなどの外部ストアにキャプチャされていることを確認してください。
- これは
PureComponentであるため、propsが浅い等価である場合、再レンダリングされません。renderItem関数が依存するものはすべて、更新後に===にならないプロパティ（例：extraData）として渡してください。そうでない場合、UIが変更時に更新されない可能性があります。これには、dataプロパティと親コンポーネントの状態が含まれます。 - メモリを制限し、スムーズなスクロールを有効にするために、コンテンツは非同期でオフスクリーンでレンダリングされます。つまり、塗りつぶし速度よりも速くスクロールして、一時的に空白のコンテンツが表示される可能性があります。これは、各アプリケーションのニーズに合わせて調整できるトレードオフであり、バックグラウンドで改善に取り組んでいます。
- デフォルトでは、リストは各アイテムの
keyプロパティを探し、それをReactキーとして使用します。または、カスタムkeyExtractorプロパティを提供できます。
参照
プロパティ
ScrollViewのプロパティ
ScrollViewのプロパティを継承します。
data
アイテムを取得するためにgetItemとgetItemCountに渡される不透明なデータ型。
| 型 |
|---|
| any |
必須 getItem
(data: any, index: number) => any;
あらゆる種類のデータブロックからアイテムを抽出するための汎用アクセサ。
| 型 |
|---|
| 関数 |
必須 getItemCount
(data: any) => number;
データブロック内のアイテム数を決定します。
| 型 |
|---|
| 関数 |
必須 renderItem
(info: any) => ?React.Element<any>
dataからアイテムを受け取り、リストにレンダリングします。
| 型 |
|---|
| 関数 |
CellRendererComponent
CellRendererComponentを使用すると、基になるScrollViewに配置される際に、renderItem/ListItemComponentによってレンダリングされたセルのラップ方法をカスタマイズできます。このコンポーネントは、セルの変更をVirtualizedListに通知するイベントハンドラを受け入れる必要があります。
| 型 |
|---|
React.ComponentType<CellRendererProps> |
ItemSeparatorComponent
各アイテムの間にレンダリングされますが、上部または下部にはレンダリングされません。デフォルトでは、highlightedプロパティとleadingItemプロパティが提供されます。renderItemはseparators.highlight/separators.unhighlightを提供し、これによりhighlightedプロパティが更新されますが、separators.updatePropsを使用してカスタムプロパティを追加することもできます。Reactコンポーネント（例：SomeComponent）、またはReact要素（例：<SomeComponent />）にすることができます。
| 型 |
|---|
| コンポーネント、関数、要素 |
ListEmptyComponent
リストが空の場合にレンダリングされます。Reactコンポーネント（例：SomeComponent）、またはReact要素（例：<SomeComponent />）にすることができます。
| 型 |
|---|
| コンポーネント、要素 |
ListItemComponent
各データアイテムは、この要素を使用してレンダリングされます。Reactコンポーネントクラスまたはレンダリング関数にすることができます。
| 型 |
|---|
| コンポーネント、関数 |
ListFooterComponent
すべてのアイテムの下部にレンダリングされます。Reactコンポーネント（例：SomeComponent）、またはReact要素（例：<SomeComponent />）にすることができます。
| 型 |
|---|
| コンポーネント、要素 |
ListFooterComponentStyle
ListFooterComponentの内部Viewのスタイル。
| 型 | 必須 |
|---|---|
| ViewStyleProp | いいえ |
ListHeaderComponent
すべてのアイテムの上部にレンダリングされます。Reactコンポーネント（例：SomeComponent）、またはReact要素（例：<SomeComponent />）にすることができます。
| 型 |
|---|
| コンポーネント、要素 |
ListHeaderComponentStyle
ListHeaderComponentの内部Viewのスタイル。
| 型 |
|---|
| Viewスタイル |
debug
debugを有効にすると、使用状況と実装の両方に関するデバッグを支援するために、追加のログと視覚的なオーバーレイが表示されますが、パフォーマンスに大きな影響を与えます。
| 型 |
|---|
| ブール値 |
disableVirtualization
非推奨。仮想化は、パフォーマンスとメモリの最適化に大きく貢献しますが、レンダリングウィンドウ外のReactインスタンスを完全にアンマウントします。デバッグ目的でのみ無効にする必要があります。
| 型 |
|---|
| ブール値 |
extraData
リストに再レンダリングを指示するためのマーカープロパティ（PureComponentを実装するため）。renderItem、ヘッダー、フッターなどの関数がdataプロパティ以外のものに依存する場合は、ここに配置し、不変として扱ってください。
| 型 |
|---|
| any |
getItemLayout
(
data: any,
index: number,
) => {length: number, offset: number, index: number}
| 型 |
|---|
| 関数 |
horizontal
trueの場合、アイテムを垂直に積み重ねるのではなく、横に並べてレンダリングします。
| 型 |
|---|
| ブール値 |
initialNumToRender
最初のバッチでレンダリングするアイテム数。これは、画面を満たすのに十分な数にする必要がありますが、それ以上の数にする必要はありません。これらのアイテムは、スクロールトップアクションの体感パフォーマンスを向上させるために、ウィンドウレンダリングの一部としてアンマウントされることはありません。
| 型 | デフォルト |
|---|---|
| 数値 | 10 |
initialScrollIndex
最初のアイテムの先頭から開始するのではなく、initialScrollIndexから開始します。これにより、「スクロールトップ」最適化（最初のinitialNumToRenderアイテムを常にレンダリングし続ける）が無効になり、この初期インデックスから始まるアイテムがすぐにレンダリングされます。getItemLayoutを実装する必要があります。
| 型 |
|---|
| 数値 |
inverted
スクロールの方向を反転します。-1のスケール変換を使用します。
| 型 |
|---|
| ブール値 |
keyExtractor
(item: any, index: number) => string;
指定されたインデックスにある特定のアイテムの一意のキーを抽出するために使用されます。キーはキャッシングに使用され、Reactキーとしてアイテムの並べ替えを追跡するために使用されます。デフォルトのエクストラクターはitem.key、次にitem.idをチェックし、その後、Reactのようにインデックスを使用します。
| 型 |
|---|
| 関数 |
maxToRenderPerBatch
各増分レンダリングバッチでレンダリングするアイテムの最大数。一度にレンダリングする数が多いほど、塗りつぶし率は向上しますが、コンテンツのレンダリングがボタンタップやその他のインタラクションへの応答を妨げる可能性があるため、応答性が低下する可能性があります。
| 型 |
|---|
| 数値 |
onEndReached
スクロール位置がリストの論理的な終わりからonEndReachedThreshold以内になると、一度呼び出されます。
| 型 |
|---|
(info: {distanceFromEnd: number}) => void |
onEndReachedThreshold
リストのコンテンツの終わりから、リストのコンテンツの末端がonEndReachedコールバックをトリガーするために必要な距離（リストの可視長単位）。したがって、値が0.5の場合、コンテンツの終わりがリストの可視長の半分以内にあると、onEndReachedがトリガーされます。
| 型 | デフォルト |
|---|---|
| 数値 | 2 |
onRefresh
() => void;
指定されている場合、「Pull to Refresh」機能のために標準のRefreshControlが追加されます。refreshingプロパティも正しく設定してください。
| 型 |
|---|
| 関数 |
onScrollToIndexFailed
(info: {
index: number,
highestMeasuredFrameIndex: number,
averageItemLength: number,
}) => void;
まだ測定されていないインデックスへのスクロールに失敗した場合に処理するために使用されます。推奨される処置としては、独自のオフセットを計算してscrollToを使用するか、可能な限りスクロールして、より多くのアイテムがレンダリングされた後に再度試みることです。
| 型 |
|---|
| 関数 |
onStartReached
スクロール位置がリストの論理的な先頭からonStartReachedThreshold以内になったときに一度呼び出されます。
| 型 |
|---|
(info: {distanceFromStart: number}) => void |
onStartReachedThreshold
リストの先頭から（リストの可視長の単位で）どのくらい離れていると、リストの先頭がコンテンツの先頭からonStartReachedコールバックをトリガーするかを指定します。したがって、値が0.5の場合、コンテンツの先頭がリストの可視長の半分以内にあるとonStartReachedがトリガーされます。
| 型 | デフォルト |
|---|---|
| 数値 | 2 |
onViewableItemsChanged
viewabilityConfigプロパティで定義されているように、行の表示状態が変更されたときに呼び出されます。
| 型 |
|---|
(callback: {changed: ViewToken[], viewableItems: ViewToken[]}) => void |
persistentScrollbar
| 型 |
|---|
| bool |
progressViewOffset
ローディングインジケーターが正しく表示されるためにオフセットが必要な場合に設定します。
| 型 |
|---|
| 数値 |
refreshControl
カスタムのリフレッシュコントロール要素。設定すると、内部で構築されたデフォルトの<RefreshControl>コンポーネントをオーバーライドします。onRefreshプロパティとrefreshingプロパティも無視されます。垂直方向のVirtualizedListでのみ機能します。
| 型 |
|---|
| element |
refreshing
リフレッシュからの新しいデータ待機中にtrueに設定します。
| 型 |
|---|
| ブール値 |
removeClippedSubviews
これにより、長いリストのパフォーマンスが向上する可能性があります。
注：状況によってはバグ（コンテンツの欠落）が発生する可能性があります。自己責任で使用してください。
| 型 |
|---|
| ブール値 |
renderScrollComponent
(props: object) => element;
カスタムスクロールコンポーネント（異なるスタイルのRefreshControlなど）をレンダリングします。
| 型 |
|---|
| 関数 |
viewabilityConfig
フロータイプと詳細なドキュメントについては、ViewabilityHelper.jsを参照してください。
| 型 |
|---|
| ViewabilityConfig |
viewabilityConfigCallbackPairs
ViewabilityConfig/onViewableItemsChangedペアのリスト。対応するViewabilityConfigの条件が満たされたときに、特定のonViewableItemsChangedが呼び出されます。フロータイプと詳細なドキュメントについては、ViewabilityHelper.jsを参照してください。
| 型 |
|---|
| ViewabilityConfigCallbackPairの配列 |
updateCellsBatchingPeriod
低優先度のアイテムレンダリングバッチ間の時間間隔（画面からかなり離れたアイテムのレンダリングなど）。maxToRenderPerBatchと同様の、塗りつぶし率/応答性のトレードオフがあります。
| 型 |
|---|
| 数値 |
windowSize
可視領域の外側にレンダリングされるアイテムの最大数を、可視長の単位で決定します。リストが画面全体を埋めている場合、windowSize={21}（デフォルト）は、ビューポートの上下に最大で10画面分の可視画面領域をレンダリングします。この数値を減らすとメモリ消費量が減少し、パフォーマンスが向上する可能性がありますが、高速スクロール時にレンダリングされていないコンテンツの一時的な空白領域が表示される可能性が高くなります。
| 型 |
|---|
| 数値 |
メソッド
flashScrollIndicators()
flashScrollIndicators();
getScrollableNode()
getScrollableNode(): any;
getScrollRef()
getScrollRef():
| React.ElementRef<typeof ScrollView>
| React.ElementRef<typeof View>
| null;
getScrollResponder()
getScrollResponder () => ScrollResponderMixin | null;
基盤となるスクロールレスポンダへのハンドルを提供します。this._scrollRefがScrollViewでない可能性があるため、呼び出す前にgetScrollResponderに応答することを確認する必要があります。
scrollToEnd()
scrollToEnd(params?: {animated?: boolean});
コンテンツの最後までスクロールします。getItemLayoutプロパティがないとぎくしゃくする可能性があります。
パラメーター
| 名前 | 型 |
|---|---|
| params | object |
有効なparamsキーは次のとおりです。
'animated'（boolean）- リストがスクロール中にアニメーションを実行するかどうか。デフォルトはtrueです。
scrollToIndex()
scrollToIndex(params: {
index: number;
animated?: boolean;
viewOffset?: number;
viewPosition?: number;
});
有効なparamsは次のとおりです。
- 'index'（number）。必須。
- 'animated'（boolean）。オプション。
- 'viewOffset'（number）。オプション。
- 'viewPosition'（number）。オプション。
scrollToItem()
scrollToItem(params: {
item: ItemT;
animated?: boolean;
viewOffset?: number;
viewPosition?: number;
);
有効なparamsは次のとおりです。
- 'item'（Item）。必須。
- 'animated'（boolean）。オプション。
- 'viewOffset'（number）。オプション。
- 'viewPosition'（number）。オプション。
scrollToOffset()
scrollToOffset(params: {
offset: number;
animated?: boolean;
});
リスト内の特定のコンテンツピクセルオフセットにスクロールします。
パラメーターoffsetは、スクロール先のオフセットを期待します。horizontalがtrueの場合、オフセットはx値であり、それ以外の場合はy値です。
パラメーターanimated（デフォルトはtrue）は、リストがスクロール中にアニメーションを実行するかどうかを定義します。