本组件用于封装视图,使其可以正确响应触摸操作。当按下的时候,封装的视图的不透明度会降低。这个过程并不会真正改变视图层级,大部分情况下很容易添加到应用中而不会带来一些奇怪的副作用。(译注:此组件与TouchableHighlight的区别在于并没有额外的颜色变化,更适于一般场景)
例子:
<TouchableOpacity
style={styles.touch}
onPress={() => this.delCart()}
activeOpacity={0.7}
>
<Text>删除</Text>
</TouchableOpacity>
delCart = () => {
console.log('点击了删除')
}
onPress:按下时回调
activeOpacity:按下时背景透明度为0.7
其余常用属性:
delayLongPress number
单位是毫秒,从onPressIn开始,到onLongPress被调用的延迟。
disabled bool
如果设为true,则禁止此组件的一切交互。
hitSlop {top: number, left: number, bottom: number, right: number}
这一属性定义了按钮的外延范围。这一范围也会使pressRetentionOffset
(见下文)变得更大。 注意:触摸范围不会超过父视图的边界,也不会影响原先和本组件层叠的视图(保留原先的触摸优先级)。
pressRetentionOffset {top: number, left: number, bottom: number, right: number}
在当前视图不能滚动的前提下指定这个属性,可以决定当手指移开多远距离之后,会不再激活按钮。但如果手指再次移回范围内,按钮会被再次激活。只要视图不能滚动,你可以来回多次这样的操作。确保你传入一个常量来减少内存分配。
其余属性见官网(其属性和TouchableWithoutFeedback相同,故此处给出的链接是TouchableWithoutFeedback的)
https://reactnative.cn/docs/0.31/touchablewithoutfeedback.html#content