一、前言

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

為了讓視圖能夠響應(yīng)用戶的點(diǎn)擊事件，需要借助Touchablexxx組件來(lái)包裹視圖。為什么說(shuō)是Touchablexxx呢，因?yàn)樗恢皇且粋€(gè)組件，而是一組組件，以下四個(gè)組件都可以用來(lái)包裹視圖來(lái)響應(yīng)用戶的點(diǎn)擊事件。

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

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

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,

因?yàn)門ouchableWithoutFeedback有其它三個(gè)組件的共同屬性，所以我們先來(lái)了解一下TouchableWithoutFeedback。

二、TouchableWithoutFeedback 使用詳解

TouchableWithoutFeedback，Touchable系列組件中最基本的一個(gè)組件，只響應(yīng)用戶的點(diǎn)擊事件不會(huì)做任何UI上的改變，在使用的過(guò)程中需要特別留意。

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

接下來(lái)，讓我們來(lái)看一下TouchableWithoutFeedback常用屬性：

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

onPress function

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

onPress可謂是Touchable系列組件的最常用屬性之一，如果要讓視圖響應(yīng)用戶的單擊事件，那么用onPress就可以了。

接下來(lái)，使用onPress屬性來(lái)實(shí)現(xiàn)一個(gè)統(tǒng)計(jì)按鈕單擊次數(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)用戶長(zhǎng)時(shí)間按壓組件(長(zhǎng)按效果)的時(shí)候調(diào)用該方法。

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

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

<TouchableWithoutFeedback
    onPress={()=> {
        this.setState({count: this.state.count + 1})
    }}
    onLongPress={()=> {
        this.setState({countLong: this.state.countLong + 1})
        Alert.alert(
            '提示',
            '確定要?jiǎng)h除嗎?',
            [
                {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}>您長(zhǎng)按了:{this.state.countLong}次</Text>

我們?cè)谏厦胬拥幕A(chǔ)上為Touchable設(shè)置了onLongPress屬性，當(dāng)用戶長(zhǎng)時(shí)間按壓按鈕是會(huì)彈出一個(gè)對(duì)話框。

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

disabled bool

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

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

接下來(lái)呢，我們就應(yīng)用模擬用戶登錄的例子來(lái)介紹一下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)用戶點(diǎn)擊事件的，在正在登錄過(guò)程中,我們通過(guò)disabled屬性來(lái)禁用按鈕，這時(shí)無(wú)論是單擊還是長(zhǎng)按按鈕都是沒(méi)有任何響應(yīng)的，在停隔2s后，我們又將按鈕解除禁用，這時(shí)按鈕又可以重新響應(yīng)用戶的點(diǎn)擊事件了。

當(dāng)用戶長(zhǎng)時(shí)間按壓按鈕時(shí)會(huì)彈出一個(gè)對(duì)話框。

想禁用按鈕，但是通過(guò)設(shè)置Touchable的accessible屬性為false沒(méi)有效果，這是因?yàn)榧词筧ccessible為false的情況下，Touchable組件還是可以響應(yīng)交互事件的，要想禁用Touchable的交互事件，只能通過(guò)disabled屬性。

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

通過(guò)這兩個(gè)方法我們可以計(jì)算出用戶單擊按鈕所用的時(shí)長(zhǎng)， 另外也可以做一些其它個(gè)性化的功能?，F(xiàn)在我們將通過(guò)一個(gè)例子來(lái)計(jì)算出用戶點(diǎn)擊按鈕所用的時(shí)長(zhǎng)。

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

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

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

三、TouchableHighlight 使用詳解

TouchableHighlight是Touchable系列組件中比較常用的一個(gè)，它是在TouchableWithoutFeedback的基礎(chǔ)上添加了一些UI上的擴(kuò)展，既當(dāng)手指按下的時(shí)候，該視圖的不透明度會(huì)降低，同時(shí)會(huì)看到相應(yīng)的顏色(視圖變暗或者變亮)，從TouchableHighlight源碼中我們可以看出，其實(shí)這個(gè)顏色就是在TouchableHighlight的最外層添加了一個(gè)View，通過(guò)改變這個(gè)View的背景色及透明度來(lái)達(dá)到這一效果。

  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所擴(kuò)展出來(lái)的屬性

activeOpacity number

我們可以通過(guò)activeOpacity來(lái)設(shè)置TouchableHighlight被按下時(shí)的不透明度，從TouchableHighlight的源碼中可以看出，它的默認(rèn)不透明度為0.85，可以根據(jù)需要進(jìn)行調(diào)節(jié)。

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

underlayColor color

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

onHideUnderlay function

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

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

onShowUnderlay function

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

通常情況下，當(dāng)手指剛開(kāi)始點(diǎn)擊時(shí)襯底會(huì)顯示。

style View#style

因?yàn)門ouchableHighlight的最外層個(gè)添加了一個(gè)View，所以我們可以設(shè)置這個(gè)View的樣式來(lái)做出一個(gè)形形色色的按鈕。

接下來(lái)，我們通過(guò)一個(gè)例子來(lái)看一下這些屬性的使用。

<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系列組件中比較常用的一個(gè)，它是在TouchableWithoutFeedback的基礎(chǔ)上添加了一些UI上的擴(kuò)展，但這些擴(kuò)展相比TouchableHighlight少了一個(gè)額外的顏色變化。它是通過(guò)在按下去改變視圖的不透明度來(lái)表示按鈕被點(diǎn)擊。

TouchableOpacity所擴(kuò)展出來(lái)的屬性

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

activeOpacity number
同TouchableHighlight的activeOpacity。

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

五、TouchableNativeFeedback 使用詳解

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

TouchableNativeFeedback所擴(kuò)展出來(lái)的屬性

background backgroundPropType

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

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

TouchableNativeFeedback.SelectableBackgroundBorderless() - 會(huì)創(chuàng)建一個(gè)對(duì)象，表示安卓主題默認(rèn)的對(duì)于被選中的無(wú)邊框?qū)ο蟮谋尘?。只在Android API level 21+適用。

TouchableNativeFeedback.Ripple(color, borderless) - 會(huì)創(chuàng)建一個(gè)對(duì)象，當(dāng)按鈕被按下時(shí)產(chǎn)生一個(gè)漣漪狀的背景，你可以通過(guò)color參數(shù)來(lái)指定顏色，如果參數(shù)borderless是true，那么漣漪還會(huì)渲染到視圖的范圍之外。（參見(jiàn)原生actionbar buttons作為該效果的一個(gè)例子）。這個(gè)背景類型只在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組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論