轉載請標明出處： [http://blog.csdn.net/developer_jiangqq/article/details/50630984](http://blog.csdn.net/developer_jiangqq/article/details/50630984) 本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq) # (一)前言 ???????【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏:[http://www.lcode.org](http://www.lcode.org/)?????? ? ? ? 今天我們一起來看一下Touchable*系列組件的使用詳解，該系列組件包括四種分別為:TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback。其中最后一個控件是觸摸點擊不帶反饋效果的，另外三個都是有反饋效果。可以這樣理解前面三個都是繼承自TouchableWithoutFeedback擴展而來。 ?????????剛創建的React Native技術交流1群(282693535),React Native交流2群:(496601483)，請不要重復加群！歡迎各位大牛,React?Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送! ?????????今天我們需要講解的這四種控件都是屬于Touchable系列的，是封裝了觸摸點擊相關事件,例如:觸摸,點擊,長按,反饋等相關。下面我們來把這四種組件分別進行講解一下。 # (二)TouchableWithoutFeedback ?????????2.1.TouchableWithoutFeedback組件基本介紹 ??????????該控件除非你不得不使用，否則請不要使用該組件哦~任何可以響應事件的控件當觸摸或者點擊的時候應該會有視覺上面的反應效果(但是該組件沒有)。這就是一個很大的原因，看起來像Web效果而不是原生的效果(Native)。 【特別聲明】TouchableWithFeedback只支持一個字節點，如果你需要設置多個子視圖組件，那么就需要使用View節點進行包裝。 ????????? 2.2.屬性方法 * accessibilityComponentType???View.AccessibilityComponentType??設置可訪問的組件類型 * accessibilityTraits?View.AccessibilityTraits,[View.AccessibilityTraits]?設置訪問特征 * accessible? bool??設置當前組件是否可以訪問 * delayLongPress? number??設置延遲的時間，單位為毫秒。從onPressIn方法開始，到onLongPress被調用這一段時間 * delayPressIn? number?設置延遲的時間，單位為毫秒，從用戶觸摸控件開始到onPressIn被調用這一段時間 * delayPressOut? number?設置延遲的時間，單位為毫秒，從用戶觸摸事件釋放開始到onPressOut被調用這一段時間 * onLayout? function??當組件加載或者改組件的布局發生變化的時候調用。調用傳入的參數為{nativeEvent:{layout:{x,y,width,height}}} * onLongPress function?方法，當用戶長時間按壓組件(長按效果)的時候調用該方法 * onPress?function?方法?當用戶點擊的時候調用(觸摸結束)。?但是如果事件被取消了就不會調用。(例如:當前被滑動事件所替代) * onPressIn? function??用戶開始觸摸組件回調方法 * onPressOut function?用戶完成觸摸組件之后回調方法 * pressRetentionOffset {top:number,left:number,bottom:number,right:number}???該設置當視圖滾動禁用的情況下，可以定義當手指距離組件的距離。當大于該距離該組價會失去響應。當少于該距離的時候，該組件會重新進行響應。 該組件我們一般不會直接進行使用，下面三種Touchable*系列組件對于該組件的屬性方法都可以進行使用。具體會具體演示這些屬性方法的使用實例。 # (三)TouchableHighlight(觸摸點擊高亮效果) ??????????3.1.TouchableHighlight組件基本介紹 ???????????該組件進行封裝視圖觸摸點擊的屬性。當手指點擊按下的時候，該視圖的不透明度會進行降低同時會看到相應的顏色(視圖變暗或者變亮)。如果我們去查看該組件的源代碼會發現，該底層實現是添加了一個新的視圖。如果如果我們沒有正確的使用，就可能不會出現正確的效果。例如:我們沒有給該組件視圖設置backgroudnColor的顏色值。 【特別聲明】TouchableHighlight只支持一個子節點，如果你需要設置多個子視圖組件，那么就需要使用View節點進行包裝。 ?????????? 3.2.屬性方法 * TouchableWithoutFeedback的?屬性，這邊TouchableHighlight組件全部可以進行使用 * activeOpacity??number?該用來設置視圖在進行觸摸的時候，要要顯示的不透明度(通常在0-1之間) * onHideUnderlay? function??方法?當底層被隱藏的時候調用 * onShowUnderlay? function?方法?當底層顯示的時候調用 * style??可以設置控件的風格演示，該風格演示可以參考View組件的style? * underlayColor??當觸摸或者點擊控件的時候顯示出的顏色 3.3.組件使用實例代碼 ~~~ 'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, TouchableHighlight, } from'react-native'; class TouchableHighlightDemo extends Component { render() { return ( <View style={styles.container}> <Text > TouchableHighlight實例 </Text> <TouchableHighlight underlayColor="rgb(210, 230,255)" activeOpacity={0.5} style={{ borderRadius: 8,padding:6,marginTop:5}} > <Text style={{fontSize:16}}>點擊我</Text> </TouchableHighlight> </View> ); } } const styles =StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, }); AppRegistry.registerComponent('TouchableHighlightDemo',() => TouchableHighlightDemo); ~~~ ???????? 3.4.運行效果如下:  # (四)TouchableOpacity(透明度變化) ????????? 4.1.TouchableOpacity組件介紹 ??????????該組件封裝了響應觸摸事件。當點擊按下的時候，該組件的透明度會降低。該組件使用過程中并不會改變視圖的層級關系，而且我們可以非常容易的添加到應用并且不會產生額外的異常錯誤。 ???????? 4.2.屬性方法 * TouchableWithoutFeedback的?屬性，這邊TouchableOpacity組件全部可以進行使用 * activeOpacity? number??設置當用戶觸摸的時候，組件的透明度 ??????? 4.3.組件使用實例代碼: ~~~ 'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, TouchableOpacity, } from'react-native'; class TouchableDemo extends Component { render() { return ( <View style={styles.container}> <Text> TouchableOpacity實例 </Text> <TouchableOpacity style={{marginTop:20}}> <Text style={{fontSize:16}}>點擊改變透明度</Text> </TouchableOpacity> </View> ); } } const styles =StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, }); AppRegistry.registerComponent('TouchableDemo',() => TouchableDemo); ~~~ ?????????? 4.4.運行效果截圖:  ?????????????? 4.5.實例演示onPress,onPressIn,onPressOut,onLongPress方法代碼如下: ~~~ 'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, TouchableOpacity, } from'react-native'; var TouchableDemo =React.createClass({ getInitialState: function() { return { eventLog: [], }; }, render: function() { return ( <View > <View style={[styles.row,{justifyContent: 'center'}]}> <TouchableOpacity style={styles.wrapper} onPress={() =>this._appendEvent('press')} onPressIn={() =>this._appendEvent('pressIn')} onPressOut={() =>this._appendEvent('pressOut')} onLongPress={() =>this._appendEvent('longPress')}> <Text style={styles.button}> Press Me </Text> </TouchableOpacity> </View> <View style={styles.eventLogBox}> {this.state.eventLog.map((e, ii)=> <Text key={ii}>{e}</Text>)} </View> </View> ); }, _appendEvent: function(eventName) { var limit = 6; var eventLog = this.state.eventLog.slice(0,limit - 1); eventLog.unshift(eventName); this.setState({eventLog}); }, }); const styles =StyleSheet.create({ button: { color: '#007AFF', }, wrapper: { borderRadius: 8, }, eventLogBox: { padding: 10, margin: 10, height: 120, borderWidth: StyleSheet.hairlineWidth, borderColor: '#f0f0f0', backgroundColor: '#f9f9f9', }, }); AppRegistry.registerComponent('TouchableDemo',() => TouchableDemo); ~~~ ?????? 4.6.運行效果截圖:  # (五)TouchableNativeFeedback ???????????5.1.TouchableNativeFeedback組件介紹 ????????????該封裝了可以進行響應觸摸事件的組件(僅限Android平臺)。在Android平臺上面該該組件可以使用原生平臺的狀態資源來顯示觸摸狀態變化。【特別注意】現如今該組件只是支持僅有一個View的子視圖實例(作為子節點)。在底層實現上面實際上面是創建一個新的RCTView的節點來進行替換當前的View節點視圖，并且可以攜帶一些附加的屬性。 ???????????該組件觸摸反饋的背景圖資源可以通過background屬性進行自定義設置 下面一個很簡單的使用實例方法如下: ~~~ var TouchableDemo =React.createClass({ render() { return ( <View style={styles.container}> <Text> TouchableNativeFeedback實例 </Text> <TouchableNativeFeedback style={{marginTop:20}}> <View style={{width: 150,height: 100, backgroundColor: 'red'}}> <Text style={{margin:30}}>Button</Text> </View> </TouchableNativeFeedback> </View> ); } }); ~~~ 運行效果如下:  ????????? 5.2.屬性方法介紹 * TouchableWithoutFeedback的?屬性，這邊TouchableNativeFeedback組件全部可以進行使用 * background? backgroundPropType??該用來設置背景資源的類型，該屬性會傳入一個type屬性和依賴的額外資源的data的對象。官方推薦采用如下的靜態方法來進行生成該dictionary對象 ①:TouchableNativeFeedback.SelectableBackground()???該會創建使用android默認主題背景(?android:attr/selectableItemBackground) ②:TouchableNativeFeedback.SelectableBackgroundBorderless()??該會創建使用android默認的無框的主題背景(?android:attr/selectableItemBackgroundBorderless)。不過該參數需要Android API 21+才可以使用 ③:TouchableNativeFeedback.Ripple(color,borderless)??該會創建當組件被按下的時候有一個水滴的效果.通過color參數指定顏色，如果borderless為true的時候，那么該水滴效果會渲染到該組件視圖的外邊。同樣該背景類型參數也需要Android API 21+才可以使用 5.3.使用實例代碼: ①:首先設置backgroundPropType為默認的背景效果代碼: ~~~ var TouchableDemo =React.createClass({ render() { return ( <View style={styles.container}> <Text> TouchableNativeFeedback實例 </Text> <TouchableNativeFeedback style={{marginTop:20}} background={TouchableNativeFeedback.SelectableBackground()}> <View style={{width: 150,height: 100,}}> <Text style={{margin:30}}>Button</Text> </View> </TouchableNativeFeedback> </View> ); } }); ~~~ 效果如下:  # (六)最后總結 ??????????今天我們主要學習一下Touchable*系列組件的使用詳解，該系列組件包括四種分別為:TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回復一下。 ? ? ? ?尊重原創，轉載請注明：From Sky丶清（[http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)） 侵權必究！ ? ? ? ?關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章)  ? ? ?關注我的微博，可以獲得更多精彩內容 ? ? ??[](http://weibo.com/u/1855428195?s=6uyXnP)