React NativeのVirtualizedListコンポーネントの使い方を徹底解説

VirtualizedListコンポーネントは、非常に大量のデータを扱うリストの表示に最適なコンポーネントです。VirtualizedListを活用することで、パフォーマンスの向上とメモリ使用量の効率化を実現できます。ユーザーがスクロールするのに合わせて、必要なデータだけが順次表示される仕組みになっています。

VirtualizedListの基本的な構成は以下の通りです。

<VirtualizedList
  data={DATA}
  initialNumToRender={4}
  renderItem={renderItem}
  keyExtractor={keyExtractor}
  getItemCount={getItemCount}
  getItem={getItem}
/>

VirtualizedListの主要なプロパティ

それでは、実際に動作するサンプルを見ていきましょう。

例：VirtualizedListを使ったデータ表示

VirtualizedListを使用するには、まず以下のようにインポートします。

import { SafeAreaView, View, VirtualizedList, StyleSheet, Text } from 'react-native';

VirtualizedList部分のコードは以下の通りです。

<SafeAreaView>
  <VirtualizedList
    data={DATA}
    initialNumToRender={4}
    renderItem={({ item }) => <Item title={item.title} />}
    keyExtractor={item => item.id}
    getItemCount={getItemCount}
    getItem={getItem}
  />
</SafeAreaView>

initialNumToRender={4}を指定しているため、初回表示時には4件のアイテムがレンダリングされます。renderItemプロパティは画面にアイテムを表示するために使われ、以下のように定義されたカスタムコンポーネント「Item」を利用しています。

const Item = ({ title }) => {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
}

keyExtractorは、各アイテムに対して一意のキーを定義します。

keyExtractor={item => item.id}

getItemCountプロパティは、ユーザーに表示されるアイテムの総数を取得する役割を担います。ここでは、以下のように定義されたgetItemCount関数を呼び出しています。

const getItemCount = (data) => {
  return 100;
}
getItemCount={getItemCount}

getItemプロパティは、表示すべきデータを取得するためのものです。以下のように定義されたgetItemメソッドを呼び出します。

const getItem = (data, index) => {
  return {
    id: index,
    title: 'test'
  }
}
getItem={getItem}

完全なサンプルコード

VirtualizedListを表示するまでの完全なコードは以下の通りです。

import React from 'react';
import { SafeAreaView, View, VirtualizedList, StyleSheet, Text } from 'react-native';

const DATA = [];

const getItem = (data, index) => {
  return {
    id: index,
    title: 'test'
  }
}

const getItemCount = (data) => {
  return 100;
}

const Item = ({ title }) => {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
}

const VirtualizedListExample = () => {
  return (
    <SafeAreaView>
      <VirtualizedList
        data={DATA}
        initialNumToRender={4}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        getItemCount={getItemCount}
        getItem={getItem}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  item: {
    backgroundColor: '#ccc',
    height: 100,
    justifyContent: 'center',
    marginVertical: 8,
    marginHorizontal: 16,
    padding: 20,
  },
  title: {
    fontSize: 32,
  },
});

export default VirtualizedListExample;

実行結果