【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 屬性來自定義原生觸摸操作反饋的背景