跳到主要内容

TouchableHighlight

提示

如果您正在寻找一种更广泛、更具前瞻性的触摸输入处理方式，请查看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 Props​

继承TouchableWithoutFeedback 属性。

activeOpacity​

决定触摸处于活动状态时被包装视图的不透明度。值应介于 0 和 1 之间。默认为 0.85。需要设置 underlayColor。

类型
数字

onHideUnderlay​

底层隐藏后立即调用。

类型
函数

onShowUnderlay​

底层显示后立即调用。

类型
函数

ref​

一个 ref 设置器，在挂载时将被分配一个元素节点。

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​

方便用于快照测试。

类型
布尔值