跳至主要内容

TouchableHighlight

如果您正在寻找一种更全面且更具前瞻性的处理基于触摸的输入的方法，请查看 Pressable API。

一个用于使视图对触摸做出正确响应的包装器。按下时，包装视图的不透明度会降低，从而允许下层颜色透射，使视图变暗或着色。

下层来自将子元素包装在一个新的 View 中，这可能会影响布局，并且如果使用不当，有时会导致不需要的视觉伪影，例如，如果包装视图的 backgroundColor 未明确设置为不透明颜色。

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

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​

触摸激活时将透射的下层颜色。

类型
color

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