React Native Touchables

2025年3月17日 | 阅读 3 分钟

Touchable 组件提供了捕获点击功能的能力。如果基本的 button 组件看起来不适合您的应用，则可以将 touchables 组件实现为基本 button 的替代方案。使用这些组件，您可以构建自己的按钮。点击这些组件，您可以显示反馈。

touchables 组件不提供任何默认样式，因此您需要进行样式设置，以便在应用中很好地显示。

Touchable 组件的类型

React Native 提供了四种 touchable 组件。该组件的选择取决于您想要提供的反馈类型

TouchableHighlight
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback。

React Native TouchableHighlight

TouchableHighlight 可用于您在 Web 上使用按钮或链接的地方。按下此组件时，该组件的背景会变暗。

Props

Props	类型	必需	平台	描述
activeOpacity	数字	否		确定触摸时包裹视图的不透明度。
onHideUnderlay	功能	否		在底图隐藏后立即调用。
onShowUnderlay	功能	否		在底图显示后立即调用。
style	View.style	否
underlayColor	color	否		当触摸处于活动状态时，显示底图颜色。
hasTVPreferredFocus	bool	否	iOS	它专注于电视首选，仅适用于 iOS。
tvParallaxProperties	object	否	iOS	它是一个具有控制 Apple TV 视差效果的属性的对象。

React Native TouchableNativeFeedback

TouchableNativeFeedback 使视图能够对触摸做出适当的响应。此组件仅适用于 Android 操作系统。它使用原生状态 drawable 来显示触摸反馈。

它仅支持单个 View 实例作为子节点。它通过用另一个 RCTView 节点的实例替换 View 来实现。

Props

Props	类型	必需	描述
背景	backgroundPropType	否	它确定将要显示为反馈的背景 drawable。
useForeground	bool	否	它将涟漪效果添加到视图的前景，而不是背景。

React Native TouchableOpacity

TouchableOpacity 包装器用于降低按钮的不透明度。它允许在用户按下时看到背景。按钮的不透明度将通过在动画中包装子元素来控制。

Props

Props	类型	必需	平台	描述
activeOpacity	数字	否		它确定触摸时包裹视图的不透明度。
tvParallaxProperties	object	否	iOS	它是一个具有用于控制 Apple TV 视差效果的属性的对象。
hasTVPreferredFocus	bool	否	iOS	它专注于电视首选，仅适用于 Apple TV。

方法

方法	描述
setOpacityTo()	它将 touchable 的动画设置为新的不透明度。

React Native TouchableWithoutFeedback

当用户想要处理点击功能但不希望显示任何反馈时，可以使用 TouchableWithoutFeedback。

Props

Props	类型	必需	描述
hitSlop	object	否	这定义了您的触摸可以从按钮开始多远。
onAccessibilityTap	功能	否	如果 accessible 设置为 true，则当用户执行辅助功能点击手势时，系统会调用此函数。
accessibilityHint	string	否	它帮助用户了解对辅助功能元素执行操作时会发生什么。
accessibilityLabel	node	否	它会覆盖屏幕阅读器在用户与元素交互时读取的文本。
delayLongPress	数字	否	它延迟了 onLongPress 在 milli-second 中调用 onPressIn。

有时用户按下视图并按住一段时间。此长按由使用任何上述“Touchable”组件的 onLongPress 属性的函数处理。