Pressable 和 TouchableOpacity 之间的区别

Question

随着react native版本的更新0.63，出现了新的组件。有经验的人可以解释一下它们的Pressable不同之处TouchableOpacity以及何时使用它们更好。

Answer 1

只是想添加一个关于一个缺点Pressable和解决方法的注释。

缺点是Pressable没有像 TouchableOpacity 对应项那样的自动反馈。

但是，您可以使用 Pressable 的 prop 添加您自己的自定义反馈style，该属性带有按下状态标识符：

<Pressable
  style={({ pressed }) => [
    { opacity: pressed ? 0.5 : 1.0 }
  ]}
  onPress={() => console.log('Pressed')}
>
 <View><Text>Press Me</Text></View>
</Pressable>

Answer 2

Pressable 是 RN 0.63 的新介绍，在此之前，Touchable Opacity 是最常用的用于包裹组件或类似组件的组件。

它们的基本功能是相同的，使文本/图像可点击和用户交互。

但是随着Pressable您可以访问很多新道具，例如：

HitRect，这是一个很酷的功能，根据文档：

手指不是最精确的仪器，用户不小心激活错误的元件或错过激活区域是很常见的。为了提供帮助，Pressable有一个可选项，HitRect您可以使用它来定义触摸可以注册远离包裹元素的距离。压力机可以在HitRect.

这显然是我们所使用的更好的替代方案hitslop，这里它更精确，您可以定义区域。它也不会干扰子/其他组件 Z-index。

所以基本上你得到了一个按钮的所有功能，touchableOpacity 和很酷的新道具。请查看他们的文档：rn-pressable

希望对您有帮助。如有疑问，请放心

Answer 3

一张图解开你的疑惑。

它是如何工作的

可按压

：

当按下被激活时调用 onPressIn。当按下手势被停用时，onPressOut 被调用。

按下 onPressIn 后，将发生以下两种情况之一：

1. 该人将移开他们的手指，触发 onPressOut，然后触发 onPress。
2. 如果该人在移开手指之前离开手指的时间超过 370 毫秒，则会触发 onLongPress。（当他们移开手指时，onPressOut 仍会触发。）

有关更多详细信息，请参阅文档。