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