高亮触摸
如果您正在寻找一种更广泛、更具前瞻性的触摸输入处理方式,请查看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
方便快照测试。
类型 |
---|
布尔值 |