Difference between Pressable and TouchableOpacity

社会主义新天地 提交于 2021-02-20 06:22:10

问题


With the update react native to version 0.63, new components have appeared. Can someone more experienced explain how the Pressable differs from the TouchableOpacity and when it is better to use them.


回答1:


Pressable was a new introduction to RN 0.63, prior to that,Touchable Opacity was the most common used Component to wrap a component or simliar components.

Both their basic functionalities are same, to make a text/image clickable and user interactive.

But with Pressable you get to access a lot new props like :

HitRect, which is such a cool feature, acc to docs :

Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, Pressable has an optional HitRect you can use to define how far a touch can register away from the the wrapped element. Presses can start anywhere within a HitRect.

This is clearly a better alternative to what we used for hitslop , here its more precise and you define the area.And it doesnt interfere with the child/other components Z-index too.

So basically you get all the feature of a button, touchableOpacity with cool new props. Do check out thier docs : rn-pressable

Hopeit helps.feel free for doubts




回答2:


Here is a picture to clear your doubt.

How it works On an element wrapped by

Pressable

:

onPressIn is called when a press is activated. onPressOut is called when the press gesture is deactivated.

After pressing onPressIn, one of two things will happen:

  1. The person will remove their finger, triggering onPressOut followed by onPress.
  2. If the person leaves their finger longer than 370 milliseconds before removing it, onLongPress is triggered. (onPressOut will still fire when they remove their finger.)

Please refer to documentation for more details.



来源:https://stackoverflow.com/questions/62810567/difference-between-pressable-and-touchableopacity

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!