处理触摸事件
用户主要通过触摸与移动应用交互。他们可以使用手势组合,例如点击按钮、滚动列表或放大地图。React Native 提供了处理各种常见手势的组件,以及一个全面的手势响应系统,以实现更高级的手势识别,但你最可能感兴趣的组件是基本的 Button。
显示一个基本按钮
Button 提供了一个基本的按钮组件,它在所有平台上都能很好地渲染。显示按钮的最简单示例如下:
<Button
onPress={() => {
console.log('You tapped the button!');
}}
title="Press Me"
/>
这将在 iOS 上渲染一个蓝色标签,在 Android 上渲染一个带有浅色文本的蓝色圆角矩形。按下按钮将调用 "onPress" 函数,本例中它会显示一个警告弹窗。如果你喜欢,可以指定一个 "color" prop 来改变按钮的颜色。
继续使用下面的示例来试玩 Button
组件。你可以通过点击右下角的切换按钮,然后点击“Tap to Play”来预览你的应用在哪种平台下显示。
可触摸组件 (Touchables)
如果基本的按钮样式不适合你的应用,你可以使用 React Native 提供的任何“可触摸”组件来构建你自己的按钮。这些组件能够捕获点击手势,并在识别手势时显示反馈。但是,这些组件不提供任何默认样式,因此你需要做一些工作才能让它们在你的应用中看起来漂亮。
你使用哪个“可触摸”组件将取决于你希望提供哪种类型的反馈:
-
通常,你可以在任何网页上使用按钮或链接的地方使用 TouchableHighlight。当用户按下按钮时,视图的背景会变暗。
-
你可以在 Android 上考虑使用 TouchableNativeFeedback 来显示响应用户触摸的水波纹效果。
-
TouchableOpacity 可以通过降低按钮的不透明度来提供反馈,在用户按下时允许背景透过显示。
-
如果你需要处理点击手势但不想显示任何反馈,请使用 TouchableWithoutFeedback。
在某些情况下,你可能希望检测用户按住视图一定时间的情况。这些长按事件可以通过将函数传递给任何“可触摸”组件的 onLongPress
属性来处理。
让我们看看这些的实际应用:
滚动和滑动
在触摸屏设备上常用的手势包括滑动和平移。这些手势允许用户滚动项目列表或滑动浏览内容页面。对于这些,请查看 ScrollView 核心组件。
已知问题
- react-native#29308:触摸区域从不超出父视图边界,并且在 Android 上不支持负外边距。