跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽,抢先掌握 React Native 新架构精髓 立即查看 >Version: 0.73

处理触摸事件

移动应用上的用户交互基本靠“摸”。当然,“摸”也是有各种姿势的:在一个按钮上点击,在一个列表上滑动,或是在一个地图上缩放。React Native 提供了可以处理常见触摸手势(例如点击或滑动)的组件, 以及可用于识别更复杂的手势的完整的手势响应系统

显示一个简单的按钮

Button是一个简单的跨平台的按钮组件。下面是一个最简示例:

<Button
onPress={() => {
Alert.alert('你点击了按钮!');
}}
title="点我!"
/>

上面这段代码会在 iOS 上渲染一个蓝色的标签状按钮,在 Android 上则会渲染一个蓝色圆角矩形带白字的按钮。点击这个按钮会调用"onPress"函数,具体作用就是显示一个 alert 弹出框。你还可以指定"color"属性来修改按钮的颜色。

再试试下面这个使用Button的例子吧。你可以点击"Tap to Play"来预览真实效果。

Touchable 系列组件

这个组件的样式是固定的。所以如果它的外观并不怎么搭配你的设计,那就需要使用TouchableOpacity或是TouchableNativeFeedback组件来定制自己所需要的按钮,视频教程如何制作一个按钮讲述了完整的过程。或者你也可以在 github.com 网站上搜索 'react native button' 来看看社区其他人的作品。

具体使用哪种组件,取决于你希望给用户什么样的视觉反馈:

  • 一般来说,你可以使用TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。

  • 在 Android 上还可以使用TouchableNativeFeedback,它会在用户手指按下时形成类似墨水涟漪的视觉效果。

  • TouchableOpacity会在用户手指按下时降低按钮的透明度,而不会改变背景的颜色。

  • 如果你想在处理点击事件的同时不显示任何视觉反馈,则需要使用TouchableWithoutFeedback

某些场景中你可能需要检测用户是否进行了长按操作。可以在上面列出的任意组件中使用onLongPress属性来实现。

我们来看一下示例:

在列表中上下滑动、在视图上左右滑动以及双指缩放

另一个在移动应用中常见的手势就是滑动。用户会在列表中上下滑动,或是在视图上左右滑动。要处理这样的手势,你可以看一下如何使用滚动视图这篇文档。

Known issues

  • react-native#29308: The touch area never extends past the parent view bounds and on Android negative margin is not supported.