FlatList

基本的でフラットなリストをレンダリングするための高性能なインターフェースで、最も便利な機能をサポートしています。

完全にクロスプラットフォーム。
オプションの水平モード。
設定可能な表示状態のコールバック。
ヘッダーサポート。
フッターサポート。
セパレーターサポート。
プルツーリフレッシュ。
スクロールロード。
ScrollToIndex サポート。
複数列サポート。

セクションサポートが必要な場合は、<SectionList> を使用してください。

例

TypeScript
JavaScript

複数列をレンダリングするには、numColumns プロップを使用します。flexWrap レイアウトの代わりにこのアプローチを使用すると、アイテムの高さロジックとの競合を防ぐことができます。

より複雑な選択可能な例を以下に示します。

extraData={selectedId} を FlatList に渡すことで、状態が変化したときに FlatList 自体が再レンダリングされるようにします。このプロップを設定しないと、FlatList は PureComponent であり、プロップ比較では変更が示されないため、どのアイテムも再レンダリングする必要があることを認識しません。
keyExtractor は、デフォルトの key プロパティではなく、React キーに id を使用するようにリストに指示します。

TypeScript
JavaScript

これは <VirtualizedList> の便利なラッパーであり、明示的にここにリストされていないプロップ（および <ScrollView> のプロップ）を継承しますが、以下の注意点があります。

コンテンツがレンダーウィンドウの外にスクロールされると、内部の状態は保持されません。すべてのデータが項目データまたはFlux、Redux、Relayのような外部ストアにキャプチャされていることを確認してください。
これは PureComponent であり、props がシャローイコールである限り再レンダリングされません。renderItem 関数が依存するすべてのものが、更新後に === ではないプロップ（例: extraData）として渡されていることを確認してください。そうしないと、変更時に UI が更新されない場合があります。これには data プロップと親コンポーネントの状態が含まれます。
メモリを制限し、スムーズなスクロールを可能にするために、コンテンツはオフスクリーンで非同期にレンダリングされます。これは、フィルレートよりも速くスクロールすると、一時的に空白のコンテンツが表示される可能性があることを意味します。これは各アプリケーションのニーズに合わせて調整できるトレードオフであり、私たちは舞台裏で改善に取り組んでいます。
デフォルトでは、リストは各項目の key プロップを探し、それをReactのキーとして使用します。代わりに、カスタムの keyExtractor プロップを提供することもできます。

リファレンス

Props

VirtualizedList Props

VirtualizedList Props を継承します。

必須
`renderItem`

tsx
renderItem({
  item: ItemT,
  index: number,
  separators: {
    highlight: () => void;
    unhighlight: () => void;
    updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
  }
}): JSX.Element;

data からアイテムを受け取り、リストにレンダリングします。

必要に応じて index などの追加のメタデータ、およびより一般的な separators.updateProps 関数を提供します。これは、より一般的な highlight および unhighlight（highlighted: boolean プロップを設定する）がユースケースにとって不十分な場合に、先行するセパレーターまたは後続のセパレーターのレンダリングを変更するために必要なプロップを設定できます。

型
function

item (Object): レンダーされる data のアイテム。
index (number): data 配列内のこのアイテムに対応するインデックス。
separators (Object)
- highlight (Function)
- unhighlight (Function)
- updateProps (Function)
  - select (enum('leading', 'trailing'))
  - newProps (Object)

使用例

tsx
<FlatList
  ItemSeparatorComponent={
    Platform.OS !== 'android' &&
    (({highlighted}) => (
      <View
        style={[style.separator, highlighted && {marginLeft: 0}]}
      />
    ))
  }
  data={[{title: 'Title Text', key: 'item1'}]}
  renderItem={({item, index, separators}) => (
    <TouchableHighlight
      key={item.key}
      onPress={() => this._onPress(item)}
      onShowUnderlay={separators.highlight}
      onHideUnderlay={separators.unhighlight}>
      <View style={{backgroundColor: 'white'}}>
        <Text>{item.title}</Text>
      </View>
    </TouchableHighlight>
  )}
