跳到主要内容

处理触摸事件

用户主要通过触摸与移动应用进行交互。他们可以使用手势组合，例如轻触按钮、滚动列表或缩放地图。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 提供的任何“可触控”组件来构建自己的按钮。这些组件提供了捕获点击手势的功能，并在识别到手势时可以显示反馈。然而，这些组件不提供任何默认样式，因此你需要做一些工作才能让它们在你的应用程序中看起来美观。

你使用哪个“可触控”组件将取决于你想要提供哪种反馈

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

  • 你可能会考虑在 Android 上使用TouchableNativeFeedback来显示墨水表面反应波纹，以响应用户的触摸。

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

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

在某些情况下，你可能需要检测用户何时按住视图一定时间。可以通过将函数传递给任何“可触控”组件的onLongPress属性来处理这些长按操作。

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

滚动和滑动​

在触摸屏设备上常用的手势包括滑动和平移。这些手势允许用户滚动浏览项目列表或滑动浏览内容页面。对于这些功能，请查看ScrollView核心组件。

已知问题​

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