React Native – Pressable 的 onPress、onPressIn、onPressOut、onLongPress 時機

最後更新於 2021 年 10 月 11 日

Pressable 是 React Native 在 0.63 版本所新增的 component,在以往,當我們希望達到 “觸摸” 效果時通常會使用 Touchable**** 系列的 components,現如今我們可以改用 Pressable 來代替,官方稱之更廣泛且面向未來的方法來處理基於觸摸的輸入。

Pressable 有提供 onPressonPressInonPressOutonLongPress 四個 prop 來達成觸發效果,官方有圖片說明觸發的時間順序:

asn52 aqkpj React Native - Pressable 的 onPress、onPressIn、onPressOut、onLongPress 時機

若只有這張照片還是不明白,我們可以簡單的看一個例子。

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

function App() {

  return (
    <View style={styles.container}>
      <Pressable
        style={({ pressed }) => [{ opacity: pressed ? 0.5 : 1.0 }]}
        onPress={() => console.log("Pressed")}
        onPressIn={() => console.log("onPressIn")}
        onPressOut={() => console.log("onPressOut")}
      >
        <View>
          <Text style={{ fontSize: 32 }}>Press Me</Text>
        </View>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

export default App;

假設你單擊 “Press Me”,控制台輸出的順序為:onPressIn , onPressOut, Pressed

onPress React Native - Pressable 的 onPress、onPressIn、onPressOut、onLongPress 時機

若你點擊 “Press Me” 不放,則會先輸出 onPressIn,但不會輸出 onPressOut 和 Pressed

EBRGyWV React Native - Pressable 的 onPress、onPressIn、onPressOut、onLongPress 時機
https://i.imgur.com/EBRGyWV.gif

所以我們能夠得知,當你點擊 pressable 包裹的內容,首先會觸發 onPressIn,直到你放開,就會依序觸發 onPressOutonPress

若是再加上 onLongPress={() => console.log("onLongPress")} ,再來嘗試長按 “Pree Me”,觸發的順序為:onPressInonLongPress,放開後再觸發 onPressOut。預設長按觸發時間為 500 毫秒。

LTWPhN7 React Native - Pressable 的 onPress、onPressIn、onPressOut、onLongPress 時機
https://i.imgur.com/LTWPhN7.gif

如果需要修改長按觸發時間可以使用 delayLongPress,型別為 number,例如 delayLongPress={2000} 則需長按兩秒才會觸發長按效果。

如果你也想測試 Pressable,我有建了一個 sandbox:https://codesandbox.io/s/react-native-pressable-component-test-45pvj?file=/src/App.js

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論