SectionList
最も便利な機能をサポートする、セクション化されたリストをレンダリングするための高性能インターフェース
- 完全なクロスプラットフォーム。
- 設定可能な可視性コールバック。
- リストヘッダーのサポート。
- リストフッターのサポート。
- アイテムセパレータのサポート。
- セクションヘッダーのサポート。
- セクションセパレータのサポート。
- 異種データとアイテムレンダリングのサポート。
- プルダウンして更新。
- スクロール読み込み。
セクションのサポートが不要で、よりシンプルなインターフェースが必要な場合は、<FlatList>を使用してください。
例
これは<VirtualizedList>の便利なラッパーであり、そのため、ここに明示的にリストされていないプロパティ（および<ScrollView>のプロパティ）を以下の注意点とともに継承します。
- コンテンツがレンダーウィンドウからスクロールアウトすると、内部状態は保持されません。すべてのデータがアイテムデータまたはFlux、Redux、Relayなどの外部ストアにキャプチャされていることを確認してください。
- これは
PureComponentであるため、propsが浅い等価性を維持する場合、再レンダリングされません。renderItem関数が依存するすべてのものが、更新後に===ではないプロパティ（例：extraData）として渡されるようにしてください。そうでない場合、UIは変更時に更新されない可能性があります。これには、dataプロパティと親コンポーネントの状態が含まれます。 - メモリを制限し、スムーズなスクロールを可能にするために、コンテンツは非同期的にオフスクリーンでレンダリングされます。これは、塗りつぶしレートよりも速くスクロールし、一時的に空白のコンテンツが表示される可能性があることを意味します。これは、各アプリケーションのニーズに合わせて調整できるトレードオフであり、私たちは舞台裏で改善に取り組んでいます。
- デフォルトでは、リストは各アイテムの
keyプロパティを探し、それをReactキーとして使用します。代わりに、カスタムのkeyExtractorプロパティを提供することもできます。
リファレンス
Props
VirtualizedList Props
VirtualizedList Propsを継承します。
必須renderItem
すべてのセクションのすべてのアイテムのデフォルトレンダラー。セクションごとにオーバーライドできます。React要素を返す必要があります。
| 型 |
|---|
| 関数 |
レンダー関数には、次のキーを持つオブジェクトが渡されます。
- 'item'（オブジェクト）- このセクションの
dataキーで指定されたアイテムオブジェクト - 'index'（数値）- セクション内でのアイテムのインデックス。
- 'section'（オブジェクト）-
sectionsで指定された完全なセクションオブジェクト。 - 'separators'（オブジェクト）- 次のキーを持つオブジェクト
- 'highlight'（関数）-
() => void - 'unhighlight'（関数）-
() => void - 'updateProps'（関数）-
(select, newProps) => void- 'select'（列挙型）- 使用可能な値は 'leading'、 'trailing'
- 'newProps'（オブジェクト）
- 'highlight'（関数）-
必須sections
レンダリングする実際のデータ。FlatListのdataプロパティに似ています。
| 型 |
|---|
| Sectionの配列 |
extraData
リストに再レンダリングを指示するためのマーカープロパティ（PureComponentを実装しているため）。 renderItem、Header、Footerなどの関数がdataプロパティ以外のものに依存している場合は、ここに貼り付けて不変に扱います。
| 型 |
|---|
| 任意 |
initialNumToRender
初期バッチでレンダリングするアイテムの数。これは画面を埋めるのに十分な数である必要がありますが、それ以上多くする必要はありません。スクロールトップアクションの体感パフォーマンスを向上させるために、これらのアイテムはウィンドウレンダリングの一部としてアンマウントされないことに注意してください。
| 型 | デフォルト |
|---|---|
| 数値 | 10 |
inverted
スクロール方向を反転します。-1のスケール変換を使用します。
| 型 | デフォルト |
|---|---|
| 真偽値 | false |
ItemSeparatorComponent
各アイテムの間にレンダリングされますが、上下にはレンダリングされません。デフォルトでは、highlighted、section、および[leading/trailing][Item/Section]プロパティが提供されます。 renderItemは、highlightedプロパティを更新するseparators.highlight/unhighlightを提供しますが、separators.updatePropsを使用してカスタムプロパティを追加することもできます。Reactコンポーネント（例：SomeComponent）またはReact要素（例：<SomeComponent />）にすることができます。
| 型 |
|---|
| コンポーネント、関数、要素 |
keyExtractor
指定されたインデックスにある特定のアイテムの一意のキーを抽出するために使用されます。キーはキャッシュに使用され、アイテムの順序変更を追跡するためのReactキーとして使用されます。デフォルトのエクストラクタはitem.keyをチェックし、Reactのようにインデックスの使用にフォールバックします。これは各アイテムのキーを設定しますが、各セクション全体には独自のキーが必要であることに注意してください。
| 型 |
|---|
| (item: object, index: number) => string |
ListEmptyComponent
リストが空の場合にレンダリングされます。Reactコンポーネント（例：SomeComponent）またはReact要素（例：<SomeComponent />）にすることができます。
| 型 |
|---|
| コンポーネント、要素 |
ListFooterComponent
リストの最後にレンダリングされます。Reactコンポーネント（例：SomeComponent）またはReact要素（例：<SomeComponent />）にすることができます。
| 型 |
|---|
| コンポーネント、要素 |
ListHeaderComponent
リストの最初にレンダリングされます。Reactコンポーネント（例：SomeComponent）またはReact要素（例：<SomeComponent />）にすることができます。
| 型 |
|---|
| コンポーネント、要素 |
onRefresh
指定されている場合、標準のRefreshControlが「プルダウンして更新」機能に追加されます。 refreshingプロパティも正しく設定してください。RefreshControlを上からオフセットするには（例：100pt）、progressViewOffset={100}を使用します。
| 型 |
|---|
| 関数 |
onViewableItemsChanged
viewabilityConfigプロパティで定義されているように、行の可視性が変更されたときに呼び出されます。
| 型 |
|---|
(callback: {changed: ViewToken[], viewableItems: ViewToken[]}) => void |
refreshing
更新からの新しいデータを待っている間、これをtrueに設定します。
| 型 | デフォルト |
|---|---|
| 真偽値 | false |
removeClippedSubviews
注：状況によってはバグ（コンテンツの欠落）が発生する可能性があります。自己責任で使用してください。
これは、大きなリストのスクロールパフォーマンスを向上させる可能性があります。
| 型 | デフォルト |
|---|---|
| 真偽値 | false |
renderSectionFooter
各セクションの下部にレンダリングされます。
| 型 |
|---|
(info: {section: Section}) => element ｜ null |
renderSectionHeader
各セクションの上部にレンダリングされます。これらは、iOSではデフォルトでScrollViewの上部に固定されます。 stickySectionHeadersEnabledを参照してください。
| 型 |
|---|
(info: {section: Section}) => element ｜ null |
SectionSeparatorComponent
各セクションの上部と下部にレンダリングされます（これは、アイテム間でのみレンダリングされるItemSeparatorComponentとは異なります）。これらは、セクションを上下のヘッダーから分離することを目的としており、通常、ItemSeparatorComponentと同じハイライトレスポンスを持ちます。また、highlighted、[leading/trailing][Item/Section]、およびseparators.updatePropsからのカスタムプロパティも受け取ります。
| 型 |
|---|
| コンポーネント、要素 |
stickySectionHeadersEnabled
セクションヘッダーを、次のヘッダーがそれを押し出すまで画面の上部に固定します。iOSでのみデフォルトで有効になっています。これは、そこでのプラットフォーム標準であるためです。
| 型 | デフォルト |
|---|---|
| 真偽値 | false Android true iOS |
メソッド
flashScrollIndicators() iOS
flashScrollIndicators();
スクロールインジケーターを一時的に表示します。
recordInteraction()
recordInteraction();
リストにインタラクションが発生したことを伝えます。これは、たとえば、waitForInteractionsがtrueで、ユーザーがスクロールしていない場合に、可視性の計算をトリガーする必要があります。これは通常、アイテムのタップまたはナビゲーションアクションによって呼び出されます。
scrollToLocation()
scrollToLocation(params: SectionListScrollParams);
指定されたsectionIndexとitemIndex（セクション内）にあるアイテムを、表示可能領域にスクロールします。viewPosition 0は上部に配置し（スティッキーヘッダーで覆われている可能性があります）、1は下部に配置し、0.5は中央に配置します。
注：
getItemLayoutまたはonScrollToIndexFailedプロパティを指定せずに、レンダーウィンドウ外の場所にスクロールすることはできません。
パラメータ
| 名前 | 型 |
|---|---|
| params 必須 | オブジェクト |
有効なparamsキーは次のとおりです。
- 'animated'（真偽値）- スクロール中にリストをアニメーション化するかどうか。デフォルトは
trueです。 - 'itemIndex' (数値) - スクロール先のアイテムのセクション内でのインデックス。必須。
- 'sectionIndex' (数値) - スクロール先のアイテムを含むセクションのインデックス。必須。
- 'viewOffset' (数値) - 最終的なターゲット位置をオフセットする固定ピクセル数。例：スティッキーヘッダーを補正するため。
- 'viewPosition' (数値) - 値 `0` は、指定されたインデックスのアイテムを一番上に配置し、`1` は一番下に配置し、`0.5` は中央に配置します。
型定義
セクション
特定のセクションにレンダリングされるデータを識別するオブジェクト。
| 型 |
|---|
| 任意 |
プロパティ
| 名前 | 型 | 説明 |
|---|---|---|
| data 必須 | 配列 | このセクションにアイテムをレンダリングするためのデータ。FlatList の data プロパティと同様に、オブジェクトの配列です。 |
| key | 文字列 | セクションの順序変更を追跡するためのオプションのキー。セクションの順序変更を予定していない場合は、デフォルトで配列のインデックスが使用されます。 |
| renderItem | 関数 | リストのデフォルトの renderItem をオーバーライドして、このセクションに任意のアイテムレンダラーを定義できます。 |
| ItemSeparatorComponent | コンポーネント、要素 | リストのデフォルトの ItemSeparatorComponent をオーバーライドして、このセクションに任意のアイテムセパレーターを定義できます。 |
| keyExtractor | 関数 | デフォルトの keyExtractor をオーバーライドして、このセクションに任意のキー抽出器を定義できます。 |