/>

必須
`data`

レンダリングするアイテムの配列（または配列のようなリスト）。他のデータ型は、VirtualizedList を直接ターゲットにすることで使用できます。

型
ArrayLike

`ItemSeparatorComponent`

各アイテムの間にレンダリングされますが、上部または下部にはレンダリングされません。デフォルトでは、highlighted および leadingItem プロップが提供されます。renderItem は separators.highlight/unhighlight を提供し、これにより highlighted プロップが更新されますが、separators.updateProps でカスタムプロップを追加することもできます。React コンポーネント（例: SomeComponent）または React 要素（例: <SomeComponent />）にすることができます。

型
component, function, element

`ListEmptyComponent`

リストが空のときにレンダリングされます。Reactコンポーネント（例：SomeComponent）またはReact要素（例：<SomeComponent />）を指定できます。

型
component, element

`ListFooterComponent`

すべてのアイテムの下部にレンダリングされます。React コンポーネント（例: SomeComponent）または React 要素（例: <SomeComponent />）にすることができます。

型
component, element

`ListFooterComponentStyle`

ListFooterComponent の内部 View のスタイリング。

型
View Style

`ListHeaderComponent`

すべてのアイテムの上部にレンダリングされます。React コンポーネント（例: SomeComponent）または React 要素（例: <SomeComponent />）にすることができます。

型
component, element

`ListHeaderComponentStyle`

ListHeaderComponent の内部 View のスタイリング。

型
View Style

`columnWrapperStyle`

numColumns > 1 の場合に生成される複数アイテムの行に対するオプションのカスタムスタイル。

型
View Style

`extraData`

リストに再レンダリングを指示するためのマーカープロパティ（PureComponentを実装しているため）。renderItem、ヘッダー、フッターなどの関数がdataプロップ以外のものに依存している場合は、それをここに貼り付け、不変として扱います。

型
any

`getItemLayout`

tsx
(data, index) => {length: number, offset: number, index: number}

getItemLayout は、アイテムのサイズ（高さまたは幅）を事前に知っている場合に、動的コンテンツの測定をスキップできるオプションの最適化です。たとえば、固定サイズのアイテムがある場合に getItemLayout は効率的です。

tsx
  getItemLayout={(data, index) => (
    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
  )}

getItemLayout を追加すると、数百のアイテムがあるリストのパフォーマンスが大幅に向上します。ItemSeparatorComponent を指定する場合は、オフセット計算にセパレーターの長さ（高さまたは幅）を含めることを忘れないでください。

型
function

`horizontal`

true の場合、アイテムを垂直に積み重ねるのではなく、水平に隣り合ってレンダリングします。

型
boolean

`initialNumToRender`

最初のバッチでレンダリングする項目の数。これは画面を埋めるのに十分な数であるべきですが、それ以上である必要はありません。これらの項目は、トップへのスクロールアクションの体感パフォーマンスを向上させるために、ウィンドウレンダリングの一部としてアンマウントされることはありません。

型	デフォルト
number	`10`

`initialScrollIndex`

最初のアイテムから上部で開始する代わりに、initialScrollIndex から開始します。これにより、最初の initialNumToRender アイテムを常にレンダリングし、この初期インデックスからアイテムをすぐにレンダリングする「上部にスクロール」最適化が無効になります。getItemLayout が実装されている必要があります。

型
number

`inverted`

スクロール方向を反転します。-1 のスケール変換を使用します。

型
boolean

`keyExtractor`

tsx
(item: ItemT, index: number) => string;

指定されたインデックスにある特定のアイテムの一意のキーを抽出するために使用されます。キーはキャッシュと、アイテムの並べ替えを追跡するための React キーとして使用されます。デフォルトのエクストラクタは item.key をチェックし、次に item.id をチェックし、その後 React と同様にインデックスの使用に戻ります。

