8****月****19日
[React-Native]RN组件学习-Touchable*系列
Touchable*
系列组件实现了点击等属性的操作,可以用来包装各种View
,从而达到其点击效果的实现。
你可以为Touchable*
系列组件实现包装,但是你的包装不会影响到整体原有布局,除非你再在Touchable*
系列上再次添加相关的样式。
TouchableWithoutFeedback
该组件没有触摸,按压的反馈
-
onPressIn
,onPress
和onPressOut
从实验结果来看,onPress
是由onPressIn
和onPressOut
联合发起的:
会先触发
onPressIn
,然后再触发onPressOut
,最终触发onPress
delayPressIn
- 可以利用这个属性,实现该控件长按几秒的效果实现:
设置控件在触发onPressIn
的延迟
delayPressIn={2000}
onPressIn={()=>{alert("on header pressed in!");}}
基本上和:
onLongPress={()=>{alert("长按了");}}
是一样的,但是,我们可以利用delayPressIn
实现我们希望的几秒长按延迟。
delayPressOut
- 实现在点击离开后的延迟时间后出发
onPressOut
属性
TouchableHighlight
按压的时候有颜色高亮
activeOpacity
在触压得时候的空间的透明度
underlayColor
触压的时候的背景变化的颜色
TouchableOpacity
按压的时候按压的控件有透明度的变化,你可以通过设置activeOpacity
进行设置
使用
TouchableHighlight
和TouchableOpacity
,通过activeOpacity
设置颜色透明度的变化的时候的实现异同点
TouchableHighlight
activeOpacity={0.6}
onPress={()=>{alert("dddd");}}
你需要同时设置以上的两个属性实现按压的透明度的变化,而:
TouchableOpacity
activeOpacity={0.6}
只需要设置这个就行了,感觉上TouchableOpacity
是对TouchableHighlight
的进一步封装。
TouchableNativeFeedback
这是一个具备Android原生********样式********的组件
background
background={TouchableNativeFeedback.SelectableBackground()}
会使用一个android原生的背景,这是一个矩形的背景
background={TouchableNativeFeedback.SelectableBackgroundBorderless()}
这是一个圆形的背景
background={TouchableNativeFeedback.Ripple('blue',false)}
通过传递两个参数,你可以设置点击的背景的颜色和是否是圆形(true)