Pressable — τι είναι, χειρισμός πατήματων στο React Native

Τι είναι το Pressable;

Pressable — ένα στοιχείο React Native που παρέχει ενιαία διεπαφή για τον χειρισμό όλων των τύπων αφής. Σε αντίθεση με τρία διαφορετικά στοιχεία Touchable (TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback), το Pressable τα αντικαθιστά όλα με ένα με ευέλικτο σύστημα καταστάσεων και στυλισμού.

Το στοιχείο εισήχθη στο React Native 0.63 (Σεπτέμβριος 2020). Σύμφωνα με τα δεδομένα της Meta (2026), το 70% των νέων έργων στο React Native χρησιμοποιεί το Pressable αντί για στοιχεία Touchable. Το Pressable λύνει το βασικό πρόβλημα του Touchable — το απορριπωμένο API και την ανάγκη εναλλαγής μεταξύ στοιχείων για διαφορετικά εφέ.

Φιλοσοφία Pressable

Σε αντίθεση με το TouchableOpacity, όπου το εφέ πατήματος είναι απολύτως καθορισμένο (αλλαγή διαφάνειας), το Pressable παρέχει μια συνάρτηση που λαμβάνει την τρέχουσα κατάσταση. Ο προγραμματιστής αποφασίζει πώς θα αντιδράσει οπτικά στην αφή: αλλαγή χρώματος, κλίμακας, σκιάς ή συνδυασμό εφέ. Αυτό παρέχει πλήρη ελεγχό πάνω στο UX.

Καταστάσεις Pressable: pressed, hovered, focused

Pressable ορίζει τρεις καταστάσεις αλληλεπίδρασης: pressed (δάχτυλο στην οθόνη), hovered (δείκτης πάνω από το στοιχείο σε Web/TV), focused (στοιχείο σε εστίαση πληκτρολογίου). Κάθε κατάσταση ενεργοποιεί την αντίστοιχη κλήση και μεταβιβάζεται στη συνάρτηση στυλ και στη συνάρτηση απόδοσης παιδιών.

Σημαντικό: τα hovered και focused λειτουργούν μόνο σε πλατφόρμες με υποστήριξη δείκτη (Web, Android TV, Apple TV). Σε κινητές συσκευές είναι διαθέσιμη μόνο η κατάσταση pressed. Για εφαρμογές πολλάπλων πλατφορμών, σχεδιάστε τις οπτικές αντιδράσεις λαμβάνοντας υπόψη αυτόν τον περιορισμό.

<Pressable
  style={({ pressed }) => [
    styles.button,
    pressed && styles.buttonPressed,
  ]}
  onPress={handlePress}>
  {({ pressed }) => (
    <Text style={pressed ? styles.textPressed : styles.text}>
      {pressed ? 'Release' : 'Press'}
    </Text>
  )}
</Pressable>

API και κλήσεις Pressable

Pressable API περιλαμβάνει τέσσερις κύριες κλήσεις: onPress (πλήρης πάτημα με απόλυση), onLongPress (μακρό πάτημα), onPressIn (έναρξη αφής) και onPressOut (τέλος αφής). Ο συνδυασμός onPressIn και onPressOut επιτρέπει τη δημιουργία προσαρμοσμένων κινήσεων.

Πρόσθετα props: delayLongPress (καθυστέρηση μακρού πατήματος, προκαθορισμένη 500 ms), pressRetentionOffset (περιοχή εκτός της οποίας ακυρώνεται το πάτημα), android_ripple (εφέ ripple σε Android). Σημαντικό: Το Ripple λειτουργεί μόνο σε Android 5+.

<Pressable
  onPress={() => console.log('Πατήθηκε')}
  onLongPress={() => console.log('Μακρό πάτημα')}
  onPressIn={() => console.log('Δάχτυλο κάτω')}
  onPressOut={() => console.log('Δάχτυλο πάνω')}
  delayLongPress={300}
  android_ripple={{ color: 'rgba(0,0,0,0.1)', borderless: false }}
  style={styles.button}>
  <Text>Press me</Text>
</Pressable>

onPress καλείται μόνο όταν το δάχτυλο σηκωθεί εντός της περιοχής του στοιχείου (λαμβάνοντας υπόψη το pressRetentionOffset). Εάν ο χρήστης μετακινήσει το δάχτυλο εκτός των ορίων, το onPress δεν ενεργοποιείται, αποτρέποντας τα ψευδή πατήματα. Το onPressOut καλείται σε κάθε περίπτωση κατά την απόλυση.

