React Native / StyleSheet үндэс

StyleSheet үндэс

React Native-д CSS файл байдаггүй. Оронд нь StyleSheet объект ашигладаг — CSS-тэй маш төстэй боловч JavaScript синтакстай. Энэ хичээлд StyleSheet-ийн дүрмүүд, хамгийн их хэрэглэгддэг өмч, болон вэбийн CSS-тэй ялгааг судална.

StyleSheet.create() хэрхэн ажилладаг вэ?

StyleSheet.create() нь style объектуудын цуглуулга үүсгэдэг. Тус бүрт нэр өгч, component-ийн style prop-д дамжуулдаг:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>StyleSheet жишээ</Text>
      <Text style={styles.body}>Энэ бол body текст.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#0b1120",
    padding: 20,
  },
  title: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#f1f5f9",
    marginBottom: 8,
  },
  body: {
    fontSize: 15,
    color: "#94a3b8",
    lineHeight: 22,
  },
});

StyleSheet.create() нь plain объектаас илүү хурдан ажилладаг — React Native дотроо style-ийг оновчилдог. Тиймээс style-ийг шууд style={{ color: 'red' }} гэж бичихийн оронд StyleSheet.create() ашиглах нь зөв.

Хамгийн их хэрэглэгддэг өмчүүд

Хэмжээ ба зай

jsx
const styles = StyleSheet.create({
  box: {
    width: 200, // тогтмол өргөн (px)
    height: 100, // тогтмол өндөр (px)
    padding: 16, // дотоод зай — 4 талаас
    paddingHorizontal: 20, // зөвхөн зүүн, баруун
    paddingVertical: 12, // зөвхөн дээр, доор
    margin: 8, // гадаад зай — 4 талаас
    marginBottom: 16, // зөвхөн доод зай
    marginTop: 8, // зөвхөн дээд зай
  },
});

Өнгө ба хүрээ

jsx
const styles = StyleSheet.create({
  card: {
    backgroundColor: "#0f172a", // дэвсгэр өнгө
    borderRadius: 12, // булангийн тойргошил
    borderWidth: 1, // хүрээний зузаан
    borderColor: "#1e293b", // хүрээний өнгө
    shadowColor: "#000", // сүүдэр (iOS)
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 4, // сүүдэр (Android)
  },
});

Текстийн style

jsx
const styles = StyleSheet.create({
  heading: {
    fontSize: 24, // үсгийн хэмжээ
    fontWeight: "bold", // 'normal', 'bold', '100'–'900'
    color: "#f1f5f9", // текстийн өнгө
    lineHeight: 32, // мөр хоорондын зай
    letterSpacing: 0.5, // үсэг хоорондын зай
    textAlign: "center", // 'left', 'center', 'right'
    textDecorationLine: "underline", // доогуур зураас
  },
});

CSS-тэй харьцуулбал ямар ялгаа байдаг вэ?

React Native-н StyleSheet нь CSS-тэй маш төстэй боловч хэдэн чухал ялгаа бий:

| CSS | StyleSheet | Тайлбар | | -------------------- | ---------------------- | ------------------ | | background-color | backgroundColor | camelCase нэршил | | font-size: 16px | fontSize: 16 | тоо, px бичихгүй | | border-radius: 8px | borderRadius: 8 | тоо, px бичихгүй | | display: flex | автоматаар flex | бүх View flex | | class="title" | style={styles.title} | object дамжуулна |

React Native-д бүх хэмжээ нь unitless (нэгжгүй) байдаг — 16px гэж биш 16 гэж бичнэ. React Native өөрөө дэлгэцийн нягтаршлыг харгалзаж тооцдог.

Олон style нэгтгэх

Нэг component-д олон style нэгтгэхийг хүсвэл массив ашиглана:

jsx
<Text style={[styles.base, styles.highlighted, { color: "#22d3ee" }]}>
  Нэгтгэсэн style
</Text>

Сүүлийн style нь өмнөхийг дарна — CSS-н cascade-тэй адил зарчим. Нөхцөл байдлаас хамааруулан style нэмэх үед маш хэрэгтэй.

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

StyleSheet-ийн үндсийг ойлголоо. Дараагийн хичээлд Flexbox — элементүүдийг хэрхэн байршуулах, хэвтээ болон босоо зохион байгуулах аргыг судална. Flexbox бол React Native-н layout-н гол тулгуур.

← Өмнөх хичээлView ба TextДараах хичээл →Flexbox layout