跳到主内容

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 属性

继承 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

便于快照测试。

类型
布尔值