rn-8-4. FlatListの使い方

FlatListで効率的なリストを作る方法を学びます

React Native - 第2章: React Native基礎 - インタラクションとリスト

📚

課題：FlatListの使い方を学ぼう

FlatListは、大量のデータを効率的に表示するためのコンポーネントです。果物のリストを作って、タップで選択できるようにしてみましょう。

やること

1.果物の配列を作る（id、name、selectedのプロパティ）
2.FlatListで果物を表示
3.TouchableOpacityでタップできるようにする
4.タップで選択状態を切り替える
5.選択されたアイテムは背景色を変える

FlatListの使い方

FlatListをインポートします：

import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';

FlatListで表示します：

<FlatList
  data={fruits}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <TouchableOpacity onPress={() => toggleFruit(item.id)}>
      <View style={[styles.item, item.selected && styles.selected]}>
        <Text>{item.selected ? '☑' : '□'} {item.name}</Text>
      </View>
    </TouchableOpacity>
  )}
/>

data: 表示するデータの配列
keyExtractor: 各アイテムの一意なキーを返す関数
renderItem: 各アイテムをどう表示するかを定義

ポイント：FlatListはスクロール機能が組み込まれており、大量のデータでも効率的に表示できます。

期待される出力

□ りんご
☑ バナナ      ← 選択（緑背景）
□ オレンジ
□ ぶどう
□ いちご

import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function App() {
  // ここに果物の配列を作成してください
  // 各果物は { id: '1', name: 'りんご', selected: false } の形式
  const [fruits, setFruits] = useState([
    { id: '1', name: 'りんご', selected: false },
    { id: '2', name: 'バナナ', selected: false },
    { id: '3', name: 'オレンジ', selected: false },
    { id: '4', name: 'ぶどう', selected: false },
    { id: '5', name: 'いちご', selected: false },
  ]);
  
  // ここに選択状態を切り替える関数を作成してください
  const toggleFruit = (id) => {
    // fruitsをmapして、idが一致するアイテムのselectedを反転
    
  };
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>果物リスト</Text>
      
      {/* ここにFlatListを追加してください */}
      {/* data、keyExtractor、renderItemを設定 */}
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  item: {
    padding: 15,
    marginBottom: 10,
    backgroundColor: '#F5F5F5',
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#E0E0E0',
  },
  selected: {
    backgroundColor: '#C8E6C9',
    borderColor: '#4CAF50',
  },
  itemText: {
    fontSize: 18,
  },
});

Open Sandbox

← 前のレッスン: rn-8-3. ScrollViewの使い方

次のレッスン: rn-9-1. シンプルなTodoアプリ →