React Native — Pressable props

葉明哲 (Brian Yeh)

5 min readDec 5, 2020

Pressable 特性示意圖 ref: https://reactnative.dev/docs/assets/d_pressable_anatomy.svg

幫 Pressable 的所有 Props 實作一個範例程式

React Native 0.63 出了一個新元件 — Pressable，這篇文章將會實測每個 props 的用法，另外會分享一些實作中的感想。

範例程式在這: https://snack.expo.io/@tp26610/pressableprops

就讓我們開始吧！

children

跟 View 一樣，children 可以有多個 Component。而 Touchable 系列 Component 只能有一個 children component，如果想有多個 children component 就必須包一層 View。

delayLongPress

在 onPressIn 延遲的幾毫秒後，觸發 onLongPress，預設是 500 毫秒。

disabled

disabled 如果為 true，此按鈕就無法被點選，onPressIn、onPress 及 onPressOut 也不會被呼叫。外觀不會有任何改變，如果希望外觀能改變的話就必須自己多實作一個 disabled 狀態的 style。

hitSlop

向外延伸的有效點擊範圍，可以是 number 或是 Rect 物件。

PS: 要用實體機測試才會有效果，用 snack 的 web 跑無效。

onLongPress

預設是長案 500 ms 時，callback function 會被呼叫

onPress、onPressIn、onPressOut

輸入參數要是一個 function，function 會有一個 pressEvent 的參數，實測之後發現跟官網說的 PressEvent 不一樣。

在 Snack 的 Web 環境測試結果如下：

因為 JSON.stringify(pressEvent) 會出現 cyclic 錯誤，所以只取 pressEvent物件的第一層純值的參數

在 Snack 的 Web 環境測試結果如下：

{   
  "bubbles": false,   
  "cancelable": false,
  "defaultPrevented": false,
  "eventPhase": 3,
  "isTrusted": true,
  "timeStamp": 2393361.9949999847
}

發現 timestamp 的 S 是大寫啊，不是官方文件說的 timestamp。

在 iPhone 8 實體機測試結果是如下:

onPressIn >> pressEvent={
  "timeStamp": 1607102475094
}
onPress >> pressEvent={}
onPressOut >> pressEvent={}

只有 onPressIn 會有 timeStamp 。

另外在 iPhone 實體機有實測到以下現象：

當使用者點擊按鈕時，依序被呼叫的 props 是 onPressIn、onPress、onPressOut 。
當使用者按著不放，然後在按鈕元件內放開，依序被呼叫的 props 是 onPressIn 、 onPressOut 、 onPress 。
當使用者按著不放，手指保持壓著螢幕移出按鈕元件範圍，移出按鈕範圍時，就會觸發 onPressOut ，onPress 則不會被呼叫。

單純看 props 的名字還以為一定會是 onPress、onPressIn、onPressOut 的順序呢！

pressRetentionOffset

向外延伸的有效 onPressOut 範圍，輸入參數和 hitSlop prop 一樣，沒設定 pressRetentionOffset時，手指壓著 Pressable 元件不放，當手指移出 Pressable 元件時就會觸發 onPressOut。加上此 prop 就會讓 onPressOut 觸發的範圍向外延伸。

PS: 要用實體機測試的效果才會準，用 snack 的 web 跑 onPressOut 的有效範圍會變很大。

android_disableSound

Android 開啟觸控音效後，點擊按鈕都會有觸控音效，當此 prop 為 true 時，即使手機有開啟觸控音效，點擊後也不會有聲音。

PS: 此 prop 只有在 Android 的裝置上才會有效果

android_ripple

Android 的按鈕預設點擊會有漣漪動畫，至少需設定 RippleConfig 中的 color 和實作 onPress props ，點擊後才會有漣漪動畫。設定 borderless 會讓漣漪動畫效果超出元件，動畫圓的半徑會是元件中心點到對角的長度。