一. 簡(jiǎn)介

React Native沒(méi)有像Web開(kāi)發(fā)那樣給元素綁定click事件,Text組件有onPress事件回調(diào)伏蚊，View組件是沒(méi)有的揭保，但是在實(shí)際項(xiàng)目開(kāi)發(fā)中埃叭，很多其他的組件也是需要可以被點(diǎn)擊的睁搭，RN提供了4個(gè)組件來(lái)賦予被點(diǎn)擊的能力（去包裹其他組件即可），這4個(gè)組件被稱為“Touchable類組件”.
TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback谆沃。其中最后一個(gè)控件是觸摸點(diǎn)擊不帶反饋效果的钝凶，另外三個(gè)都是有反饋效果.可以看成是前面三個(gè)繼承TouchableWithoutFeedback。

二. 屬性及示例

TouchableWithoutFeedback

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

示例

export default class TouchableDemo extends Component { show(text) { alert(text); } render() { return ( <View style={styles.flex}> <TouchableWithoutFeedback onPress={this.show.bind(this,'學(xué)習(xí)RN的TouchableWithoutFeedback屬性')}> <Text style={styles.fontItem}>學(xué)習(xí)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);
效果 沒(méi)有任何效果顯示

TouchableWithoutFeedback.png

TouchableHighlight

![Uploading TouchableHighlight_933757.png . . .]
(觸摸點(diǎn)擊高亮效果)
1.基本介紹
本組件用于封裝視圖温自，使其可以正確響應(yīng)觸摸操作。當(dāng)按下的時(shí)候皇钞，封裝的視圖的不透明度會(huì)降低悼泌，同時(shí)會(huì)有一個(gè)底層的顏色透過(guò)而被用戶看到，使得視圖變暗或變亮夹界。在底層實(shí)現(xiàn)上馆里，實(shí)際會(huì)創(chuàng)建一個(gè)新的視圖到視圖層級(jí)中，如果使用的方法不正確可柿，有時(shí)候會(huì)導(dǎo)致一些不希望出現(xiàn)的視覺(jué)效果也拜。譬如沒(méi)有給視圖的backgroundColor顯式聲明一個(gè)不透明的顏色。
【注意】TouchableHighlight只支持一個(gè)子節(jié)點(diǎn)趾痘，如果你需要設(shè)置多個(gè)子視圖組件，那么就需要使用View節(jié)點(diǎn)進(jìn)行包裝蔓钟。
2.屬性
(1).TouchableWithoutFeedback的屬性永票，該組件都可以進(jìn)行使用
(2)activeOpacity number 該用來(lái)設(shè)置視圖在進(jìn)行觸摸的時(shí)候，顯示的不透明度(0-1之間)
(3)onHideUnderlay function 當(dāng)?shù)讓拥念伾浑[藏的時(shí)候調(diào)用
(4)onShowUnderlay function 當(dāng)?shù)讓拥念伾伙@示的時(shí)候調(diào)用
(5)style 可以設(shè)置控件的風(fēng)格演示，該風(fēng)格演示可以參考View組件的style
underlayColor 當(dāng)觸摸或者點(diǎn)擊控件的時(shí)候顯示出的顏色

示例（樣式表與點(diǎn)擊事件和上面的一樣侣集，這里只貼出主要代碼）

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

TouchableHighlight.png

TouchableOpacity

1.簡(jiǎn)介
本組件用于封裝視圖键俱，使其可以正確響應(yīng)觸摸操作。當(dāng)按下的時(shí)候世分，封裝的視圖的不透明度會(huì)降低编振。這個(gè)過(guò)程并不會(huì)真正改變視圖層級(jí)，大部分情況下很容易添加到應(yīng)用中而不會(huì)帶來(lái)一些奇怪的副作用臭埋。（譯注：此組件與TouchableHighlight的區(qū)別在于并沒(méi)有額外的顏色變化踪央，更適于一般場(chǎng)景）
2.屬性
(1).TouchableWithoutFeedback的屬性，該組件都可以進(jìn)行使用
(2).activeOpacity number 設(shè)置當(dāng)用戶觸摸的時(shí)候瓢阴，組件的透明度

示例

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

TouchableOpacity_default.png

點(diǎn)擊后效果 顏色改變

TouchableOpacity_pressed.png

TouchableNativeFeedback

1.基本介紹
本組件用于封裝視圖畅蹂，使其可以正確響應(yīng)觸摸操作（僅限Android平臺(tái)）。在Android設(shè)備上荣恐，這個(gè)組件利用原生狀態(tài)來(lái)渲染觸摸的反饋液斜。目前它只支持一個(gè)單獨(dú)的View實(shí)例作為子節(jié)點(diǎn)。在底層實(shí)現(xiàn)上叠穆，實(shí)際會(huì)創(chuàng)建一個(gè)新的RCTView結(jié)點(diǎn)替換當(dāng)前的子View少漆，并附帶一些額外的屬性。
原生觸摸操作反饋的背景可以使用background屬性來(lái)自定義

示例

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學(xué)習(xí)之路硼被，有什么不對(duì)的地方示损，一起討論進(jìn)步
最后感謝RN中文網(wǎng)，江清清的專欄祷嘶，