【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 属性来自定义原生触摸操作反馈的背景