Анхны апп ажиллуулах

Орчин тохируулж дууслаа — одоо жинхэнэ код бичиж эхэлнэ. Энэ хичээлд create-expo-app үүсгэсэн файлуудыг судалж, өөрийн мэндчилгээний апп бичнэ. Анхны кодоо дэлгэц дээр харахад маш сэтгэл хөдлөм байдаг — бэлэн болоорой!

Проектийн бүтцийг ойлгох

my-first-app хавтасаа кодын редактор (VS Code) дээр нээнэ. Хамгийн гол файл бол app/(tabs)/index.tsx — энэ бол аппын нүүр хуудас.

Одоо байгаа кодыг бүгдийг нь устгаад дараах кодоор солино:

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

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Сайн уу, дэлхий!</Text>
      <Text style={styles.subtitle}>Миний анхны React Native апп</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#0b1120",
  },
  title: {
    fontSize: 28,
    fontWeight: "bold",
    color: "#f1f5f9",
  },
  subtitle: {
    fontSize: 16,
    color: "#94a3b8",
    marginTop: 8,
  },
});

Файлаа хадгалахад (Ctrl+S эсвэл Cmd+S) эмулятор дэлгэц дээр өөрчлөлт шууд харагдана. Expo-гийн Fast Refresh функц ажиллаж байна.

Expo ажиллуулах

Хэрэв Expo ажиллахгүй байвал терминалд проектийн хавтас дотор байгаа эсэхийг шалгаад:

cd my-first-app
npx expo start

Гарч ирэх сонголтууд:

› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web

› Press r │ reload app
› Press m │ toggle menu

a эсвэл i дарж эмулятораа нээнэ. Утасны Expo Go ашиглаж байвал QR кодыг уншуулна.

Fast Refresh туршиж үзэх

Кодоо өөрчлөөд хадгалахад апп автоматаар шинэчлэгдэхийг ажигла. Жишээ нь title текстийг өөрчилье:

<Text style={styles.title}>Миний нэр бол [нэрээ бич]!</Text>

Файл хадгалахад дэлгэц дээр шууд шинэ текст гарч ирнэ — хуудасыг гараар reload хийх шаардлагагүй. Энэ бол хөгжүүлэлтийг маш хурдан болгодог онцлог.

Өнгө өөрчлөх

backgroundColor утгыг өөрчилж харна:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#1a1a2e", // ← энэ утгыг өөрчил
  },
  // ...
});

#1a1a2e, #0f3460, #16213e — дуртай өнгөө туршиж үзээрэй. Хадгалах бүрт дэлгэц шууд өөрчлөгдөнө.

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

Анхны аппаа ажиллуулж Fast Refresh-ийг туршлаа. Дараагийн хичээлд React Native-н хамгийн үндсэн хоёр component — View ба Text — ийг гүнзгий судална. Layout хэрхэн зохион байгуулагддагийг ойлгоно.