react native (RN) TouchableOpacity用法总结

本组件用于封装视图,使其可以正确响应触摸操作。当按下的时候,封装的视图的不透明度会降低。这个过程并不会真正改变视图层级,大部分情况下很容易添加到应用中而不会带来一些奇怪的副作用。(译注:此组件与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

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章