React Native / ScrollView

ScrollView

Апп дэх агуулга дэлгэцэнд багтахаа болих үед ScrollView хэрэг болдог. Нийтлэл унших, тохиргоо харах, хэлбэр бөглөх — бараг бүх дэлгэцэд ScrollView ашиглагддаг. Энгийн ч тохиромжтой component.

Үндсэн ScrollView

View-ийг ScrollView-ээр орлуулахад л болно — агуулга автоматаар гүйлгэгддэг болно:

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

export default function App() {
  return (
    <ScrollView style={styles.scroll} contentContainerStyle={styles.content}>
      <Text style={styles.heading}>React Native гэж юу вэ?</Text>
      <Text style={styles.body}>
        React Native бол Meta компаний 2015 онд нийтэд нээсэн мобайл апп
        хөгжүүлэлтийн фреймворк юм. Нэг JavaScript код бичиж iOS болон Android
        хоёр платформд нийтлэх боломжтой.
      </Text>
      <Text style={styles.body}>
        Facebook, Instagram, Shopify, Microsoft Teams зэрэг аппууд React Native
        дээр ажилладаг. Энэ технологи аж үйлдвэрт нэлээд түгсэн.
      </Text>
      <Text style={styles.heading}>Яагаад сурах хэрэгтэй вэ?</Text>
      <Text style={styles.body}>
        Нэг кодоор хоёр платформд гаргах нь хөгжүүлэлтийн хугацааг хоёр дахин
        богиносгодог. React мэдлэгтэй хүн маш хурдан сурч чадна.
      </Text>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  scroll: {
    flex: 1,
    backgroundColor: "#0b1120",
  },
  content: {
    padding: 20,
    paddingBottom: 40,
  },
  heading: {
    fontSize: 20,
    fontWeight: "bold",
    color: "#f1f5f9",
    marginBottom: 10,
    marginTop: 20,
  },
  body: {
    fontSize: 15,
    color: "#94a3b8",
    lineHeight: 24,
    marginBottom: 12,
  },
});

style нь ScrollView-н гадна хайрцагт хэрэглэгдэнэ. contentContainerStyle нь доторх агуулгад хэрэглэгдэнэ — padding энд тавих нь зөв.

Хэвтээ ScrollView

horizontal prop нэмэхэд агуулга хэвтээ гүйлгэгддэг болно. Зургийн цуваа, картын жагсаалт гэх мэт UI-д маш тохиромжтой:

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

const COURSES = [
  "JavaScript",
  "TypeScript",
  "Python",
  "React",
  "Next.js",
  "Go",
];

export default function HorizontalScroll() {
  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={styles.row}
    >
      {COURSES.map((course) => (
        <View key={course} style={styles.chip}>
          <Text style={styles.chipText}>{course}</Text>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: "row",
    paddingHorizontal: 16,
    paddingVertical: 12,
    gap: 8,
  },
  chip: {
    backgroundColor: "#1e293b",
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 20,
    borderWidth: 1,
    borderColor: "#334155",
  },
  chipText: {
    color: "#94a3b8",
    fontSize: 14,
  },
});

showsHorizontalScrollIndicator={false} нь гүйлгэх мөрийг нуудаг — харагдахад цэвэрхэн болдог.

KeyboardAvoidingView хамт ашиглах

Маягт (form) бүхий дэлгэцэд гар (keyboard) гарч ирэхэд агуулга хаагдаж болно. KeyboardAvoidingView-г ScrollView-тэй хамт ашиглаж энэ асуудлыг шийднэ:

jsx
import {
  ScrollView,
  KeyboardAvoidingView,
  Platform,
  TextInput,
  Text,
  StyleSheet,
} from "react-native";

export default function FormScreen() {
  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === "ios" ? "padding" : "height"}
    >
      <ScrollView contentContainerStyle={styles.content}>
        <Text style={styles.label}>Нэр</Text>
        <TextInput
          style={styles.input}
          placeholder="Нэрээ оруулна уу"
          placeholderTextColor="#475569"
        />

        <Text style={styles.label}>И-мэйл</Text>
        <TextInput
          style={styles.input}
          placeholder="И-мэйл хаяг"
          placeholderTextColor="#475569"
        />

        <Text style={styles.label}>Нууц үг</Text>
        <TextInput
          style={styles.input}
          secureTextEntry
          placeholder="Нууц үг"
          placeholderTextColor="#475569"
        />
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  content: { padding: 20, backgroundColor: "#0b1120", flexGrow: 1 },
  label: { color: "#94a3b8", marginBottom: 6, fontSize: 14 },
  input: {
    backgroundColor: "#0f172a",
    borderWidth: 1,
    borderColor: "#1e293b",
    borderRadius: 8,
    padding: 12,
    color: "#f1f5f9",
    marginBottom: 16,
  },
});

Platform.OS нь 'ios' эсвэл 'android' утга буцаадаг — платформ бүрт тохирсон тохиргоо хийхэд ашиглана.

ScrollView ба FlatList — хэзээ аль нэгийг сонгох вэ?

| | ScrollView | FlatList | | ------------- | -------------------- | ------------------------------ | | Хэрэглээ | Тогтмол агуулга | Урт жагсаалт | | Гүйцэтгэл | Бүгдийг render хийнэ | Зөвхөн харагдахыг render хийнэ | | Хэдэн элемент | ~20 хүртэл | Хязгааргүй |

Хэдэн зуун мөр бүхий жагсаалтад ScrollView удаашрах тул FlatList ашиглах нь зөв.

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

ScrollView-г сурлаа. Дараагийн хичээлд FlatList — олон мянган element бүхий жагсаалтыг гүйцэтгэлтэйгээр харуулах арга. Instagram-н feed, мессежийн жагсаалт — бүгд FlatList дээр ажилладаг.

← Өмнөх хичээлTouchableOpacity ба PressableДараах хичээл →FlatList