跳到主要内容

处理触摸事件

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

显示基本按钮

Button 提供了一个在所有平台上都能很好渲染的基本按钮组件。显示按钮的最小示例是这样的:

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

这将在 iOS 上渲染一个蓝色标签,在 Android 上渲染一个带有浅色文本的蓝色圆角矩形。按下按钮将调用“onPress”函数,本例中会显示一个警告弹出窗口。如果你喜欢,可以指定“color”属性来改变按钮的颜色。

继续使用下面的示例来试用 Button 组件。你可以通过点击右下角的切换按钮,然后点击“Tap to Play”来预览你的应用,选择你的应用将在哪个平台预览。

可触摸组件

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

你使用哪种“Touchable”组件取决于你想要提供哪种反馈

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

  • 在 Android 上,你可能会考虑使用TouchableNativeFeedback来显示响应用户触摸的水波纹效果。

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

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

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

让我们看看所有这些实际应用

滚动和滑动

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

已知问题

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