React Native / SectionList

SectionList

SectionList бол FlatList-тай адил гүйцэтгэлтэй боловч өгөгдлийг бүлгүүдэд хуваан харуулдаг. Тохиргооны апп дахь "Дансны мэдээлэл / Мэдэгдэл / Аюулгүй байдал" гэх мэт хэсгүүд, харилцагчийн жагсаалт дахь үсгийн дагуух бүлэглэлт — бүгд SectionList дээр баригддаг.

SectionList-н өгөгдлийн бүтэц

FlatList-аас гол ялгаа нь data prop биш sections prop ашигладаг явдал. Мөн мөр бүр title + data хосоос бүрдэнэ:

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

const SECTIONS = [
  {
    title: "JavaScript хэлнүүд",
    data: ["JavaScript үндэс", "TypeScript үндэс"],
  },
  {
    title: "Фреймворкүүд",
    data: ["React үндэс", "Next.js үндэс", "React Native үндэс"],
  },
  {
    title: "Бусад хэлнүүд",
    data: ["Python үндэс", "Go үндэс", "PHP үндэс"],
  },
];

export default function CourseList() {
  return (
    <SectionList
      sections={SECTIONS}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => (
        <View style={styles.row}>
          <Text style={styles.rowText}>{item}</Text>
        </View>
      )}
      renderSectionHeader={({ section }) => (
        <View style={styles.header}>
          <Text style={styles.headerText}>{section.title}</Text>
        </View>
      )}
      style={styles.list}
      contentContainerStyle={{ paddingBottom: 32 }}
    />
  );
}

const styles = StyleSheet.create({
  list: { flex: 1, backgroundColor: "#0b1120" },
  header: {
    backgroundColor: "#0b1120",
    paddingHorizontal: 16,
    paddingTop: 24,
    paddingBottom: 8,
  },
  headerText: {
    fontSize: 13,
    fontWeight: "600",
    color: "#475569",
    textTransform: "uppercase",
    letterSpacing: 1,
  },
  row: {
    backgroundColor: "#0f172a",
    paddingHorizontal: 16,
    paddingVertical: 14,
    borderBottomWidth: 1,
    borderBottomColor: "#1e293b",
  },
  rowText: { fontSize: 15, color: "#f1f5f9" },
});

renderSectionHeader нь хэсэг бүрийн дээр гарчиг харуулдаг функц. renderItem-тэй ижил зарчим боловч item биш section объект хүлээн авдаг.

SectionList ба FlatList харьцуулбал

| | FlatList | SectionList | | --------- | --------------------- | ---------------------------- | | Өгөгдөл | data={массив} | sections={[{title, data}]} | | Гарчиг | ListHeaderComponent | renderSectionHeader | | Гүйцэтгэл | Маш өндөр | Маш өндөр | | Хэрэглээ | Энгийн жагсаалт | Бүлэглэсэн жагсаалт |

Бодит жишээ: тохиргооны хуудас

jsx
import {
  SectionList,
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
} from "react-native";

const SETTINGS = [
  {
    title: "Бүртгэл",
    data: [
      { id: "1", label: "Профайл засах", icon: "👤" },
      { id: "2", label: "Нууц үг солих", icon: "🔑" },
    ],
  },
  {
    title: "Мэдэгдэл",
    data: [
      { id: "3", label: "Push мэдэгдэл", icon: "🔔" },
      { id: "4", label: "И-мэйл мэдэгдэл", icon: "✉️" },
    ],
  },
  {
    title: "Апп",
    data: [
      { id: "5", label: "Харанхуй горим", icon: "🌙" },
      { id: "6", label: "Хэл солих", icon: "🌐" },
      { id: "7", label: "Хувилбарын мэдээлэл", icon: "ℹ️" },
    ],
  },
];

export default function SettingsScreen() {
  return (
    <SectionList
      sections={SETTINGS}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <TouchableOpacity style={styles.row}>
          <Text style={styles.icon}>{item.icon}</Text>
          <Text style={styles.label}>{item.label}</Text>
          <Text style={styles.arrow}>›</Text>
        </TouchableOpacity>
      )}
      renderSectionHeader={({ section }) => (
        <Text style={styles.sectionTitle}>{section.title}</Text>
      )}
      renderSectionFooter={() => <View style={styles.sectionGap} />}
      stickySectionHeadersEnabled={false}
      style={styles.list}
    />
  );
}

const styles = StyleSheet.create({
  list: { flex: 1, backgroundColor: "#0b1120" },
  sectionTitle: {
    fontSize: 13,
    color: "#475569",
    paddingHorizontal: 16,
    paddingTop: 20,
    paddingBottom: 6,
    textTransform: "uppercase",
    letterSpacing: 0.8,
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#0f172a",
    paddingHorizontal: 16,
    paddingVertical: 14,
    borderBottomWidth: 1,
    borderBottomColor: "#1e293b",
  },
  icon: { fontSize: 18, marginRight: 14 },
  label: { flex: 1, fontSize: 15, color: "#f1f5f9" },
  arrow: { fontSize: 20, color: "#475569" },
  sectionGap: { height: 8 },
});

stickySectionHeadersEnabled={false} нь бүлгийн гарчиг дэлгэцийн дээд хэсэгт "наалдах" зан авирыг унтраана — iOS дээр анхдагчаар идэвхтэй байдаг.

renderSectionFooter нь хэсэг бүрийн доор нэмэлт агуулга харуулна — энд хэсгүүдийн хоорондын зайг нэмж байна.

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

SectionList ашиглан бүлэглэсэн жагсаалт хийж сурлаа. Дараагийн хичээлд TextInput ба маягт — хэрэглэгчээс мэдээлэл авах, нэвтрэх маягт, хайлтын талбар гэх мэтийг хийнэ.

← Өмнөх хичээлFlatListДараах хичээл →TextInput ба маягт