FlatList

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

完全にクロスプラットフォームです。
オプションの水平モード。
設定可能な視認性コールバック。
ヘッダーサポート。
フッターサポート。
セパレーターサポート。
プルダウンリフレッシュ。
スクロール読み込み。
ScrollToIndexサポート。
複数列サポート。

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

例

TypeScript
JavaScript

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

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

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

TypeScript
JavaScript

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

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

参照

プロパティ

VirtualizedListのプロパティ

VirtualizedListのプロパティを継承します。

必須
`renderItem`

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プロパティを設定する）がユースケースに不十分な場合に、先頭のセパレーターまたは末尾のセパレーターのレンダリングを変更したいプロパティを設定できます。

型
関数

item (オブジェクト)：レンダリングされるdataからのアイテム。
index (数値)：data配列内のこのアイテムに対応するインデックス。
separators (オブジェクト)
- highlight (関数)
- unhighlight (関数)
- updateProps (関数)
  - select (列挙型('leading', 'trailing'))
  - newProps (オブジェクト)

使用例

<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 を直接ターゲットにすることで、他のデータ型を使用できます。

型
配列のようなオブジェクト

`ItemSeparatorComponent`

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

型
コンポーネント、関数、要素

`ListEmptyComponent`

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

型
コンポーネント、要素

`ListFooterComponent`

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

型
コンポーネント、要素

`ListFooterComponentStyle`

ListFooterComponentの内部Viewのスタイル。

型
Viewスタイル

`ListHeaderComponent`

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

型
コンポーネント、要素

`ListHeaderComponentStyle`

ListHeaderComponentの内部Viewのスタイル。

型
Viewスタイル

`columnWrapperStyle`

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

型
Viewスタイル

`extraData`

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

型
任意

`getItemLayout`

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

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

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

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

型
関数

`horizontal`

trueの場合、アイテムを垂直に積み重ねる代わりに、横に並べてレンダリングします。

型
ブール値

`initialNumToRender`

最初のバッチでレンダリングするアイテムの数。これは、画面を満たすのに十分な数でなければなりませんが、それ以上多くはありません。これらのアイテムは、ウィンドウ化されたレンダリングの一部としてアンマウントされることはなく、スクロールトップアクションの知覚パフォーマンスを向上させるために使用されます。

型	デフォルト
数値	`10`

`initialScrollIndex`

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

型
数値

`inverted`

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

型
ブール値

`keyExtractor`

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

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

型
関数

`numColumns`

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

型
数値

`onRefresh`

() => void;

指定した場合、「プルダウンして更新」機能のために標準のRefreshControlが追加されます。refreshingプロップも正しく設定してください。

型
関数

`onViewableItemsChanged`

viewabilityConfigプロップで定義されているように、行の表示可能性が変更されたときに呼び出されます。

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

`progressViewOffset`

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

型
数値

`refreshing`

更新からの新しいデータの待機中にtrueに設定します。

型
ブール値

`removeClippedSubviews`

これにより、長いリストのスクロールパフォーマンスが向上する場合があります。Androidではデフォルト値はtrueです。

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

型
ブール値

`viewabilityConfig`

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

型
ViewabilityConfig

viewabilityConfigは、次のプロパティを持つオブジェクトであるViewabilityConfig型を受け取ります。

プロパティ	型
minimumViewTime	数値
viewAreaCoveragePercentThreshold	数値
itemVisiblePercentThreshold	数値
waitForInteraction	ブール値

viewAreaCoveragePercentThresholdまたはitemVisiblePercentThresholdの少なくとも1つは必須です。次のエラーを回避するには、constructorで行う必要があります（参照）

  Error: Changing viewabilityConfig on the fly is not supported

constructor (props) {
  super(props)

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

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

minimumViewTime

表示可能性のコールバックが起動される前に、アイテムが物理的に表示されなければならない最小時間（ミリ秒単位）。数値が高いほど、停止せずにコンテンツをスクロールしても、コンテンツが表示可能としてマークされません。

viewAreaCoveragePercentThreshold

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

itemVisiblePercentThreshold

viewAreaCoveragePercentThresholdに似ていますが、ビューポートの面積の割合ではなく、表示されているアイテムの割合を考慮します。

waitForInteraction

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

`viewabilityConfigCallbackPairs`

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

型
ViewabilityConfigCallbackPairの配列

メソッド

`flashScrollIndicators()`

flashScrollIndicators();

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

`getNativeScrollRef()`

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

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

`getScrollResponder()`

getScrollResponder(): ScrollResponderMixin;

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

`getScrollableNode()`

getScrollableNode(): any;

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

`scrollToEnd()`

scrollToEnd(params?: {animated?: boolean});

コンテンツの最後にスクロールします。getItemLayoutプロップがないとぎくしゃくする可能性があります。

パラメーター

名前	型
params	オブジェクト

有効なparamsキーは次のとおりです。

'animated' (ブール値) - リストがスクロール中にアニメーションを実行するかどうか。デフォルトはtrueです。

`scrollToIndex()`

scrollToIndex: (params: {
  index: number;
  animated?: boolean;
  viewOffset?: number;
  viewPosition?: number;
});

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

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

パラメーター

名前	型
params 必須	オブジェクト

有効なparamsキーは次のとおりです。

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

`scrollToItem()`

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

データの線形スキャンが必要です。可能であれば、代わりにscrollToIndexを使用してください。

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

パラメーター

名前	型
params 必須	オブジェクト

有効なparamsキーは次のとおりです。

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

`scrollToOffset()`

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

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

パラメーター

名前	型
params 必須	オブジェクト

有効なparamsキーは次のとおりです。

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

例​

参照

プロパティ​

VirtualizedListのプロパティ​

必須 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​

メソッド​

flashScrollIndicators()​

getNativeScrollRef()​

getScrollResponder()​

getScrollableNode()​

scrollToEnd()​

scrollToIndex()​

scrollToItem()​

scrollToOffset()​

例

プロパティ

VirtualizedListのプロパティ

必須
`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`

メソッド

`flashScrollIndicators()`

`getNativeScrollRef()`

`getScrollResponder()`

`getScrollableNode()`

`scrollToEnd()`

`scrollToIndex()`

`scrollToItem()`

`scrollToOffset()`