尊重版權,未經授權不得轉載
本文出自:http://www.reibang.com/u/ca3943a4172a

在做App開發(fā)過程中離不了的需要用戶交互烂斋，說到交互，我們首先會想到的就是按鈕了锋拖，在React Native中沒有專門的按鈕組件柄错。
為了能讓視圖能夠響應用的的點擊事件恒削，我們需要借助Touchablexxx組件，來包裹我們的視圖尚揣。為什么說是Touchablexxx呢名秀，因為它不只是一個組件集币，而是一組組件跨细，一下四個組件都可以用來包裹視圖來響應用戶的點擊事件。

• TouchableWithoutFeedback：響應用戶的點擊事件，如果你想在處理點擊事件的同時不顯示任何視覺反饋溃槐，使用它是個不錯的選擇。
• TouchableHighlight：在TouchableWithoutFeedback的基礎上添加了當按下時背景會變暗的效果宜狐。
• TouchableOpacity：相比TouchableHighlight在按下去會使背景變暗的效果逸嘀，TouchableOpacity會在用戶手指按下時降低按鈕的透明度跪削，而不會改變背景的顏色。
• TouchableNativeFeedback：在Android上還可以使用TouchableNativeFeedback迂求，它會在用戶手指按下時形成類似水波紋的視覺效果碾盐。注意，此組件只支持Android揩局。

心得：以上四個組件毫玖，其中TouchableHighlight、TouchableOpacity以及TouchableNativeFeedback都是在TouchableWithoutFeedback的基礎上做了一些擴展凌盯，我們從它們的源碼中可以看出：

TouchableHighlight：

