React Native / FlatList

FlatList

FlatList бол React Native-н хамгийн чухал component-үүдийн нэг. Олон зуун, олон мянган element бүхий жагсаалтыг гүйцэтгэлтэйгээр харуулдаг. Instagram-н feed, мессежийн жагсаалт, бүтээгдэхүүний каталог — бараг бүх апп FlatList ашигладаг.

ScrollView-аас юугаараа ялгаатай вэ?

ScrollView нь доторх бүх element-ийг нэг дор render хийдэг. 500 элемент байвал 500-ийг бүгдийг санах ойд байршуулна — удаан, санах ой их зардаг.

FlatList нь зөвхөн дэлгэцэнд харагдаж байгаа element-үүдийг render хийдэг. Хэрэглэгч гүйлгэхэд шинэ element-үүд render хийгдэж, дэлгэцнээс гарсан нь санах ойгоос чөлөөлөгдөнө. 10,000 мөр байсан ч хурдан ажилладаг.

Үндсэн FlatList

jsx

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

const LESSONS = [
  { id: "1", title: "React Native гэж юу вэ?", duration: "5 мин" },
  { id: "2", title: "Node.js суулгах", duration: "3 мин" },
  { id: "3", title: "Expo суулгах", duration: "7 мин" },
  { id: "4", title: "Анхны апп", duration: "10 мин" },
  { id: "5", title: "View ба Text", duration: "8 мин" },
];

export default function LessonList() {
  return (
    <FlatList
      data={LESSONS}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={styles.row}>
          <Text style={styles.title}>{item.title}</Text>
          <Text style={styles.duration}>{item.duration}</Text>
        </View>
      )}
      contentContainerStyle={styles.list}
      style={styles.container}
    />
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#0b1120" },
  list: { padding: 16, gap: 8 },
  row: {
    backgroundColor: "#0f172a",
    padding: 16,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "#1e293b",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  title: { fontSize: 15, color: "#f1f5f9", flex: 1 },
  duration: { fontSize: 13, color: "#475569" },
});

Гурван заавал шаардлагатай prop:

data — харуулах өгөгдлийн массив
keyExtractor — мөр бүрт өвөрмөц түлхүүр буцаадаг функц
renderItem — мөр бүрийг хэрхэн харуулахыг тодорхойлдог функц

ItemSeparatorComponent ба ListEmptyComponent

FlatList нь олон тохиромжтой prop-той:

jsx

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

export default function CourseList({ courses }) {
  return (
    <FlatList
      data={courses}
      keyExtractor={(item) => item.slug}
      renderItem={({ item }) => (
        <View style={styles.card}>
          <Text style={styles.name}>{item.title}</Text>
        </View>
      )}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
      ListEmptyComponent={() => (
        <View style={styles.empty}>
          <Text style={styles.emptyText}>Курс олдсонгүй.</Text>
        </View>
      )}
      ListHeaderComponent={() => (
        <Text style={styles.header}>Бүх сургалтууд</Text>
      )}
    />
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, backgroundColor: "#0f172a" },
  name: { color: "#f1f5f9", fontSize: 15 },
  separator: { height: 1, backgroundColor: "#1e293b" },
  empty: { alignItems: "center", padding: 40 },
  emptyText: { color: "#475569", fontSize: 15 },
  header: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#f1f5f9",
    padding: 16,
    paddingBottom: 8,
  },
});

ItemSeparatorComponent — мөр хоорондын зааглагч (хүснэгтийн шугам гэх мэт)
ListEmptyComponent — data хоосон үед харуулах агуулга
ListHeaderComponent — жагсаалтын дээд хэсэг

numColumns — олон баганад харуулах

Зурагны галерей эсвэл grid layout хийхэд numColumns ашиглана:

jsx

import { FlatList, View, Text, StyleSheet, Dimensions } from "react-native";

const { width } = Dimensions.get("window");
const COLUMN_COUNT = 2;
const CARD_WIDTH = (width - 48) / COLUMN_COUNT;

const ITEMS = Array.from({ length: 10 }, (_, i) => ({
  id: String(i + 1),
  label: `Курс ${i + 1}`,
}));

export default function GridList() {
  return (
    <FlatList
      data={ITEMS}
      keyExtractor={(item) => item.id}
      numColumns={COLUMN_COUNT}
      columnWrapperStyle={styles.row}
      renderItem={({ item }) => (
        <View style={[styles.card, { width: CARD_WIDTH }]}>
          <Text style={styles.label}>{item.label}</Text>
        </View>
      )}
      contentContainerStyle={styles.list}
      style={styles.container}
    />
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#0b1120" },
  list: { padding: 16 },
  row: { gap: 16, marginBottom: 16 },
  card: {
    backgroundColor: "#0f172a",
    borderRadius: 10,
    padding: 20,
    borderWidth: 1,
    borderColor: "#1e293b",
    alignItems: "center",
  },
  label: { color: "#94a3b8", fontSize: 14 },
});

Dimensions.get('window').width нь дэлгэцийн өргөнийг буцаадаг — баганын өргөнийг динамикаар тооцоход ашиглана.

Дараагийн хичээлд:

FlatList-ийн үндсийг сурлаа. Дараагийн хичээлд SectionList — FlatList-тэй адил боловч өгөгдлийг бүлэглэж, гарчигтай хэсгүүдэд харуулдаг. Тохиргооны хуудас, харилцагчийн жагсаалт зэрэгт маш тохиромжтой.

← Өмнөх хичээлScrollView Дараах хичээл →SectionList