一、前言
移動應用上的用戶交互基本靠點擊,觸摸。React Native提供了可以處理常見觸摸手勢例如點擊或者滑動的組件,以及可以用于識別更復雜的手勢的完整手勢響應鏈。
這邊文章主要講解一下,關于點擊的組件。點擊的組件是使用“Touchable”開頭的一系列組件,通過onPress屬性來接受一個點擊的處理函數。
二、系列組件的區別與應用場景。
2.1用戶視覺效果
Touchablehlight ? 此組件的背景會在用戶手指按下時變暗 ? ?一般應用于按鈕或者鏈接?
TouchableNativeFeedBack ( 僅限于android) 用戶手指按下時形成類似水墨漣漪的視覺效果 ?多用于在處理點擊事件時同時不顯示任何視覺效果
TouchableOpcity ?此組件會在用戶手指按下時降低按鈕的透明度 不會改變背景顏色
2.2各組件的屬性:
Touchablehlight
在底層實現上,實際會創建一個新的視圖到視圖層級中,如果使用的方法不正確,有時候會導致一些不希望出現的視覺效果。只能進行一層嵌套,不能多嵌套。
activeOpacity
? number? ? 設置組件在進行觸摸的時候,顯示的不透明度(取值在0-1之間)
onHideUnderlay
function? 方法
當底層被隱藏的時候調用
onShowUnderlay
function 方法
當底層顯示的時候調用
style
可以設置控件的風格演示,該風格演示可以參考View組件的style
underlayColor
當觸摸或者點擊控件的時候顯示出的顏色
三、運行demo
3.1?Touchablehlight
運行結果:
點擊之后
3.2TouchableOpacity
運行結果: