跳到主要内容

处理触摸事件

用户主要通过触摸与移动应用互动。他们可以使用手势组合,例如点击按钮、滚动列表或缩放地图。React Native 提供了组件来处理各种常见的手势,以及全面的手势响应系统,以实现更高级的手势识别,但您最可能感兴趣的组件是基本的 Button。

显示基本按钮

Button 提供了一个基本的按钮组件,可以在所有平台上良好地渲染。显示按钮的最小示例如下

tsx
<Button
onPress={() => {
console.log('You tapped the button!');
}}
title="Press Me"
/>

这将在 iOS 上渲染一个蓝色标签,在 Android 上渲染一个带有浅色文本的蓝色圆角矩形。按下按钮将调用 "onPress" 函数,在本例中该函数会显示一个警告弹窗。如果您愿意,可以指定 "color" 属性来更改按钮的颜色。

继续尝试使用下面的 Button 组件。您可以通过单击右下角的切换按钮,然后单击 "Tap to Play" 来预览应用,从而选择您的应用在哪个平台上预览。

Touchable 组件

如果基本按钮的外观不适合您的应用,您可以使用 React Native 提供的任何 "Touchable" 组件构建自己的按钮。这些组件提供了捕获点击手势的功能,并且可以在识别手势时显示反馈。但是,这些组件不提供任何默认样式,因此您需要做一些工作才能使它们在您的应用中看起来不错。

您使用的 "Touchable" 组件将取决于您想要提供的反馈类型

  • 通常,您可以在任何您在 Web 上使用按钮或链接的地方使用 TouchableHighlight。当用户按下按钮时,视图的背景将变暗。

  • 您可以考虑在 Android 上使用 TouchableNativeFeedback 来显示墨水表面反应波纹,以响应用户的触摸。

  • TouchableOpacity 可以通过降低按钮的不透明度来提供反馈,允许在用户按下时看到背景。

  • 如果您需要处理点击手势,但不希望显示任何反馈,请使用 TouchableWithoutFeedback

在某些情况下,您可能希望检测用户何时按住视图一段时间。这些长按可以通过将函数传递给任何 "Touchable" 组件的 onLongPress 属性来处理。

让我们看看所有这些组件的实际效果

滚动和滑动

在具有触摸屏的设备上常用的手势包括滑动和拖动。这些手势允许用户滚动浏览项目列表或滑动浏览内容页面。对于这些手势,请查看 ScrollView 核心组件。

已知问题

  • react-native#29308: 触摸区域永远不会超出父视图边界,并且 Android 不支持负边距。