【RN】四个touchable相关的点击触发按钮(TouchableWithoutFeedback TouchableOpacity...)

前言:react native 的跨平台开发没有button的概念,而是使用touchable系列实现点击触发效果

 

react native一共有四个touchable相关的点击触发按钮,分别是:

TouchableWithoutFeedback
TouchableOpacity
Touchablehighlight
TouchableNativeFeedback
 
其中:TouchableWithoutFeedback触发后在视觉上没有任何点击效果反馈
TouchableHighlight实现高亮的触摸反馈
TouchableOpacity 实现透明度的触摸反馈
TouchableNativeFeedback可以在Android5.0以后触摸实现水波纹的效果(仅限Android平台,ios平台使用会报错)
 
提示:无论是TouchableWithoutFeedback还是其他三种Touchable组件,都是在根节点都是只支持一个组件。
如果你需要多个组件同时响应单击事件,可以用一个View将它们包裹着,它的这种根节点只支持一个组件的特性和ScrollView很类似。
 
 
TouchableWithoutFeedback(该标签不可以添加style样式属性,加了也没有效果
官方建议不使用该组件,因为任何可以响应事件的组件在触摸or点击的时候应该有视觉上的反应效果,但是这个组件没有。
这个组件看起来像Web效果而不是原生(Native)效果。 只响应用户的点击事件不会做任何UI上的改变。


相关属性:
        disabled 如果设为true表示关闭该组件的触摸功能
        onPress 当触摸操作结束时调用,但是如果被取消了则不调用
        onLongPress 当用户长时间按压组件(长按)的时候调用
        onPressIn 与 onPressOut 分别是当用户开始点击按钮时与点击结束后被回调

<TouchableWithoutFeedback
    onPress={()=> {alert('触摸效果')}}
    onLongPress={()=> {alert('长按效果')}}
    disabled={false}    //默认是false,如果是true表示关闭该组件的触摸功能
    onPressIn={()=> {alert('触摸开始')}}
    onPressOut={()=>{alert('触摸结束')}}
>
    <View><Text>TouchableWithoutFeedback的测试</Text></View>
</TouchableWithoutFeedback>

  

TouchableHighlight触摸高亮(该标签可以添加style样式属性

当手指点击按下的时候,该视图的不透明度会进行降低同时会看到相应的颜色(视图变暗或者变亮)。
底层原理时添加了一个新的视图,通过改变view组件的颜色和透明度来实现点击效果的改变

activeOpacity number  用于设置被按下时按钮的不透明度,默认是0.85
underlayColor color  用于设置被按下时按钮的颜色,默认是black
onShowUnderlay function  最外层的View显示的时候调用
onHideUnderlay function  最外层的View被隐藏的时候调用
style View#style  最外层的View可以设置样式
onPress function   当触摸操作结束时调用,但如果被取消了则不调用(譬如响应者被一个滚动操作取代)
onLongPress function  当用户长时间按压组件(长按效果)的时候调用该方法。
disabled bool  如果设为true,则禁止此组件的一切交互。
onPressIn function与onPressOut function  分别是当用户开始点击按钮时与点击结束后被回调。




<TouchableHighlight
    style={{}}
    activeOpacity={0.6}
    underlayColor='red'
    onHideUnderlay={()=>{alert('隐藏')}}
    onShowUnderlay={()=>{alert('显示')}}
>
    <View><Text>TouchableHighlight的测试</Text></View>
</TouchableHighlight>

  

TouchableOpacity(完全同TouchableHighlight,只是不可以修改颜色,只能改变透明度,可以添加样式效果)

TouchableOpacity也是Touchable系列组件中比较常用的一个,
它是在TouchableWithoutFeedback的基础上添加了一些UI上的扩展,
但这些扩展相比TouchableHighlight 少了一个额外的颜色变化。
它是通过在按下去改变视图的不透明度来表示按钮被点击的。
 
 
TouchableNativeFeedback(Android专用)
为了支持Android5.0新增的触控反馈,React Native加入了TouchableNativeFeedback 组件,
TouchableNativeFeedback 在TouchableWithoutFeedback 所支持的属性的基础上增加了按下去的水波纹效果。
我们可以通过background 属性来自定义原生触摸操作反馈的背景
posted @ 2020-04-27 09:36  拾暮  阅读(1802)  评论(0编辑  收藏  举报