React Native / Image компонент

Image компонент

Зураг харуулах нь апп хөгжүүлэлтэд байнга тохиолддог. React Native-н Image component нь локал зураг болон сүлжээний зургийг хоёуланг нь дэмждэг. Зургийн хэмжээ тааруулах, ачаалах горим — энэ бүгдийг энэ хичээлд сурна.

Локал зураг харуулах

Проектийн assets хавтас дотрох зургийг require() ашиглан оруулна:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Image source={require("./assets/images/logo.png")} style={styles.logo} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#0b1120",
  },
  logo: {
    width: 120,
    height: 120,
    borderRadius: 16,
  },
});

Локал зургийн хувьд width ба height-г заавал тодорхойлох шаардлагатай — тодорхойлоогүй бол зураг харагдахгүй.

Сүлжээний зураг (remote image)

URL-аас зураг ачаалахад source prop-д { uri: '...' } объект дамжуулна:

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

export default function UserAvatar() {
  return (
    <View style={styles.container}>
      <Image
        source={{
          uri: "https://avatars.githubusercontent.com/u/12345678",
        }}
        style={styles.avatar}
      />
      <Text style={styles.name}>Болд Баатар</Text>
      <Text style={styles.role}>React Native хөгжүүлэгч</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#0b1120",
    gap: 8,
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius: 40,
    borderWidth: 2,
    borderColor: "#22d3ee",
  },
  name: { fontSize: 18, fontWeight: "bold", color: "#f1f5f9" },
  role: { fontSize: 14, color: "#94a3b8" },
});

resizeMode — зургийг яаж байршуулах вэ?

resizeMode prop нь зураг хайрцагтаа яаж багтахыг тодорхойлно:

jsx
{
  /* cover — хайрцагийг бүрэн дүүргэнэ, хажуу нь таслагдаж болно */
}
<Image source={{ uri: imageUrl }} style={styles.img} resizeMode="cover" />;

{
  /* contain — бүтэн зургийг харуулна, цагаан зай үлдэж болно */
}
<Image source={{ uri: imageUrl }} style={styles.img} resizeMode="contain" />;

{
  /* stretch — хайрцагт яг сунгана, дүрс гажиж болно */
}
<Image source={{ uri: imageUrl }} style={styles.img} resizeMode="stretch" />;

| resizeMode | Тайлбар | Хэрэглэх үе | | ---------- | ---------------------------------- | ----------------------- | | cover | Хайрцагийг дүүргэнэ, таслагдана | Ар дэвсгэр, ковер зураг | | contain | Бүтэн харагдана, зай үлдэнэ | Лого, дүрс тэмдэг | | stretch | Хайрцагт яг сунгана | Ховор тохиолдол | | center | Голдоо байна, хэмжээ өөрчлөгдөхгүй | Жижиг зураг |

Ачаалж байх үед placeholder харуулах

Сүлжээний зураг ачаалагдах хугацаанд хоосон харагдвал муугийн мэт санагддаг. onLoadEnd ашиглан placeholder нэмнэ:

jsx
import { View, Image, ActivityIndicator, StyleSheet } from "react-native";
import { useState } from "react";

export default function SmartImage({ uri }) {
  const [loaded, setLoaded] = useState(false);

  return (
    <View style={styles.wrapper}>
      {!loaded && (
        <View style={styles.placeholder}>
          <ActivityIndicator color="#22d3ee" />
        </View>
      )}
      <Image
        source={{ uri }}
        style={[styles.image, !loaded && { opacity: 0 }]}
        resizeMode="cover"
        onLoadEnd={() => setLoaded(true)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    width: "100%",
    height: 200,
    borderRadius: 12,
    overflow: "hidden",
    backgroundColor: "#1e293b",
  },
  placeholder: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: "center",
    alignItems: "center",
  },
  image: {
    width: "100%",
    height: "100%",
  },
});

StyleSheet.absoluteFillObject нь { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 } -тэй тэнцүү — эцэг элементийн бүх талыг дүүргэдэг товчлол.

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

Image component-ийг сурлаа. Дараагийн хичээлд Expo Icons — аппд мянга гаруй бэлэн дүрс тэмдэг нэмэх. Товч, navigation, жагсаалт — иконтой болбол апп нь мэргэжлийн харагдах болно.

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