跳到主要内容

TouchableHighlight

提示

如果您正在寻找一种更广泛、更具前瞻性的触摸输入处理方式,请查看Pressable API。

一个用于使视图对触摸做出适当响应的包装器。按下时,被包装视图的不透明度会降低,从而允许底层颜色透出,使视图变暗或着色。

底层是通过将子组件包装在一个新的 View 中来实现的,这可能会影响布局,并且如果使用不当,有时会导致不必要的视觉假象,例如,如果被包装视图的 backgroundColor 没有明确设置为不透明颜色。

TouchableHighlight 必须有一个子组件(不能是零个或多于一个)。如果你希望有多个子组件,请将它们包装在一个 View 中。

tsx
function MyComponent(props: MyComponentProps) {
return (
<View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
<Text>My Component</Text>
</View>
);
}

<TouchableHighlight
activeOpacity={0.6}
underlayColor="#DDDDDD"
onPress={() => alert('Pressed!')}>
<MyComponent />
</TouchableHighlight>;

示例


参考

属性

TouchableWithoutFeedback Props

继承TouchableWithoutFeedback 属性


activeOpacity

决定触摸处于活动状态时被包装视图的不透明度。值应介于 0 和 1 之间。默认为 0.85。需要设置 underlayColor

类型
数字

onHideUnderlay

底层隐藏后立即调用。

类型
函数

onShowUnderlay

底层显示后立即调用。

类型
函数

ref

一个 ref 设置器,在挂载时将被分配一个元素节点


style

类型
View.style

underlayColor

触摸处于活动状态时将透出的底层颜色。

类型
颜色

hasTVPreferredFocus
iOS

(仅限 Apple TV)电视首选焦点(请参阅 View 组件的文档)。

类型
布尔值

nextFocusDown
Android

电视向下下一个焦点(请参阅 View 组件的文档)。

类型
数字

nextFocusForward
Android

电视向前下一个焦点(请参阅 View 组件的文档)。

类型
数字

nextFocusLeft
Android

电视向左下一个焦点(请参阅 View 组件的文档)。

类型
数字

nextFocusRight
Android

电视向右下一个焦点(请参阅 View 组件的文档)。

类型
数字

nextFocusUp
Android

电视向上下一个焦点(请参阅 View 组件的文档)。

类型
数字

testOnly_pressed

方便用于快照测试。

类型
布尔值