跳到主要内容
版本: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