跳到主要内容
版本:0.81

TouchableHighlight

如果你在寻找一种更全面、面向未来的方式来处理基于触摸的输入,请查看 Pressable API。

用于使视图能够正确响应触摸的包装器。按下时,被包装视图的不透明度会降低,从而让底层颜色透出,使视图变暗或产生色调变化。

底层颜色来自于将子元素包装在一个新的 View 中,这可能会影响布局;如果使用不当,有时还会导致不希望出现的视觉瑕疵,例如被包装视图的 backgroundColor 没有显式设置为不透明颜色时。

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

React TSX
function MyComponent(props: MyComponentProps) {
return (
<View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
<Text>我的组件</Text>
</View>
);
}

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

示例


参考

属性

TouchableWithoutFeedback Props

继承自 TouchableWithoutFeedback Props


activeOpacity

决定在触摸激活时,被包装视图应具有的不透明度。该值应介于 0 和 1 之间。默认值为 0.85。需要设置 underlayColor

类型
number

onHideUnderlay

在底层颜色隐藏后立即调用。

类型
function

onShowUnderlay

在底层颜色显示后立即调用。

类型
function

style

类型
View.style

underlayColor

在触摸激活时会透出的底层颜色。

类型
color

hasTVPreferredFocus
iOS

(仅限 Apple TV) TV 首选焦点(参见 View 组件文档)。

类型
bool

nextFocusDown
Android

TV 下一个焦点向下(参见 View 组件文档)。

类型
number

nextFocusForward
Android

TV 下一个焦点向前(参见 View 组件文档)。

类型
number

nextFocusLeft
Android

TV 下一个焦点向左(参见 View 组件文档)。

类型
number

nextFocusRight
Android

TV 下一个焦点向右(参见 View 组件文档)。

类型
number

nextFocusUp
Android

TV 下一个焦点向上(参见 View 组件文档)。

类型
number

testOnly_pressed

用于快照测试的便捷属性。

类型
bool