跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽,抢先掌握 React Native 新架构精髓 立即查看 >Version: 0.74

TouchableHighlight

我们建议使用Pressable组件,它更具扩展性且会是官方未来力推的主流。

本组件用于封装视图,使其可以正确响应触摸操作。当按下的时候,封装的视图的不透明度会降低,同时会有一个底层的颜色透过而被用户看到,使得视图变暗或变亮。

在底层实现上,实际会创建一个新的视图到视图层级中,如果使用的方法不正确,有时候会导致一些不希望出现的视觉效果。譬如没有给视图的 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>;

示例


文档

Props

TouchableWithoutFeedback Props

继承所有的 TouchableWithoutFeedback Props.


activeOpacity

指定封装的视图在被触摸操作激活时以多少不透明度显示(0 到 1 之间,默认值为 0.85)。需要设置underlayColor

类型
number

onHideUnderlay

底层的颜色被隐藏的时候调用。

类型
function

onShowUnderlay

当底层的颜色被显示的时候调用。

类型
function

style

类型
View.style

underlayColor

有触摸操作时显示出来的底层的颜色。

类型
color

hasTVPreferredFocus
iOS

(Apple TV 专用) 是否允许在 Apple 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