SectionList
セクション分けされたリストを描画するための高パフォーマンスなインターフェースで、最も便利な機能をサポートしています。
- 完全なクロスプラットフォーム。
- 設定可能な表示状態コールバック。
- リストヘッダーのサポート。
- リストフッターのサポート。
- アイテムセパレーターのサポート。
- セクションヘッダーのサポート。
- セクションセパレーターのサポート。
- 不均一なデータとアイテムレンダリングのサポート。
- Pull to Refresh (引っ張って更新)。
- スクロールローディング。
セクションのサポートが不要で、よりシンプルなインターフェースが必要な場合は、<FlatList>を使用してください。
使用例
これは<VirtualizedList>の便利なラッパーであり、ここに明示的にリストされていない<VirtualizedList>のprops（および<ScrollView>のprops）を継承しますが、以下の注意点があります。
- コンテンツがレンダーウィンドウの外にスクロールされると、内部の状態は保持されません。すべてのデータが項目データまたはFlux、Redux、Relayのような外部ストアにキャプチャされていることを確認してください。
- これは
PureComponentです。つまり、propsがシャローイコール（浅い比較で等しい）のままであれば再レンダリングされません。renderItem関数が依存するものはすべて、更新後に===とならないprop（例：extraData）として渡すようにしてください。そうしないと、UIが変更時に更新されない可能性があります。これにはdataプロパティや親コンポーネントの状態も含まれます。 - メモリを節約し、スムーズなスクロールを可能にするために、コンテンツは画面外で非同期にレンダリングされます。これにより、描画速度よりも速くスクロールすると、一時的に空白のコンテンツが表示される可能性があります。これは各アプリケーションのニーズに合わせて調整できるトレードオフであり、私たちは裏側で改善に取り組んでいます。
- デフォルトでは、リストは各項目の
keyプロップを探し、それをReactのキーとして使用します。代わりに、カスタムのkeyExtractorプロップを提供することもできます。
リファレンス
Props
VirtualizedList の Props
VirtualizedList の Propsを継承します。
必須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、Header、Footerなどの関数がdataプロパティ以外のものに依存している場合は、それをここに配置し、不変（immutable）として扱ってください。
| 型 |
|---|
| 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を上部からオフセットさせるには（例：100 pts）、progressViewOffset={100}を使用します。
| 型 |
|---|
| function |
onViewableItemsChanged
viewabilityConfig プロップで定義された行の可視性が変更されたときに呼び出されます。
| 型 |
|---|
(callback: {changed: ViewToken[], viewableItems: ViewToken[]}) => void |
refreshing
更新による新しいデータを待っている間、これをtrueに設定します。
| 型 | デフォルト |
|---|---|
| boolean | false |
removeClippedSubviews
注意：状況によってはバグ（コンテンツの欠落）が発生する可能性があるため、自己責任で使用してください。
これにより、長いリストのスクロールパフォーマンスが向上する場合があります。
| 型 | デフォルト |
|---|---|
| boolean | 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からのカスタムプロパティも受け取ります。
| 型 |
|---|
| component, element |
stickySectionHeadersEnabled
セクションヘッダーが、次のヘッダーに押し出されるまで画面の上部に固定されるようにします。iOSではプラットフォームの標準であるため、デフォルトで有効になっています。
| 型 | デフォルト |
|---|---|
| boolean | 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 必須 | 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を上書きします。 |