Pressable — ano ito, paghawak ng mga pagpindot sa React Native

Ano ang Pressable?

Pressable — isang React Native component na nagbibigay ng nagkakaisang interface para sa paghawak ng lahat ng uri ng pagpindot. Hindi tulad ng tatlong magkakaibang Touchable component (TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback), pinapalitan silang lahat ng Pressable ng isa na may flexible na sistema ng mga estado at styling.

Mga Estado ng Pressable: pressed, hovered, focused

Pressable ay tumutukoy sa tatlong estado ng interaksyon: pressed (daliri sa screen), hovered (cursor sa ibabaw ng elemento sa Web/TV), focused (elemento sa focus ng keyboard). Ang bawat estado ay nag-a-activate ng kaukulang callback at ipinapasa sa function ng mga style at sa render function ng mga anak.

Mahalaga: ang hovered at focused ay gumagana lamang sa mga platform na may suporta sa pointer (Web, Android TV, Apple TV). Sa mga mobile device, pressed lamang ang available. Para sa mga cross-platform na application, idisenyo ang mga visual na reaksyon na isinasaalang-alang ang limitasyong ito.

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

API at mga callback ng Pressable

API ng Pressable ay may kasamang apat na pangunahing callback: onPress (buong pagpindot na may pagbitaw), onLongPress (mahabang pagpindot), onPressIn (simula ng pagpindot) at onPressOut (pagtatapos ng pagpindot). Ang kombinasyon ng onPressIn at onPressOut ay nagbibigay-daan sa paglikha ng mga custom na animation.

Mga karagdagang props: delayLongPress (pagkaantala ng mahabang pagpindot, default na 500 ms), pressRetentionOffset (lugar kung saan kinansela ang pagpindot), android_ripple (ripple effect sa Android). Mahalaga: Ang Ripple ay gumagana lamang sa Android 5+.

<Pressable
  onPress={() => console.log('Pinindot')}
  onLongPress={() => console.log('Mahabang pagpindot')}
  onPressIn={() => console.log('Daliri pababa')}
  onPressOut={() => console.log('Daliri pataas')}
  delayLongPress={300}
  android_ripple={{ color: 'rgba(0,0,0,0.1)', borderless: false }}
  style={styles.button}>
  <Text>Press me</Text>
</Pressable>

onPress ay tinatawag lamang kapag ang daliri ay itinaas sa loob ng lugar ng component (isinasaalang-alang ang pressRetentionOffset). Kung ililipat ng user ang daliri sa labas ng mga hangganan, hindi magti-trigger ang onPress, na pumipigil sa mga maling pagpindot. Ang onPressOut ay tinatawag sa anumang kaso kapag binitawan.

hitSlop: pagpapalawak ng lugar ng pagpindot

hitSlop — isang prop ng Pressable na nagpapalawak ng lugar ng pagpindot lampas sa nakikitang hangganan ng component. Ito ay kritikal para sa maliliit na elemento: mga icon, checkbox, radio button. Inirerekomenda ng Apple HIG ang minimum na laki ng touch target na 44x44 puntos. Pinapayagan ng hitSlop na matugunan ang kinakailangang ito nang hindi binabago ang visual na laki.

Tumatanggap ang hitSlop ng object na { top, bottom, left, right } o isang numero para sa lahat ng panig. Ang mga halaga ay tinutukoy sa logical pixels (dp/pt). Para sa mga icon na 24x24, inirerekomenda ang hitSlop na hindi bababa sa 10-12 sa bawat panig upang maabot ang touch target na 44x44.

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

pressRetentionOffset — kabaligtaran ng hitSlop: tumutukoy sa lugar kung saan ang user ay maaaring lumampas sa mga hangganan ng component nang hindi kinakansela ang pagpindot. Default ay katumbas ng hitSlop. Kung gusto mong manatili ang pagpindot kapag lumampas sa mga hangganan, dagdagan ang pressRetentionOffset.

Pressable vs Touchable: kailan lilipat

Pressable vs Touchable — ang pangunahing tanong sa pagpili ng component para sa paghawak ng pagpindot. Ang TouchableOpacity, TouchableHighlight at TouchableWithoutFeedback ay mga lumang component na hindi tatanggalin, ngunit hindi nakakatanggap ng mga bagong feature. Inirerekomenda ng Meta ang Pressable para sa mga bagong proyekto.

Mga pangunahing bentahe ng Pressable: nagkakaisang API para sa lahat ng uri ng epekto, access sa pressed status para sa custom na styling, suporta sa hovered/focused status, hitSlop at pressRetentionOffset, callback onLongPress nang walang karagdagang configuration. Ang TouchableOpacity ay angkop lamang para sa simpleng pagbabago ng opacity.

Mga halimbawa ng paggamit ng Pressable

Pressable ay nagbibigay-daan sa paglikha ng mga kumplikadong interactive na elemento na may kaunting code. Sa ibaba — halimbawa ng isang animated na button na may pagbabago ng scale kapag pinindot at ripple effect sa Android. Ang ganitong button ay pumapalit sa kombinasyon ng 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>
  );
};

Mahalaga: gamitin ang useNativeDriver: true para sa mga animation sa Pressable. Inililipat nito ang animation sa native thread, na pumipigil sa pagbaba ng frame sa mabilis na pagpindot. Para sa transform at opacity, ang native driver ay sinusuportahan sa lahat ng platform.