跳到主要内容

高亮触摸

如果您正在寻找一种更广泛、更具前瞻性的触摸输入处理方式,请查看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 属性

继承TouchableWithoutFeedback 属性


activeOpacity

确定触摸活动时被包装视图的不透明度。值应在 0 到 1 之间。默认为 0.85。需要设置underlayColor

类型
数字

onHideUnderlay

在下层隐藏后立即调用。

类型
函数

onShowUnderlay

在下层显示后立即调用。

类型
函数

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

方便快照测试。

类型
布尔值