Skip to main content

处理触摸

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

¥Users interact with mobile apps mainly through touch. They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. React Native provides components to handle all sorts of common gestures, as well as a comprehensive gesture responder system to allow for more advanced gesture recognition, but the one component you will most likely be interested in is the basic Button.

显示基本按钮​

¥Displaying a basic button

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

¥Button provides a basic button component that is rendered nicely on all platforms. The minimal example to display a button looks like this:

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

这将在 iOS 上渲染蓝色标签，在 Android 上渲染带有浅色文本的蓝色圆角矩形。按下该按钮将调用 "onPress" 函数，在本例中会显示一个警报弹出窗口。如果你愿意，你可以指定 "color" 属性来更改按钮的颜色。

¥This will render a blue label on iOS, and a blue rounded rectangle with light text on Android. Pressing the button will call the "onPress" function, which in this case displays an alert popup. If you like, you can specify a "color" prop to change the color of your button.

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

¥Go ahead and play around with the Button component using the example below. You can select which platform your app is previewed in by clicking on the toggle in the bottom right and then clicking on "Tap to Play" to preview the app.

触手可及者​

¥Touchables

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

¥If the basic button doesn't look right for your app, you can build your own button using any of the "Touchable" components provided by React Native. The "Touchable" components provide the capability to capture tapping gestures, and can display feedback when a gesture is recognized. These components do not provide any default styling, however, so you will need to do a bit of work to get them looking nicely in your app.

你使用哪个 "可触摸" 组件取决于你想要提供什么样的反馈：

¥Which "Touchable" component you use will depend on what kind of feedback you want to provide:

  • 一般来说，你可以在网络上任何需要使用按钮或链接的地方使用 TouchableHighlight。当用户按下按钮时，视图的背景将变暗。

    ¥Generally, you can use TouchableHighlight anywhere you would use a button or link on web. The view's background will be darkened when the user presses down on the button.

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

    ¥You may consider using TouchableNativeFeedback on Android to display ink surface reaction ripples that respond to the user's touch.

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

    ¥TouchableOpacity can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down.

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

    ¥If you need to handle a tap gesture but you don't want any feedback to be displayed, use TouchableWithoutFeedback.

在某些情况下，你可能希望检测用户何时按下并按住视图一段时间。这些长按可以通过将函数传递给任何 "可触摸" 组件的 onLongPress 属性来处理。

¥In some cases, you may want to detect when a user presses and holds a view for a set amount of time. These long presses can be handled by passing a function to the onLongPress props of any of the "Touchable" components.

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

¥Let's see all of these in action:

滚动和滑动​

¥Scrolling and swiping

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

¥Gestures commonly used on devices with touchable screens include swipes and pans. These allow the user to scroll through a list of items, or swipe through pages of content. For these, check out the ScrollView Core Component.

已知的问题​

¥Known issues

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

    ¥react-native#29308: The touch area never extends past the parent view bounds and on Android negative margin is not supported.