处理触摸事件

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

显示基础按钮

Button 提供了一个基础按钮组件，能够在所有平台上都很好地渲染。显示一个按钮的最简示例如下：

tsx

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

这将在 iOS 上渲染蓝色标签，在 Android 上渲染蓝色圆角矩形且文字较浅。点击按钮时将调用 "onPress" 函数，这里是显示一个警告弹窗。如果你愿意，可以指定 "color" 属性来改变按钮的颜色。

你可以使用下面的示例尽情玩转 Button 组件。通过点击右下角的切换按钮选择预览的运行平台，然后点击“Tap to Play”预览应用。

可触摸组件（Touchables）

如果基础按钮不适合你的应用，你可以使用 React Native 提供的任意“Touchable”组件自己构建按钮。这些组件能捕获点击手势，并在识别手势时显示反馈。然而，它们没有默认样式，因此你需要对样式进行一些调整才能让它们在你的应用中看起来美观。

你使用哪个“Touchable”组件取决于你想提供什么样的反馈：

• 通常，你可以在任何用作按钮或链接的位置使用 TouchableHighlight。当用户按下按钮时，该视图的背景将变暗。

• 在 Android 上，你可以考虑使用 TouchableNativeFeedback 来显示响应用户触摸的墨水涟漪效果。

• TouchableOpacity 可以通过降低按钮的不透明度来提供反馈，让用户按下时能看见背景透出。

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

有时，你可能想检测用户按住视图一定时间的操作。这些长按事件可通过给任一“Touchable”组件的 onLongPress 属性传入函数来处理。

下面让我们来看这些组件的实际演示：

滚动和滑动

设备上常用的手势包括滑动和拖动。这些手势允许用户滚动浏览列表项，或滑动切换内容页。有关这些功能，请查看 ScrollView 核心组件。

已知问题

• react-native#29308：触摸区域不会超出父视图边界，且 Android 不支持负边距。