型
function

`numColumns`

複数列は horizontal={false} の場合のみレンダリングでき、flexWrap レイアウトのようにジグザグになります。アイテムはすべて同じ高さである必要があります - マソニックレイアウトはサポートされていません。

型
number

`onRefresh`

tsx
() => void;

指定された場合、「プルツーリフレッシュ」機能のために標準の RefreshControl が追加されます。refreshing プロップも正しく設定してください。

型
function

`onViewableItemsChanged`

viewabilityConfig プロップで定義された行の可視性が変更されたときに呼び出されます。

型
`(callback: {changed: ViewToken[], viewableItems: ViewToken[]} => void;`

`progressViewOffset`

ロードインジケーターが正しく表示されるためにオフセットが必要な場合にこれを設定します。

型
number

`refreshing`

更新による新しいデータを待っている間、これをtrueに設定します。

型
boolean

`removeClippedSubviews`

警告

このプロパティを使用すると、状況によってはバグ（コンテンツの欠落）が発生する可能性があります。自己責任でご使用ください。

true の場合、画面外の子ビューは、画面外になったときにネイティブのバックアップスーパービューから削除されます。これにより、大きなリストのスクロールパフォーマンスが向上する可能性があります。Androidではデフォルト値は true です。

型
boolean

`viewabilityConfig`

フロータイプと詳細なドキュメントについては、ViewabilityHelper.js を参照してください。

型
ViewabilityConfig

viewabilityConfig は、以下のプロパティを持つタイプ ViewabilityConfig オブジェクトを受け取ります。

プロパティ	型
minimumViewTime	number
viewAreaCoveragePercentThreshold	number
itemVisiblePercentThreshold	number
waitForInteraction	boolean

viewAreaCoveragePercentThreshold または itemVisiblePercentThreshold の少なくとも一方が必須です。以下のエラーを避けるために、これを constructor で行う必要があります（参照）。

  Error: Changing viewabilityConfig on the fly is not supported

tsx
constructor (props) {
  super(props)

  this.viewabilityConfig = {
      waitForInteraction: true,
      viewAreaCoveragePercentThreshold: 95
  }
}

tsx
<FlatList
    viewabilityConfig={this.viewabilityConfig}
  ...

minimumViewTime

ビューアビリティコールバックがトリガーされる前に、アイテムが物理的に表示可能でなければならない最小時間（ミリ秒単位）。高い数値は、停止せずにコンテンツをスクロールしても、そのコンテンツが表示可能としてマークされないことを意味します。

viewAreaCoveragePercentThreshold

部分的に隠れたアイテムが表示可能とみなされるために、ビューポートが覆われている必要のある割合、0〜100。完全に表示されているアイテムは常に表示可能とみなされます。値が0の場合、ビューポート内の1ピクセルでアイテムが表示可能になり、値が100の場合、アイテムは完全に表示されるか、ビューポート全体を覆う必要があります。

itemVisiblePercentThreshold

viewAreaCoveragePercentThreshold と似ていますが、表示されるアイテムの割合を考慮します。表示領域が覆われている割合ではありません。

waitForInteraction

ユーザーがスクロールするか、レンダリング後に recordInteraction が呼び出されるまで、何も表示可能と見なされません。

`viewabilityConfigCallbackPairs`

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

型
ViewabilityConfigCallbackPair の配列

Methods

`flashScrollIndicators()`

tsx
flashScrollIndicators();

スクロールインジケーターを一時的に表示します。

`getNativeScrollRef()`

tsx
getNativeScrollRef(): React.ElementRef<typeof ScrollViewComponent>;

基になるスクロールコンポーネントへの参照を提供します。

`getScrollResponder()`

tsx
getScrollResponder(): ScrollResponderMixin;

基になるスクロールレスポンダーへのハンドルを提供します。

`getScrollableNode()`

tsx
getScrollableNode(): any;

基になるスクロールノードへのハンドルを提供します。

