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 来包装它们。

React JSX

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>;

示例

Function Component

Class Component

---

文档

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