reactnative(RN)TouchableOpacity⽤法总结
本组件⽤于封装视图,使其可以正确响应触摸操作。当按下的时候,封装的视图的不透明度会降低。这个过程并不会真正改变视图层级,⼤部分情况下很容易添加到应⽤中⽽不会带来⼀些奇怪的副作⽤。(译注:此组件与TouchableHighlight的区别在于并没有额外的颜⾊变化,更适于⼀般场景)
例⼦:
<TouchableOpacity
style={uch}
onPress={() => this.delCart()}
react native 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的)