TouchableHighlight
If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API.
本组件用于封装视图,使其可以正确响应触摸操作。当按下的时候,封装的视图的不透明度会降低,同时会有一个底层的颜色透过而被用户看到,使得视图变暗或变亮。
在底层实现上,实际会创建一个新的视图到视图层级中,如果使用的方法不正确,有时候会导致一些不希望出现的视觉效果。譬如没有给视图的 backgroundColor 显式声明一个不透明的颜色。
注意TouchableHighlight
只支持一个子节点(不能没有子节点也不能多于一个)。如果你希望包含多个子组件,可以用一个 View 来包装它们。
function MyComponent(props) {
return (
<View {...props} style={{ flex: 1, backgroundColor: '#fff' }}>
<Text>My Component</Text>
</View>
);
}
<TouchableHighlight
activeOpacity={0.6}
underlayColor="#DDDDDD"
onPress={() => alert('Pressed!')}>
<MyComponent />
</TouchableHighlight>;
示例
- 函数式组件
- Class 组件
文档
Props
Inherits TouchableWithoutFeedback Props.
activeOpacity
指定封装的视图在被触摸操作激活时以多少不透明度显示(0 到 1 之间,默认值为 0.85)。需要设置underlayColor
。
类型 | 必需 |
---|---|
number | 否 |
onHideUnderlay
底层的颜色被隐藏的时候调用。
类型 | 必需 |
---|---|
function | 否 |
onShowUnderlay
当底层的颜色被显示的时候调用。
类型 | 必需 |
---|---|
function | 否 |
style
类型 | 必需 |
---|---|
View.style | 否 |
underlayColor
有触摸操作时显示出来的底层的颜色。
类型 | 必需 |
---|---|
color | 否 |
hasTVPreferredFocus
(Apple TV only) TV preferred focus (see documentation for the View component).
类型 | 必需 | 平台 |
---|---|---|
bool | 否 | iOS |
tvParallaxProperties
(Apple TV only) Object with properties to control Apple TV parallax effects.
enabled: If true, parallax effects are enabled. Defaults to true. shiftDistanceX: Defaults to 2.0. shiftDistanceY: Defaults to 2.0. tiltAngle: Defaults to 0.05. magnification: Defaults to 1.0. pressMagnification: Defaults to 1.0. pressDuration: Defaults to 0.3. pressDelay: Defaults to 0.0.
类型 | 必需 | 平台 |
---|---|---|
object | 否 | iOS |