一. 簡介

React Native沒有像Web開發那樣給元素綁定click事件,Text組件有onPress事件回調，View組件是沒有的，但是在實際項目開發中，很多其他的組件也是需要可以被點擊的，RN提供了4個組件來賦予被點擊的能力（去包裹其他組件即可），這4個組件被稱為“Touchable類組件”.
TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback。其中最后一個控件是觸摸點擊不帶反饋效果的，另外三個都是有反饋效果.可以看成是前面三個繼承TouchableWithoutFeedback。

二. 屬性及示例

TouchableWithoutFeedback

1.基本介紹
除非你有一個很好的理由，否則不要用這個組件。所有能夠響應觸屏操作的元素在觸屏后都應該有一個視覺上的反饋（然而本組件沒有任何視覺反饋）。這也是為什么一個"web"應用總是顯得不夠"原生"的主要原因之一。
2.屬性
(1)accessibilityComponentType 設置可訪問的組件類型
(2)accessibilityTraits 設置訪問特征
(3)accessible bool設置當前組件是否可以訪問
(4)delayLongPress number 設置延遲時間 單位時間為毫秒 從onPressIn開始，到onLongPress被調用的延遲
(5)delayPressIn number 設置延遲的時間，單位為毫秒，從用戶觸摸控件開始到onPressIn被調用這一段時間
(6)delayPressOut number 設置延遲的時間，單位為毫秒，從用戶觸摸事件釋放開始到onPressOut被調用這一段時間
(7)onLayout function 當組件加載或者改組件的布局發生變化的時候調用。調用傳入的參數為{nativeEvent:{layout:{x,y,width,height}}}
(8)onLongPress function 當用戶長時間按壓組件時調用該方法
(9)onPress function 當用戶點擊的時候調用(觸摸結束)。 但是如果事件被取消了就不會調用
(10)onPressIn function 用戶開始觸摸組件回調方法
(11)onPressOut function 用戶完成觸摸組件之后回調方法
pressRetentionOffset {top:number,left:number,bottom:number,right:number} 該設置當視圖滾動禁用的情況下，可以定義當手指距離組件的距離。當大于該距離該組件會失去響應。當少于該距離的時候，該組件會重新進行響應。

示例

export default class TouchableDemo extends Component { show(text) { alert(text); } render() { return ( <View style={styles.flex}> <TouchableWithoutFeedback onPress={this.show.bind(this,'學習RN的TouchableWithoutFeedback屬性')}> <Text style={styles.fontItem}>學習RN的TouchableWithoutFeedback屬性</Text> </TouchableWithoutFeedback> </View> ); } } const styles = StyleSheet.create({ flex: { flex: 1, marginTop:30, }, fontItem: { fontSize: 16, color: '#434343', marginLeft: 10, marginRight: 10, marginTop:10, }, }); AppRegistry.registerComponent('TouchableDemo', () => TouchableDemo);
效果 沒有任何效果顯示

TouchableWithoutFeedback.png

TouchableHighlight

![Uploading TouchableHighlight_933757.png . . .]
(觸摸點擊高亮效果)
1.基本介紹
本組件用于封裝視圖，使其可以正確響應觸摸操作。當按下的時候，封裝的視圖的不透明度會降低，同時會有一個底層的顏色透過而被用戶看到，使得視圖變暗或變亮。在底層實現上，實際會創建一個新的視圖到視圖層級中，如果使用的方法不正確，有時候會導致一些不希望出現的視覺效果。譬如沒有給視圖的backgroundColor顯式聲明一個不透明的顏色。
【注意】TouchableHighlight只支持一個子節點，如果你需要設置多個子視圖組件，那么就需要使用View節點進行包裝。
2.屬性
(1).TouchableWithoutFeedback的屬性，該組件都可以進行使用
(2)activeOpacity number 該用來設置視圖在進行觸摸的時候，顯示的不透明度(0-1之間)
(3)onHideUnderlay function 當底層的顏色被隱藏的時候調用
(4)onShowUnderlay function 當底層的顏色被顯示的時候調用
(5)style 可以設置控件的風格演示，該風格演示可以參考View組件的style
underlayColor 當觸摸或者點擊控件的時候顯示出的顏色

示例（樣式表與點擊事件和上面的一樣，這里只貼出主要代碼）

render() { return ( <View style={styles.flex}> <TouchableHighlight onPress={this.show.bind(this,'學習RN的TouchableHighlight屬性')} underlayColor='#E1F6FF'> <Text style={styles.fontItem}>學習RN的TouchableHighlight屬性</Text> </TouchableHighlight> </View> ); }
效果 背景高亮

TouchableHighlight.png

TouchableOpacity

1.簡介
本組件用于封裝視圖，使其可以正確響應觸摸操作。當按下的時候，封裝的視圖的不透明度會降低。這個過程并不會真正改變視圖層級，大部分情況下很容易添加到應用中而不會帶來一些奇怪的副作用。（譯注：此組件與TouchableHighlight的區別在于并沒有額外的顏色變化，更適于一般場景）
2.屬性
(1).TouchableWithoutFeedback的屬性，該組件都可以進行使用
(2).activeOpacity number 設置當用戶觸摸的時候，組件的透明度

示例

render() { return ( <View style={styles.flex}> <TouchableOpacity onPress={this.show.bind(this,'學習RN的TouchableOpacity屬性')}> <Text style={styles.fontItem}>學習RN的TouchableOpacity屬性</Text> </TouchableOpacity> </View> ); }
效果
默認效果

TouchableOpacity_default.png

點擊后效果 顏色改變

TouchableOpacity_pressed.png

TouchableNativeFeedback

1.基本介紹
本組件用于封裝視圖，使其可以正確響應觸摸操作（僅限Android平臺）。在Android設備上，這個組件利用原生狀態來渲染觸摸的反饋。目前它只支持一個單獨的View實例作為子節點。在底層實現上，實際會創建一個新的RCTView結點替換當前的子View，并附帶一些額外的屬性。
原生觸摸操作反饋的背景可以使用background屬性來自定義

示例

renderButton: function() { return ( <TouchableNativeFeedback onPress={this._onPressButton} background={TouchableNativeFeedback.SelectableBackground()}> <View style={{width: 150, height: 100, backgroundColor: 'red'}}> <Text style={{margin: 30}}>Button</Text> </View> </TouchableNativeFeedback> ); },
效果

TouchableNativeFeedback.png

記錄自己的RN學習之路，有什么不對的地方，一起討論進步
最后感謝RN中文網，江清清的專欄，