ما الفرق بين TouchableOpacity و TouchableHighlight و Pressable ومتى نعتمد Pressable دائماً؟

الإجابة المختصرة

مكون Pressable هو المكون الأحدث والأكثر مرونة ودقة، حيث يوفر وصولاً دقيقاً لحالات الضغط المتعددة (Pressed, Hovered, Focused) وتأخير الضغط الطويل دون تعقيدات التغليف القديمة.

الشرح

المكونات القديمة مثل TouchableOpacity كانت مجرد أغلفة تعتمد على أنظمة تحريك محددة مسبقاً (تعديل الشفافية opacity فقط). بينما صُمم Pressable ليكون الأساس الموحد لكافة التفاعلات اللمسية في ريأكت نيتف، حيث يستقبل دالة لتنسيق العنصر بناءً على حالة { pressed } بدقة فائقة ويدعم سمات إمكانية الوصول والتفاعل العصري.

مثال بالكود

import { Pressable, Text, StyleSheet } from 'react-native';

function ActionButton({ onPress, title }: { onPress: () => void; title: string }) {
  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => [
        styles.button,
        { opacity: pressed ? 0.7 : 1.0, transform: [{ scale: pressed ? 0.98 : 1.0 }] }
      ]}
    >
      <Text style={styles.text}>{title}</Text>
    </Pressable>
  );
}

أخطاء شائعة

• استخدام TouchableOpacity لتأثيرات معقدة تتطلب تعديل خصائص متعددة غير الشفافية (مثل تغيير لون الخلفية أو الحجم).

أسئلة متابعة

• ما الفرق بين مكون Switch ومكون ActivityIndicator وكيف تخصص مظهرهما عبر المنصتين؟

المصادر

• React Native docs — Pressable
• React Native docs — TouchableOpacity