React Native / TouchableOpacity ба Pressable

TouchableOpacity ба Pressable

React Native-д HTML-ийн <button> тэг байдаггүй. Оронд нь TouchableOpacity болон Pressable ашигладаг. Хэрэглэгч дарахад апп хариу үйлдэл хийдэг болгох нь интерактив UI бүтээхэд хамгийн чухал алхам.

TouchableOpacity

TouchableOpacity бол хамгийн энгийн бөгөөд хамгийн их хэрэглэгддэг дарагдах component. Дарахад бага зэрэг бүдгэрдэг — хэрэглэгчид "дарагдлаа" гэдэг мэдрэмж өгдөг.

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

export default function App() {
  const handlePress = () => {
    console.log("Товч дарагдлаа!");
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.button} onPress={handlePress}>
        <Text style={styles.buttonText}>Дарах</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#0b1120",
  },
  button: {
    backgroundColor: "#22d3ee",
    paddingHorizontal: 32,
    paddingVertical: 14,
    borderRadius: 10,
  },
  buttonText: {
    color: "#0b1120",
    fontSize: 16,
    fontWeight: "bold",
  },
});

onPress prop нь хэрэглэгч дарах үед дуудагдах функц. Вэбийн onClick-тэй ижил зарчим.

activeOpacity prop-оор дарах үеийн бүдгэрлийн хэмжээг тохируулж болно — 0 (бүрэн тунгалаг) -аас 1 (өөрчлөлтгүй) хооронд:

jsx
<TouchableOpacity activeOpacity={0.7} onPress={handlePress}>
  <Text>Дарах</Text>
</TouchableOpacity>

Pressable

Pressable нь TouchableOpacity-аас илүү дэвшилтэт хувилбар. Дарах, суллах, удаан дарах зэрэг илүү олон нөхцөл байдлыг хянах боломжтой:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Pressable
        onPress={() => console.log("Дарагдлаа")}
        onLongPress={() => console.log("Удаан дарагдлаа")}
        style={({ pressed }) => [
          styles.button,
          pressed && styles.buttonPressed,
        ]}
      >
        {({ pressed }) => (
          <Text style={styles.text}>
            {pressed ? "Дарагдаж байна..." : "Дарах"}
          </Text>
        )}
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#0b1120",
  },
  button: {
    backgroundColor: "#22d3ee",
    paddingHorizontal: 32,
    paddingVertical: 14,
    borderRadius: 10,
  },
  buttonPressed: {
    backgroundColor: "#06b6d4",
    transform: [{ scale: 0.97 }],
  },
  text: {
    color: "#0b1120",
    fontWeight: "bold",
    fontSize: 16,
  },
});

style prop нь pressed төлөв хүлээн авсан функц байж болно — дарах үед өөр style хэрэглэнэ. Энэ нь TouchableOpacity-аас илүү уян хатан.

Аль нэгийг хэзээ ашиглах вэ?

| | TouchableOpacity | Pressable | | ------------------------ | ------------------ | -------------- | | Энгийн товч | ✅ Тохиромжтой | ✅ Тохиромжтой | | Удаан дарах | ❌ | ✅ | | Дарах үеийн custom style | Хязгаарлагдмал | ✅ Бүрэн | | Хуучин код | Их тааралдана | Шинэ код |

Шинэ код бичихдээ Pressable ашиглах нь зөв — илүү уян хатан, ирээдүйтэй.

Бодит жишээ: товчнуудын бүлэг

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

export default function ButtonGroup() {
  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={[styles.btn, styles.primary]}
        onPress={() => Alert.alert("Амжилт!", "Хичээл дууслаа.")}
      >
        <Text style={styles.primaryText}>Дараах хичээл →</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={[styles.btn, styles.secondary]}
        onPress={() => Alert.alert("Буцлаа")}
      >
        <Text style={styles.secondaryText}>← Буцах</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 24,
    gap: 12,
    backgroundColor: "#0b1120",
  },
  btn: {
    paddingVertical: 14,
    borderRadius: 10,
    alignItems: "center",
  },
  primary: { backgroundColor: "#22d3ee" },
  secondary: {
    backgroundColor: "transparent",
    borderWidth: 1,
    borderColor: "#1e293b",
  },
  primaryText: { color: "#0b1120", fontWeight: "bold", fontSize: 15 },
  secondaryText: { color: "#94a3b8", fontSize: 15 },
});

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

Товч хийж сурлаа! Дараагийн хичээлд ScrollView — дэлгэцэнд багтахааргүй урт агуулгыг гүйлгэх боломж олгодог component. Жагсаалт, нийтлэл, тохиргооны хуудас — бүгд ScrollView-д суурилдаг.

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