版本：0.77

触摸事件处理

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。发现错误？报告问题 →

用户主要通过触摸与移动应用进行交互。他们可以组合使用多种手势，例如点击按钮、滚动列表或缩放地图。React Native 提供了处理各类常见手势的组件，以及一套全面的手势响应系统来实现更高级的手势识别功能。但您最可能需要的基础组件就是 Button（按钮）。

显示基础按钮

Button 组件提供了基础按钮功能，可在所有平台上正常渲染。显示按钮的最简示例如下：

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

在 iOS 上会渲染为蓝色标签，在 Android 上则显示为带浅色文字的蓝色圆角矩形。按下按钮将触发 "onPress" 函数，此示例中会显示警告弹窗。您可以通过 "color" prop 自定义按钮颜色。

您可以通过下方示例体验 Button 组件。点击右下角切换按钮选择预览平台，然后点击 "Tap to Play" 即可预览应用效果。

如果基础按钮样式不符合您的应用需求，可以使用 React Native 提供的各类 "Touchable" 组件构建自定义按钮。这些组件能捕获点击手势并在识别手势时提供视觉反馈。但请注意，它们不包含默认样式，需要您自行设计视觉效果。

选择哪种 "Touchable" 组件取决于您需要提供的反馈类型：

某些场景下，您可能需要检测用户长按视图的持续时间。通过向任意 "Touchable" 组件的 onLongPress props 传入函数即可处理长按事件。

以下示例展示了这些组件的实际效果：

触屏设备常用的手势包括滑动(swipe)和拖拽(pan)，用户可通过这些手势滚动列表或切换内容页面。相关功能请参阅核心组件 ScrollView。