React Native / View ба Text

View ба Text

React Native-д хамгийн их хэрэглэгддэг хоёр component бол View ба Text. Вэбийн <div> болон <p> тэгийн оролцоотой ижилтэй — бараг бүх UI View болон Text дээр баригддаг. Энэ хоёрыг сайн ойлговол React Native-н бүх layout ойлгогдохоор болно.

View — хайрцаг тэг

View бол харагдахгүй хайрцаг. Бусад element-үүдийг дотроо агуулж, байршлыг нь удирддаг. Вэбийн <div>-тэй яг адилхан.

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

export default function App() {
  return (
    <View style={styles.outer}>
      <View style={styles.box}>
        <Text>Эхний хайрцаг</Text>
      </View>
      <View style={styles.box}>
        <Text>Хоёрдугаар хайрцаг</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  outer: {
    flex: 1,
    padding: 20,
    backgroundColor: "#0b1120",
  },
  box: {
    backgroundColor: "#1e293b",
    padding: 16,
    marginBottom: 12,
    borderRadius: 8,
  },
});

View дотор View оруулж болно — layout хэчнээн нарийн ч байсан W View-ийг дотроо шигтгэх замаар бүтээнэ.

Text — бичвэр тэг

View-аас ялгаатай нь Text нь дэлгэц дээр харагдах бичвэр агуулдаг. React Native-д бүх бичвэр заавал Text дотор байх ёстой — View дотор шууд текст бичихийг хориглоно.

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Монгол хэлний курс</Text>
      <Text style={styles.body}>
        React Native ашиглан iOS болон Android апп хөгжүүлнэ.
      </Text>
      <Text style={styles.hint}>Үнэгүй • 50 хичээл</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 24,
    backgroundColor: "#0b1120",
  },
  heading: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#f1f5f9",
    marginBottom: 12,
  },
  body: {
    fontSize: 16,
    color: "#94a3b8",
    lineHeight: 24,
    marginBottom: 8,
  },
  hint: {
    fontSize: 13,
    color: "#475569",
  },
});

fontSize, fontWeight, color, lineHeight — эдгээр нь CSS-тэй бараг ижил боловч camelCase нэршил ашигладгийг анзаарна уу.

View дотор View — nested layout

Бодит аппуудад View-ийг олон давхар шигтгэж ашигладаг. Жишээ нь хэрэглэгчийн профайл картыг хийе:

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

export default function ProfileCard() {
  return (
    <View style={styles.container}>
      <View style={styles.card}>
        <View style={styles.avatar} />
        <View style={styles.info}>
          <Text style={styles.name}>Болд Баатар</Text>
          <Text style={styles.role}>React Native хөгжүүлэгч</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 20,
    backgroundColor: "#0b1120",
  },
  card: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#0f172a",
    padding: 16,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: "#1e293b",
  },
  avatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: "#22d3ee",
    marginRight: 14,
  },
  info: {
    flex: 1,
  },
  name: {
    fontSize: 16,
    fontWeight: "600",
    color: "#f1f5f9",
  },
  role: {
    fontSize: 13,
    color: "#94a3b8",
    marginTop: 2,
  },
});

flexDirection: 'row' нь дотрын element-үүдийг хэвтээ байдлаар зэрэгцүүлдэг. Энэ болон бусад Flexbox-н дүрмийг дараагийн хичээлүүдэд дэлгэрэнгүй үзнэ.

View ба Text-н гол ялгаа

| | View | Text | | ------------- | --------------------- | ------------------ | | Харагдах эсэх | Харагдахгүй (хайрцаг) | Харагдана (бичвэр) | | Агуулга | Бусад component | Текст | | CSS аналог | <div> | <p>, <span> | | Хэрэглээ | Layout, container | Бичвэр харуулах |

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

View ба Text-г ашигласан. Гэхдээ style-г хэрхэн зөв бичих вэ? Дараагийн хичээлд StyleSheet-ийн дүрмүүдийг бүгдийг нь судална — padding, margin, borderRadius болон бусад өмч.

← Өмнөх хичээлАнхны апп ажиллуулахДараах хичээл →StyleSheet үндэс