TouchableHighlight

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

技巧

如果您正在寻找更全面且面向未来的触摸输入处理方案，请参阅 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>;

示例

---

参考

属性

无触摸反馈属性

继承无触摸反馈属性。

---

activeOpacity

设置触摸激活时被包装视图的不透明度值（范围 0-1，默认 0.85）。需同时设置 underlayColor。

Type
number

---

onHideUnderlay

底层隐藏后立即触发。

Type
function

---

onShowUnderlay

底层显示后立即触发。

Type
function

---

ref

一个在组件挂载时会被赋予元素节点的 ref 设置器。

---

style

Type
View.style

---

underlayColor

触摸激活时透显的底层颜色。

Type
color

---

hasTVPreferredFocus

iOS

(仅 Apple TV 适用) 电视首选焦点（请参阅 View 组件的文档）。

Type
bool

---

nextFocusDown

Android

电视下一个向下焦点（请参阅 View 组件的文档）。

Type
number

---

nextFocusForward

Android

电视下一个向前焦点（请参阅 View 组件的文档）。

Type
number

---

nextFocusLeft

Android

电视下一个向左焦点（请参阅 View 组件的文档）。

Type
number

---

nextFocusRight

Android

电视下一个向右焦点（请参阅 View 组件的文档）。

Type
number

---

nextFocusUp

Android

电视下一个向上焦点（请参阅 View 组件的文档）。

Type
number

---

testOnly_pressed

用于快照测试。

Type
bool