第47章 React Native 第47章：处理触摸交互

版本：0.77 处理触摸交互 用户主要通过触摸操作移动应用。他们可以使用组合手势，例如点击按钮、滚动列表或在地图上缩放。React Native 提供了多种组件来处理常见手势，并配备了一个全面的手势响应系统以支持更高级的手势识别，但用户最常关注的组件基本 Button（按钮）。

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

React TSX ```tsx { console.log('You tapped the button!'); }} title="Press Me" /> ```

在 iOS 平台上，该代码会渲染一个蓝色标签；在 Android 平台上，则会显示一个带有浅色文字的蓝色圆角矩形。点击按钮会触发 "onPress" 函数，此处用于弹出警报窗口。如果需要更改按钮颜色，可以指定 "color" 属性。

请尝试使用下方示例中的 Button 组件进行体验。你可以通过点击右下角的切换按钮选择应用预览平台，然后点击 "Tap to Play" 来预览应用。

可触摸组件 如果基础按钮不符合应用需求，可以使用 React Native 提供的 "Touchable" 组件自定义按钮。这些组件能够捕捉点击手势，并在识别到手势时提供反馈。由于它们不包含默认样式，你需要稍作调整以达到美观效果。 选择哪种 "Touchable" 组件取决于期望的反馈类型：

通常，网页上适合使用按钮或链接的地方都可以用 TouchableHighlight。用户按下时，视图背景会变暗。

在 Android 上，可以考虑使用 TouchableNativeFeedback，它能显示响应触摸的墨迹涟漪效果。

TouchableOpacity 通过降低按钮透明度来提供反馈，使得用户按下时背景若隐若现。

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

在某些场景下，可能需要检测用户长按视图的行为。任何 "Touchable" 组件的 onLongPress 属性接受一个函数，用于处理这种长按操作。

让我们通过实际案例来观察这些组件的效果：

滚动与滑动 触屏设备常见的操作包括滑动（swipe）和平移（pan）。用户可以用这些手势滚动列表或翻页。相关内容请参考 ScrollView 核心组件。

已知问题

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