TouchableHighlight

如果您正在寻找一种更广泛且面向未来的方式来处理基于触摸的输入，请查看 Pressable API。

一个用于使视图正确响应触摸的包装器。按下时，被包装视图的不透明度会降低，从而允许底色显示出来，使视图变暗或着色。

底色来自于将子组件包装在一个新的 View 中，这可能会影响布局，如果未正确使用，有时会导致不必要的视觉伪影，例如如果被包装视图的 backgroundColor 未显式设置为不透明颜色。

TouchableHighlight 必须有一个子组件（不能为零个或多个）。如果您希望有多个子组件，请将它们包装在一个 View 中。

React 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。

类型
number

---

onHideUnderlay

在底色被隐藏后立即调用。

类型
function

---

onShowUnderlay

在底色被显示后立即调用。

类型
function

---

style

类型
View.style

---

underlayColor

当触摸激活时将显示出来的底色颜色。

类型
颜色

---

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