跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽,抢先掌握 React Native 新架构精髓 立即查看 >Version: Next

TouchableNativeFeedback

If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API.

本组件用于封装视图,使其可以正确响应触摸操作(仅限 Android 平台)。在 Android 设备上,这个组件利用原生状态来渲染触摸的反馈。

目前它只支持一个单独的 View 实例作为子节点。在底层实现上,实际会创建一个新的 RCTView 节点替换当前的子 View,并附带一些额外的属性。

原生触摸操作反馈的背景可以使用background属性来自定义。

示例


文档

Props

Inherits TouchableWithoutFeedback Props.

background

决定在触摸反馈的时候显示什么类型的背景。它接受一个有着type属性和一些基于type属性的额外数据的对象。我们推荐选用本组件的几个静态方法来创建这个对象。

类型必需
backgroundPropType

useForeground

Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them.

Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on Android 6.0 and above. If you try to use this on older versions you will get a warning and fallback to background.

类型必需
bool

方法

SelectableBackground()

static SelectableBackground(rippleRadius: ?number)

会创建一个对象,表示安卓主题默认的对于被选中对象的背景(?android:attr/selectableItemBackground)。rippleRadius 参数控制涟漪效果的半径。


SelectableBackgroundBorderless()

static SelectableBackgroundBorderless(rippleRadius: ?number)

会创建一个对象,表示安卓主题默认的对于被选中的无边框对象的背景(?android:attr/selectableItemBackgroundBorderless)。只适用于 Android API level 21+。rippleRadius 参数控制涟漪效果的半径。


Ripple()

static Ripple(color: string, borderless: boolean, rippleRadius: ?number)

会创建一个对象,当按钮被按下时产生一个涟漪状的背景,你可以通过 color 参数来指定颜色,如果参数borderless是 true,那么涟漪还会渲染到视图的范围之外(参见原生的 actionbar buttons 作为该效果的一个例子)。这个背景类型只在 Android API level 21+适用。

参数:

名称类型必需说明
colorstringThe ripple color
borderlessbooleanIf the ripple can render outside it's bounds
rippleRadius?numberNocontrols the radius of the ripple effect

canUseNativeForeground()

static canUseNativeForeground()