React Native / Expo Icons

Expo Icons

Апп дахь товч, navigation, жагсаалт — иконтой болбол мэргэжлийн харагдал төрдөг. Expo-д @expo/vector-icons багц суулгалттай ирдэг бөгөөд Ionicons, MaterialIcons, FontAwesome зэрэг олон икон цуглуулга агуулдаг. Нэмэлт суулгалтгүйгээр шууд ашиглана.

Үндсэн хэрэглээ

jsx
import { View, StyleSheet } from "react-native";
import { Ionicons } from "@expo/vector-icons";

export default function App() {
  return (
    <View style={styles.container}>
      <Ionicons name="home" size={32} color="#22d3ee" />
      <Ionicons name="person-circle-outline" size={32} color="#94a3b8" />
      <Ionicons name="book-outline" size={32} color="#a78bfa" />
      <Ionicons name="settings-sharp" size={32} color="#475569" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    gap: 24,
    backgroundColor: "#0b1120",
  },
});

name prop-д икон нэрийг, size-д хэмжээг (тоо), color-д өнгийг дамжуулна. Энэ л болоо — маш энгийн.

Ямар икон цуглуулга байдаг вэ?

Expo-д дараах цуглуулгууд суулгалттай ирдэг:

| Цуглуулга | Import | Тайлбар | | --------------- | -------------------- | ----------------------- | | Ionicons | @expo/vector-icons | Хамгийн их хэрэглэгддэг | | MaterialIcons | @expo/vector-icons | Google Material Design | | FontAwesome | @expo/vector-icons | Сонгодог вэб иконууд | | Feather | @expo/vector-icons | Нимгэн, цэвэр хэлбэр | | AntDesign | @expo/vector-icons | Alibaba Design System |

Бүх иконыг https://icons.expo.fyi хаягаас хайж болно — нэрийг хуулаад name prop-д оруулахад л болно.

Иконтой товч хийх

jsx
import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
import { Ionicons } from "@expo/vector-icons";

function IconButton({ icon, label, onPress, color = "#22d3ee" }) {
  return (
    <TouchableOpacity style={styles.btn} onPress={onPress}>
      <Ionicons name={icon} size={20} color={color} />
      <Text style={[styles.label, { color }]}>{label}</Text>
    </TouchableOpacity>
  );
}

export default function App() {
  return (
    <View style={styles.container}>
      <IconButton icon="play-circle" label="Хичээл эхлэх" onPress={() => {}} />
      <IconButton
        icon="bookmark-outline"
        label="Хадгалах"
        onPress={() => {}}
        color="#94a3b8"
      />
      <IconButton
        icon="share-outline"
        label="Хуваалцах"
        onPress={() => {}}
        color="#94a3b8"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    gap: 16,
    backgroundColor: "#0b1120",
  },
  btn: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
    backgroundColor: "#0f172a",
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "#1e293b",
    width: 220,
  },
  label: {
    fontSize: 15,
    fontWeight: "500",
  },
});

Tab navigation-д икон ашиглах

Tab navigation-д иконыг tabBarIcon prop-оор дамжуулдаг — дараагийн хичээлүүдэд ашиглах тул одоо жишээг харж аваарай:

jsx
import { Ionicons } from '@expo/vector-icons';

// Tab.Screen-н options дотор:
tabBarIcon: ({ focused, color, size }) => (
  <Ionicons
    name={focused ? 'home' : 'home-outline'}
    size={size}
    color={color}
  />
),

focused нь тухайн tab сонгогдсон эсэхийг заана — сонгогдоход суурь дүрс (home), сонгогдоогүй үед цагираг дүрс (home-outline) харагдуулж болно.

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

Expo Icons-ийг сурлаа. Дараагийн хичээлд Stack Navigation — дэлгэцүүд хооронд шилжих, буцах, параметр дамжуулах. Нэгээс олон дэлгэцтэй жинхэнэ апп бүтээж эхэлнэ!

← Өмнөх хичээлImage компонентДараах хичээл →Stack Navigation