`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;
});

指定されたインデックスのアイテムまでスクロールし、表示領域内で viewPosition 0 の場合は上部に、1 の場合は下部に、0.5 の場合は中央に配置されます。

注

getItemLayout プロップを指定しないと、レンダリングウィンドウ外の場所にはスクロールできません。

パラメータ

名前	型
params 必須	object

有効な params のキーは以下の通りです

'animated' (boolean) - スクロール中にリストがアニメーションを行うかどうか。デフォルトは true です。
'index' (number) - スクロールするインデックス。必須。
'viewOffset' (number) - 最終ターゲット位置をオフセットする固定ピクセル数。
'viewPosition' (number) - 0 の値は、指定されたインデックスのアイテムを上部に配置し、1 の値は下部に配置し、0.5 の値は中央に配置します。

`scrollToItem()`

tsx
scrollToItem(params: {
  animated?: ?boolean,
  item: Item,
  viewPosition?: number,
});

データの線形スキャンが必要なため、可能な場合は scrollToIndex を使用してください。

注

getItemLayout プロップを指定しないと、レンダリングウィンドウ外の場所にはスクロールできません。

パラメータ

名前	型
params 必須	object

有効な params のキーは以下の通りです

'animated' (boolean) - スクロール中にリストがアニメーションを行うかどうか。デフォルトは true です。
'item' (object) - スクロールするアイテム。必須。
'viewPosition' (number)

`scrollToOffset()`

tsx
scrollToOffset(params: {
  offset: number;
  animated?: boolean;
});

リスト内の特定のコンテンツピクセルオフセットまでスクロールします。

パラメータ

名前	型
params 必須	object

有効な params のキーは以下の通りです

'offset' (number) - スクロールするオフセット。horizontal が true の場合、オフセットは x 値、それ以外の場合は y 値です。必須。
'animated' (boolean) - スクロール中にリストがアニメーションを行うかどうか。デフォルトは true です。

例​

リファレンス

Props​

VirtualizedList Props​

必須 renderItem​

必須 data​

ItemSeparatorComponent​

ListEmptyComponent​

ListFooterComponent​

ListFooterComponentStyle​

ListHeaderComponent​

ListHeaderComponentStyle​

columnWrapperStyle​

extraData​

getItemLayout​

horizontal​

initialNumToRender​

initialScrollIndex​

inverted​

keyExtractor​

numColumns​

onRefresh​

onViewableItemsChanged​

progressViewOffset​

refreshing​

removeClippedSubviews​

viewabilityConfig​

minimumViewTime​

viewAreaCoveragePercentThreshold​

itemVisiblePercentThreshold​

waitForInteraction​

viewabilityConfigCallbackPairs​

Methods​

flashScrollIndicators()​

getNativeScrollRef()​

getScrollResponder()​

getScrollableNode()​

scrollToEnd()​

scrollToIndex()​

scrollToItem()​

scrollToOffset()​

例

Props

VirtualizedList Props

必須
`renderItem`

必須
`data`

`ItemSeparatorComponent`

`ListEmptyComponent`

`ListFooterComponent`

`ListFooterComponentStyle`

`ListHeaderComponent`

`ListHeaderComponentStyle`

`columnWrapperStyle`

`extraData`

`getItemLayout`

`horizontal`

`initialNumToRender`

`initialScrollIndex`

`inverted`

`keyExtractor`

`numColumns`

`onRefresh`

`onViewableItemsChanged`

`progressViewOffset`

`refreshing`

`removeClippedSubviews`

`viewabilityConfig`

minimumViewTime

viewAreaCoveragePercentThreshold

itemVisiblePercentThreshold

waitForInteraction

`viewabilityConfigCallbackPairs`

Methods

`flashScrollIndicators()`

`getNativeScrollRef()`

`getScrollResponder()`

`getScrollableNode()`

`scrollToEnd()`

`scrollToIndex()`

`scrollToItem()`

`scrollToOffset()`