一、前言

在做RN App開發(fā)過程中離不了用戶交互，在React Native中沒有專門的按鈕組件。

為了讓視圖能夠響應(yīng)用戶的點擊事件，需要借助Touchablexxx組件來包裹視圖。為什么說是Touchablexxx呢，因為它不只是一個組件，而是一組組件，以下四個組件都可以用來包裹視圖來響應(yīng)用戶的點擊事件。

• TouchableWithoutFeedback：響應(yīng)用戶的點擊事件，如果你想在處理點擊事件的同時不顯示任何視覺反饋，使用它是個不錯的選擇。
• TouchableHighlight：在TouchableWithoutFeedback的基礎(chǔ)上添加了當(dāng)按下時背景會變暗的效果。
• TouchableOpacity：相比TouchableHighlight在按下去會使背景變暗的效果，TouchableOpacity會在用戶手指按下時降低按鈕的透明度，而不會改變背景的顏色。
• TouchableNativeFeedback：在Android上還可以使用TouchableNativeFeedback，它會在用戶手指按下時形成類似水波紋的視覺效果。注意，此組件只支持Android。

以上四個組件，其中TouchableHighlight、TouchableOpacity以及TouchableNativeFeedback都是在TouchableWithoutFeedback的基礎(chǔ)上做了一些擴展，我們從它們的源碼中可以看出：

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系列組件中最基本的一個組件，只響應(yīng)用戶的點擊事件不會做任何UI上的改變，在使用的過程中需要特別留意。

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

接下來，讓我們來看一下TouchableWithoutFeedback常用屬性：

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

onPress function

當(dāng)觸摸操作結(jié)束時調(diào)用，但如果被取消了則不調(diào)用（譬如響應(yīng)者被一個滾動操作取代）。

onPress可謂是Touchable系列組件的最常用屬性之一，如果要讓視圖響應(yīng)用戶的單擊事件，那么用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>

onLongPress function

當(dāng)用戶長時間按壓組件(長按效果)的時候調(diào)用該方法。

onLongPress也是Touchable系列組件的最常用的屬性之一，通常用于響應(yīng)長按的事件，如長按列表彈出刪除對話框等。

接下來，使用onLongPress屬性來響應(yīng)用戶的長按事件。

<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>

我們在上面例子的基礎(chǔ)上為Touchable設(shè)置了onLongPress屬性，當(dāng)用戶長時間按壓按鈕是會彈出一個對話框。

當(dāng)我們沒有對Touchable組件設(shè)置onLongPress屬性，而設(shè)置了onPress屬性的時候，我們長按按鈕之后會回調(diào)onPress方法。另外，我們也可以通過delayLongPress方法來這設(shè)置從onPressIn被回調(diào)開始，到onLongPress被調(diào)用的延遲。

disabled bool

如果設(shè)為true，則禁止此組件的一切交互。

disabled也是Touchable系列組件的最常用的屬性之一，通常用于禁止按鈕響應(yīng)用戶的點擊事件，比如，當(dāng)用戶單擊按鈕進行登錄時，需要進行網(wǎng)絡(luò)請求，在請求操作完成之前，如果用戶多次單擊登錄按鈕，我們通常不希望發(fā)起多次登錄請求，這個時候就可以借助disabled屬性來禁用按鈕的交互。

接下來呢，我們就應(yīng)用模擬用戶登錄的例子來介紹一下disabled的使用。

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

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

在上面例子中我們模擬了用戶登錄的效果，默認(rèn)狀態(tài)下按鈕是可以響應(yīng)用戶點擊事件的，在正在登錄過程中,我們通過disabled屬性來禁用按鈕，這時無論是單擊還是長按按鈕都是沒有任何響應(yīng)的，在停隔2s后，我們又將按鈕解除禁用，這時按鈕又可以重新響應(yīng)用戶的點擊事件了。

當(dāng)用戶長時間按壓按鈕時會彈出一個對話框。

想禁用按鈕，但是通過設(shè)置Touchable的accessible屬性為false沒有效果，這是因為即使accessible為false的情況下，Touchable組件還是可以響應(yīng)交互事件的，要想禁用Touchable的交互事件，只能通過disabled屬性。

onPressIn function與onPressOut function
這兩個方法分別是當(dāng)用戶開始點擊按鈕時與點擊結(jié)束后被回調(diào)。

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

<TouchableWithoutFeedback
    onPressIn={()=> {
        this.setState({text:'觸摸開始',startTime:new Date().getTime()})
    }}
    onPressOut={()=>{
        this.setState({text:'觸摸結(jié)束,持續(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>

在上述例子中我們記錄下用戶單擊按鈕的時間戳，當(dāng)單擊結(jié)束后我們獲取當(dāng)前時間減去剛單擊時的時間，它們的差值就是用戶單擊按鈕所用的時間了。

另外，我們也可以通過delayPressIn與delayPressOut兩個方法來分別設(shè)置，從用戶點擊按鈕到onPressIn被回調(diào)的延時與從點擊結(jié)束到onPressOut被回調(diào)時的延時。

三、TouchableHighlight 使用詳解

TouchableHighlight是Touchable系列組件中比較常用的一個，它是在TouchableWithoutFeedback的基礎(chǔ)上添加了一些UI上的擴展，既當(dāng)手指按下的時候，該視圖的不透明度會降低，同時會看到相應(yīng)的顏色(視圖變暗或者變亮)，從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來設(shè)置TouchableHighlight被按下時的不透明度，從TouchableHighlight的源碼中可以看出，它的默認(rèn)不透明度為0.85，可以根據(jù)需要進行調(diào)節(jié)。

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

underlayColor color

可以通過underlayColor屬性來設(shè)置TouchableHighlight被按下去的顏色，默認(rèn)狀態(tài)下為black黑色。

onHideUnderlay function

當(dāng)襯底(也就是上文講到的最外層的View)被隱藏的時候調(diào)用。

通常情況下，當(dāng)手指結(jié)束點擊時襯底會被隱藏。

onShowUnderlay function

當(dāng)襯底(也就是上文講到的最外層的View)顯示的時候調(diào)用。

通常情況下，當(dāng)手指剛開始點擊時襯底會顯示。

style View#style

因為TouchableHighlight的最外層個添加了一個View，所以我們可以設(shè)置這個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>

四、TouchableOpacity 使用詳解

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

TouchableOpacity所擴展出來的屬性

在擴展屬性方面TouchableOpacity相比TouchableHighlight，就少了很多，只有一個activeOpacity，來設(shè)置按下去的透明度。

activeOpacity number
同TouchableHighlight的activeOpacity。

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

五、TouchableNativeFeedback 使用詳解

為了支持Android5.0新增的觸控反饋，React Native加入了TouchableNativeFeedback組件，TouchableNativeFeedback在TouchableWithoutFeedback所支持的屬性的基礎(chǔ)上增加了按下去的水波紋效果?？梢酝ㄟ^background屬性來自定義原生觸摸操作反饋的背景。

TouchableNativeFeedback所擴展出來的屬性

background backgroundPropType

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

TouchableNativeFeedback.SelectableBackground() - 會創(chuàng)建一個對象，表示安卓主題默認(rèn)的對于被選中對象的背景。

TouchableNativeFeedback.SelectableBackgroundBorderless() - 會創(chuàng)建一個對象，表示安卓主題默認(rèn)的對于被選中的無邊框?qū)ο蟮谋尘啊Ｖ辉贏ndroid API level 21+適用。

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

<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>

以上就是React Native按鈕Touchable系列組件使用教程示例的詳細(xì)內(nèi)容，更多關(guān)于React Native按鈕Touchable組件的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論