var TouchableHighlight = React.createClass({
  propTypes: {
    ...TouchableWithoutFeedback.propTypes,

TouchableOpacity：

var TouchableOpacity = React.createClass({
  mixins: [TimerMixin, Touchable.Mixin, NativeMethodsMixin],

  propTypes: {
    ...TouchableWithoutFeedback.propTypes,

TouchableNativeFeedback:

var TouchableNativeFeedback = React.createClass({
  propTypes: {
    ...TouchableWithoutFeedback.propTypes,

因為TouchableWithoutFeedback有其它三個組件的共同屬性付枫，所以我們先來學習一下TouchableWithoutFeedback。

TouchableWithoutFeedback使用詳解

TouchableWithoutFeedback一個Touchable系列組件中最基本的一個組價驰怎，只響應用戶的點擊事件不會做任何UI上的改變阐滩，在使用的過程中需要特別留意。

提示：無論是TouchableWithoutFeedback還是其他三種Touchable組件县忌，都是在根節(jié)點都是只支持一個組件掂榔，如果你需要多個組件同時相應單擊事件继效，可以用一個View將它們包裹著，它的這種根節(jié)點只支持一個組件的特性和ScrollView很類似衅疙。

接下來讓我們來看一下莲趣，TouchableWithoutFeedback有哪些常用的屬性：

TouchableWithoutFeedback常用的屬性

說到常用的屬性TouchableWithoutFeedback首先要提到的就是onPress了。

onPress function

當觸摸操作結束時調用饱溢，但如果被取消了則不調用（譬如響應者被一個滾動操作取代）喧伞。

心得：onPress可謂是Touchable系列組件的最常用的屬性之一了，如果你要讓視圖響應用戶的單擊事件绩郎，那么用onPress就可以了潘鲫。

接下來呢，我們就來使用onPress屬性來實現(xiàn)一個統(tǒng)計按鈕單擊次數(shù)的例子肋杖。

<TouchableWithoutFeedback
    onPress={()=> {
        this.setState({count: this.state.count+1})
    }}
>
    <View style={styles.button}>
        <Text style={styles.buttonText}>
            我是TouchableWithoutFeedback,單擊我
        </Text>
    </View>
</TouchableWithoutFeedback>
<Text style={styles.text}>您單擊了:{this.state.count}次</Text>

下載源碼

TouchableWithoutFeedback_onPress

onLongPress function

當用戶長時間按壓組件(長按效果)的時候調用該方法溉仑。

心得：onLongPress也是Touchable系列組件的最常用的屬性之一，通常用于響應長按的事件状植，如長按列表彈出刪除對話框等浊竟。

接下來呢，我們就來使用onLongPress屬性來響應用戶的長按事件津畸。

<TouchableWithoutFeedback
    onPress={()=> {
        this.setState({count: this.state.count + 1})
    }}
    onLongPress={()=> {
        this.setState({countLong: this.state.countLong + 1})
        Alert.alert(
            '提示',
            '確定要刪除嗎?',
            [
                {text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                {text: '確實', onPress: () => console.log('OK Pressed')},
            ]
        )
    }}
>
    <View style={styles.button}>
        <Text style={styles.buttonText}>
            我是TouchableWithoutFeedback,單擊我
        </Text>
    </View>
</TouchableWithoutFeedback>
<Text style={styles.text}>您單擊了:{this.state.count}次</Text>
<Text style={styles.text}>您長按了:{this.state.countLong}次</Text>

下載源碼

TouchableWithoutFeedback_onLongPress

我們在上面例子的基礎上為Touchable設置了onLongPress屬性振定，當用戶長時間按壓按鈕是會彈出一個對話框。

心得：當我們沒有對Touchable組件設置onLongPress屬性而設置了onPress屬性的時候肉拓，我們長按按鈕之后會回調onPress方法后频。另外，我們也可以通過delayLongPress方法來這設置從onPressIn被回調開始暖途，到onLongPress被調用的延遲卑惜。

disabled bool

如果設為true，則禁止此組件的一切交互驻售。

心得：disabled也是Touchable系列組件的最常用的屬性之一露久，通常用于禁止按鈕相應用戶的點擊事件，比如芋浮，當用戶單擊按鈕進行登錄時抱环，需要進行網絡請求，在請求操作完成之前如果用戶多次單擊登錄按鈕我們通常不希望發(fā)起多次登錄請求纸巷，這個時候就可以借助disabled的屬性來禁用按鈕的交互镇草。

接下來呢，我們就來模擬用戶登錄的例子來介紹一下disabled的使用瘤旨。

<TouchableWithoutFeedback
    disabled={this.state.waiting}
    onPress={()=> {
        this.setState({text:'正在登錄...',waiting:true})
        setTimeout(()=>{
            this.setState({text:'網絡不流暢',waiting:false})
        },2000);

    }}
>
    <View style={styles.button}>
        <Text style={styles.buttonText}>
           登錄
        </Text>
    </View>
</TouchableWithoutFeedback>
<Text style={styles.text}>{this.state.text}</Text>

下載源碼

TouchableWithoutFeedback_disabled

在上面例子中我們模擬了用戶登錄的效果梯啤，默認狀態(tài)下按鈕是可以響應用戶點擊事件的，在正在登錄過程中我們通過disabled屬性來禁用了按鈕存哲，這時無論是單擊還是長按按鈕都是沒有任何響應的因宇，在停隔2s后七婴，我們又將按鈕解除禁用，這時按鈕又可以重新響應用戶的點擊事件了察滑。
當用戶長時間按壓按鈕時會彈出一個對話框打厘。

心得：有朋友問我，想禁用按鈕贺辰，但是通過設置Touchable的accessible屬性為false沒有效果户盯，這也是因為即使accessible為false的情況下，Touchable組件還是可以響應交互事件的饲化，要想禁用Touchable的交互事件莽鸭，只能通過disabled屬性。

onPressIn function與onPressOut function

這兩個方法分別是當用戶開始點擊按鈕時與點擊結束后被回調吃靠。

通過這兩個方法我們可以計算出用戶單擊按鈕所用的時長硫眨， 另外也可以做一些其它個性化的功能。現(xiàn)在我們將通過一個例子來計算出用戶點擊按鈕所用的時長巢块。

<TouchableWithoutFeedback
    onPressIn={()=> {
        this.setState({text:'觸摸開始',startTime:new Date().getTime()})
    }}
    onPressOut={()=>{
        this.setState({text:'觸摸結束,持續(xù)時間:'+(new Date().getTime()-this.state.startTime)+'毫秒'})
    }}
>
    <View style={styles.button}>
        <Text style={styles.buttonText}>
            點我
        </Text>
    </View>
</TouchableWithoutFeedback>
<Text style={styles.text}>{this.state.text}</Text>

下載源碼

TouchableWithoutFeedback Pressin_out

在上述例子中我們記錄下用戶單擊按鈕的時間戳礁阁，當單擊結束后我們獲取當前時間減去剛單擊時的時間，它們的差值就是用戶單擊按鈕所用的時間了族奢。

心得：另外我們也可以通過delayPressIn與delayPressOut兩個方法來分別設置氮兵，從用戶點擊按鈕到onPressIn被回調的延時與從點擊結束到onPressOut被回調時的延時。

TouchableHighlight使用詳解

TouchableHighlight是Touchable系列組件中比較常用的一個歹鱼，它是在TouchableWithoutFeedback的基礎上添加了一些UI上的擴展，既當手指按下的時候卜高，該視圖的不透明度會降低弥姻，同時會看到相應的顏色(視圖變暗或者變亮)，從TouchableHighlight的源碼中我們可以看出掺涛，其實這個顏色就是在TouchableHighlight的最外層個添加了一個View庭敦，通過改變這個View的背景色及透明度來達到這一效果。

  render: function() {
    return (
      <View
        accessible={this.props.accessible !== false}
        accessibilityLabel={this.props.accessibilityLabel}
        accessibilityComponentType={this.props.accessibilityComponentType}
        accessibilityTraits={this.props.accessibilityTraits}
        ref={UNDERLAY_REF}
        style={this.state.underlayStyle}
        onLayout={this.props.onLayout}
        hitSlop={this.props.hitSlop}
        onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
        onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest}
        onResponderGrant={this.touchableHandleResponderGrant}
        onResponderMove={this.touchableHandleResponderMove}
        onResponderRelease={this.touchableHandleResponderRelease}
        onResponderTerminate={this.touchableHandleResponderTerminate}
        testID={this.props.testID}>
        {React.cloneElement(
          React.Children.only(this.props.children),
          {
            ref: CHILD_REF,
          }
        )}
        {Touchable.renderDebugView({color: 'green', hitSlop: this.props.hitSlop})}
      </View>
    );
  }

TouchableHighlight所擴展出來的屬性

activeOpacity number

我們可以通過activeOpacity來設置TouchableHighlight被按下時的不透明度薪缆，從TouchableHighlight的源碼中可以看出秧廉，它的默認不透明度為0.85，我們可以根據(jù)需要進行調節(jié)拣帽。

var DEFAULT_PROPS = {
  activeOpacity: 0.85,
  underlayColor: 'black',
};

underlayColor color

我們可以通過underlayColor屬性來設置TouchableHighlight被按下去的顏色疼电，默認狀態(tài)下為balck黑色。

onHideUnderlay function

當襯底(也就是上文講到的最外層的View)被隱藏的時候調用减拭。

心得蔽豺，通常情況下，當手指結束點擊時襯底會被隱藏拧粪。

onShowUnderlay function

當襯底(也就是上文講到的最外層的View)顯示的時候調用修陡。

心得沧侥，通常情況下，當手指剛開始點擊時襯底會顯示魄鸦。

style View#style

因為TouchableHighlight的最外層個添加了一個View宴杀，所以我們可以設置這個View的樣式來做出一個形形色色的按鈕。

接下來拾因，我們通過一個例子來看一下這些屬性的使用旺罢。

<TouchableHighlight
    style={{marginTop:20}}
    activeOpacity={0.7}
    underlayColor='green'
    onHideUnderlay={()=>{
        this.setState({text:'襯底被隱藏'})
    }}
    onShowUnderlay={()=>{
        this.setState({text:'襯底顯示'})
    }}
    onPress={()=>{

    }}
>
    <View style={styles.button}>
        <Text style={styles.buttonText}>
            TouchableHighlight
        </Text>
    </View>
</TouchableHighlight>
<Text style={styles.text}>{this.state.text}</Text>

下載源碼

TouchableHighlight

TouchableOpacity使用詳解

TouchableOpacity也是Touchable系列組件中比較常用的一個，它是在TouchableWithoutFeedback的基礎上添加了一些UI上的擴展盾致，但這些擴展相比TouchableHighlight少了一個額外的顏色變化主经。它是通過在按下去改變視圖的不透明度來表示按鈕被點擊的。

TouchableOpacity所擴展出來的屬性

在擴展屬性方面TouchableOpacity相比TouchableHighlight庭惜，就少了很多罩驻，只有一個activeOpacity，來設置按下去的透明度护赊。

activeOpacity number

同惠遏，TouchableHighlight的activeOpacity。

另外我們也可以通過TouchableOpacity的setOpacityTo(value, duration)方法來動態(tài)修改TouchableOpacity被按下去的不透明度骏啰。

TouchableNativeFeedback使用詳解

為了支持Android5.0新增的觸控反饋节吮，React Native加入了TouchableNativeFeedback組件，TouchableNativeFeedback在TouchableWithoutFeedback所支持的屬性的基礎上增加了按下去的水波紋效果判耕。我們可以通過background屬性來自定義原生觸摸操作反饋的背景透绩。

TouchableNativeFeedback所擴展出來的屬性

background backgroundPropType

決定在觸摸反饋的時候顯示什么類型的背景。它接受一個有著type屬性和一些基于type屬性的額外數(shù)據(jù)的對象壁熄。推薦使用以下的靜態(tài)方法之一來創(chuàng)建這個對象：

1. TouchableNativeFeedback.SelectableBackground() - 會創(chuàng)建一個對象帚豪，表示安卓主題默認的對于被選中對象的背景。(?android:attr/selectableItemBackground)

2. TouchableNativeFeedback.SelectableBackgroundBorderless() - 會創(chuàng)建一個對象草丧，表示安卓主題默認的對于被選中的無邊框對象的背景狸臣。(?android:attr/selectableItemBackgroundBorderless)。只在Android API level 21+適用昌执。

3. TouchableNativeFeedback.Ripple(color, borderless) - 會創(chuàng)建一個對象烛亦，當按鈕被按下時產生一個漣漪狀的背景，你可以通過color參數(shù)來指定顏色懂拾，如果參數(shù)borderless是true煤禽，那么漣漪還會渲染到視圖的范圍之外。（參見原生的actionbar buttons作為該效果的一個例子）岖赋。這個背景類型只在Android API level 21+適用也就是Android5.0或以上設備呜师。

<TouchableNativeFeedback
    onPress={()=>{
        this.setState({count: this.state.count + 1})
    }}
    background={TouchableNativeFeedback.SelectableBackground()}>
    <View style={{width: 150, height: 100, backgroundColor: 'red'}}>
        <Text style={{margin: 30}}>TouchableNativeFeedback</Text>
    </View>
</TouchableNativeFeedback>
<Text style={styles.text}>{this.state.text}</Text>

下載源碼

TouchableNativeFeedback.gif

最后

既然來了，留下個喜歡再走吧贾节，鼓勵我繼續(xù)創(chuàng)作(^_)∠※

如果喜歡我的文章汁汗，那就關注我的簡書@ CrazyCodeBoy吧衷畦，讓我們一起做朋友~~

戳這里,加關注哦:

微博：第一時間獲取推送
個人博客：干貨文章都在這里哦
GitHub：我的開源項目http://coding.imooc.com/class/304.html