Pressable — bu nədir, React Native-də toxunmaların işlənməsi

Pressable nədir?

Pressable — bütün toxunma növlərini idarə etmək üçün vahid interfeys təmin edən React Native komponentidir. Üç fərqli Touchable komponentindən (TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback) fərqli olaraq, Pressable onları çevik vəziyyət və stilizasiya sistemi ilə bir komponentdə əvəz edir.

Komponent React Native 0.63-də (sentyabr 2020) təqdim edilmişdir. Meta-nın məlumatlarına görə (2026), React Native-də yeni layihələrin 70%-i Touchable komponentləri əvəzinə Pressable-dən istifadə edir. Pressable Touchable-ın əsas problemini — dağınıq API və müxtəlif effektlər üçün komponentlər arasında keçid ehtiyacını həll edir.

Pressable fəlsəfəsi

TouchableOpacity-dən fərqli olaraq, burada toxunma effekti sərt şəkildə müəyyən edilmişdir (şeffaflığın dəyişməsi), Pressable cari vəziyyəti qəbul edən funksiya təqdim edir. Tərtibatçı toxunmaya vizual reaksiyanı özü müəyyənləşdirir: rəngi, miqyası, kölgəni və ya effektlərin kombinasiyasını dəyişmək. Bu, UX üzərində tam nəzarət verir.

Pressable vəziyyətləri: pressed, hovered, focused

Pressable üç qarşılıqlı təsir vəziyyəti müəyyənləşdirir: pressed (barmaq ekranda), hovered (kursor element üzərində Web/TV-də), focused (element klaviatura fokusunda). Hər vəziyyət müvafiq geri çağırışı aktivləşdirir və stil funksiyasına və uşaq render funksiyasına ötürülür.

Vacib: hovered və focused yalnız göstərici dəstəyi olan platformalarda işləyir (Web, Android TV, Apple TV). Mobil cihazlarda yalnız pressed mövcuddur. Platformalararası tətbiqlər üçün vizual reaksiyaları bu məhdudiyyəti nəzərə alaraq dizayn edin.

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

Pressable API və geri çağırışları

Pressable API dörd əsas geri çağırış daxildir: onPress (buraxma ilə tam basma), onLongPress (uzun basma), onPressIn (toxunmanın başlanğıcı) və onPressOut (toxunmanın sonu). onPressIn və onPressOut kombinasiyası fərdi animasiyalar yaratmağa imkan verir.

Əlavə propslar: delayLongPress (uzun basma gecikməsi, standart 500 ms), pressRetentionOffset (basmanın ləğv edildiyi sahə), android_ripple (Android-də ripple effekti). Vacib: Ripple yalnız Android 5+-də işləyir.

<Pressable
  onPress={() => console.log('Basılıb')}
  onLongPress={() => console.log('Uzun basma')}
  onPressIn={() => console.log('Barmaq aşağı')}
  onPressOut={() => console.log('Barmaq yuxarı')}
  delayLongPress={300}
  android_ripple={{ color: 'rgba(0,0,0,0.1)', borderless: false }}
  style={styles.button}>
  <Text>Press me</Text>
</Pressable>

onPress yalnız barmaq komponentin daxilində (pressRetentionOffset nəzərə alınmaqla) qaldırıldıqda çağrılır. İstifadəçi barmağını hüduddan kənara çəkərsə, onPress işləmir ki, bu da yanlış basmaların qarşısını alır. onPressOut istənilən halda barmaq qaldırıldıqda çağrılır.

hitSlop: toxunma sahəsinin genişləndirilməsi

hitSlop — toxunma sahəsini komponentin görünən hüdudlarından kənara genişləndirən Pressable propsudur. Bu kiçik elementlər üçün çox vacibdir: ikonalar, çekbokslar, radio düymələr. Apple HIG minimum toxunma hədəfi ölçüsü kimi 44x44 nöqtə tövsiyə edir. hitSlop vizual ölçünü dəyişmədən bu tələbi yerinə yetirməyə imkan verir.

hitSlop { top, bottom, left, right } obyektini və ya bütün tərəflər üçün vahid rəqəmi qəbul edir. Dəyərlər məntiqi piksellərlə (dp/pt) verilir. 24x24 ölçülü ikonalar üçün 44x44 toxunma hədəfinə çatmaq üçün hər tərəfdən minimum 10-12 hitSlop tövsiyə olunur.

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

pressRetentionOffset — hitSlop-un əksi: istifadəçinin basmanı ləğv etmədən komponentin hüdudlarından kənara çıxa biləcəyi sahəni müəyyənləşdirir. Standart olaraq hitSlop-a bərabərdir. Basmanın hüduddan kənarda saxlanmasını istəyirsinizsə, pressRetentionOffset-i artırın.

Pressable vs Touchable: nə vaxt keçməli

Pressable vs Touchable — toxunmaları idarə etmək üçün komponent seçərkən əsas sual. TouchableOpacity, TouchableHighlight və TouchableWithoutFeedback köhnəlmiş komponentlərdir, silinməyəcəklər, lakin yeni xüsusiyyətlər almırlar. Meta yeni layihələr üçün Pressable-i tövsiyə edir.

Pressable-in əsas üstünlükləri: bütün effekt növləri üçün vahid API, fərdi stilizasiya üçün pressed vəziyyətinə giriş, hovered/focused vəziyyətlərinin dəstəyi, hitSlop və pressRetentionOffset, əlavə konfiqurasiya olmadan onLongPress geri çağırışı. TouchableOpacity yalnız sadə şeffaflıq dəyişikliyi üçün uyğundur.

Pressable istifadə nümunələri

Pressable minimal kodla mürəkkəb interaktiv elementlər yaratmağa imkan verir. Aşağıda — basarken miqyas dəyişikliyi və Android-də ripple effekti olan animasiyalı düymə nümunəsi. Belə bir düymə TouchableOpacity + Animated kombinasiyasını əvəz edir.

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>
  );
};

Vacib: Pressable-də animasiyalar üçün useNativeDriver: true istifadə edin. Bu, animasiyanı yerli axına köçürür və sürətli basmalarda kadr itkilərinin qarşısını alır. Transform və şeffaflıq üçün yerli sürücü bütün platformalarda dəstəklənir.