跳至主要内容

处理触摸

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

显示基本按钮​

Button 提供了一个基本按钮组件，可在所有平台上很好地呈现。显示按钮的最小示例如下所示

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

这将在 iOS 上呈现一个蓝色标签，在 Android 上呈现一个带浅色文本的蓝色圆角矩形。按下按钮将调用“onPress”函数，在本例中，它会显示一个警报弹出窗口。如果需要，可以指定“color”属性来更改按钮的颜色。

使用下面的示例尝试一下 Button 组件。您可以通过点击右下角的切换按钮来选择应用的预览平台，然后点击“点击播放”来预览应用。

可触摸组件​

如果基本按钮不适合您的应用，您可以使用 React Native 提供的任何“Touchable”组件构建自己的按钮。“Touchable”组件提供了捕获点击手势的功能，并且可以在识别手势时显示反馈。但是，这些组件不提供任何默认样式，因此您需要做一些工作才能使它们在您的应用中看起来不错。

您使用哪个“Touchable”组件将取决于您想要提供的反馈类型

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

  • 您可能需要在 Android 上使用TouchableNativeFeedback来显示响应用户触摸的墨水表面反应涟漪。

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

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

在某些情况下，您可能希望检测用户何时按住某个视图一段时间。这些长按可以通过将函数传递到任何“Touchable”组件的 onLongPress 属性来处理。

让我们看看所有这些的实际效果

滚动和滑动​

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

已知问题​

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