hitSlop: επέκταση περιοχής αφής

hitSlop — ένα prop του Pressable που επεκτείνει την περιοχή αφής πέρα από τα ορατά όρια του στοιχείου. Είναι κρίσιμο για μικρά στοιχεία: εικονίδια, πλαισία επιλογής, κουμπιά radio. Το Apple HIG συνιστά ελάχιστο μέγεθος στόχου αφής 44x44 σημείων. Το hitSlop επιτρέπει την τήρηση αυτής της απαίτησης χωρίς αλλαγή του οπτικού μεγέθους.

Το hitSlop δέχεται ένα αντικείμενο { top, bottom, left, right } ή έναν αριθμό για όλες τις πλευρές. Οι τιμές καθορίζονται σε λογικά pixel (dp/pt). Για εικονίδια 24x24, συνιστάται hitSlop τουλάχιστον 10-12 σε κάθε πλευρά για την επίτευξη στόχου αφής 44x44.

<Pressable
  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
  onPress={handleIconPress}
  style={styles.iconButton}>
  <Icon name="star" size={24} />
</Pressable>

pressRetentionOffset — το αντίστροφο του hitSlop: καθορίζει την περιοχή όπου ο χρήστης μπορεί να βγεί εκτός των ορίων του στοιχείου χωρίς ακύρωση του πατήματος. Προκαθορισμένα ίσο με το hitSlop. Εάν θέλετε το πάτημα να διατηρείται κατά την έξοδο από τα όρια, αυξήστε το pressRetentionOffset.

Pressable vs Touchable: πότε να μεταβείτε

Pressable vs Touchable — το βασικό ερώτημα κατά την επιλογή στοιχείου για χειρισμό αφής. Τα TouchableOpacity, TouchableHighlight και TouchableWithoutFeedback είναι απαρχαιωμένα στοιχεία που δεν θα αφαιρεθούν, αλλά δεν λαμβάνουν νέες δυνατότητες. Η Meta συνιστά το Pressable για νέα έργα.

Βασικά πλεονεκτήματα του Pressable: ενιαίο API για όλα τα είδη εφέ, πρόσβαση στην κατάσταση pressed για προσαρμοσμένο στυλισμό, υποστήριξη καταστάσεων hovered/focused, hitSlop και pressRetentionOffset, κλήση onLongPress χωρίς πρόσθετη ρύθμιση. Το TouchableOpacity είναι κατάλληλο μόνο για απλή αλλαγή διαφάνειας.

Παραδείγματα χρήσης Pressable

Pressable επιτρέπει τη δημιουργία σύνθετων διαδραστικών στοιχείων με ελάχιστο κώδικα. Παρακάτω — ένα παράδειγμα κουμπιού με ανίμεσωση με αλλαγή κλίμακας κατά το πάτημα και εφέ ripple σε Android. Ένα τέτοιο κουμπί αντικαθιστά τον συνδυασμό TouchableOpacity + Animated.

const AnimatedButton = ({ title, onPress }) => {
  const scale = React.useRef(new Animated.Value(1)).current;

  const handlePressIn = () => {
    Animated.spring(scale, {
      toValue: 0.96,
      useNativeDriver: true,
    }).start();
  };

  const handlePressOut = () => {
    Animated.spring(scale, {
      toValue: 1,
      friction: 3,
      useNativeDriver: true,
    }).start();
  };

  return (
    <Pressable
      onPress={onPress}
      onPressIn={handlePressIn}
      onPressOut={handlePressOut}
      android_ripple={{ color: 'rgba(255,255,255,0.3)' }}
      style={styles.button}>
      <AnimatedView style={[styles.inner, { transform: [{ scale }] }]}>
        <Text style={styles.text}>{title}</Text>
      </AnimatedView>
    </Pressable>
  );
};

Σημαντικό: χρησιμοποιείτε useNativeDriver: true για κινήσεις στο Pressable. Αυτό μεταφέρει την κίνηση στο εγγενες νήμα, αποτρέποντας την απώλεια καδρού σε γρήγορα πατήματα. Για transform και διαφάνεια, ο εγγενής οδηγός υποστηρίζεται σε όλες τις πλατφόρμες.