1. 程式人生 > >React-Native開發四 React Native 的Touchable元件

React-Native開發四 React Native 的Touchable元件

1 Touchable元件簡介

Touchable元件是RN的按鈕元件,一共有四大類
TouchableWithoutFeedback:不帶任何反饋的可觸控元件
TouchableHighlight:在TouchableWithoutFeedback的基礎上添加了當按下時背景會變暗的效果。
TouchableOpacity:相比TouchableHighlight在按下去會使背景變暗的效果,TouchableOpacity會在使用者手指按下時降低按鈕的透明度,而不會改變背景的顏色。
TouchableNativeFeedback:在Android上還可以使用TouchableNativeFeedback,它會在使用者手指按下時形成類似水波紋的視覺效果。注意,此元件只支援Android。

2 Touchable元件使用

Touchable元件主要用作按鈕使用,可以處理一下事件
1 onPress function
當觸控操作結束時呼叫,但如果被取消了則不呼叫(譬如響應者被一個滾動操作取代),一般可用作點選事件

    render(){
        return(
            <View style={styles.container}>
                <TouchableOpacity onPress={this._onPress.bind(this)} }>
                    <Text
>
onPress</Text> </TouchableOpacity> </View> ); } _onPress(){ console.log("onPress"); }

2 onLongPress function
長按事件,長按按鈕時觸發

    <TouchableOpacity onLongPress={this._onLongPress.bind(this)}>
         <Text>onLongPress</Text
>
</TouchableOpacity> _onLongPress(){ console.log("onLongPress"); }

3 disabled bool
禁止使能,長用於禁止按下等操作,是Touchable元件的屬性之一

                <TouchableOpacity disabled={true}>
                    <Text>無法點選</Text>
                </TouchableOpacity>

4 onPressIn function
表示使用者點選時開始按下時,類似於Android中的Action_down事件

5 onPressOut function
表示使用者點選時將要結束時,類似於Android中的Action_up事件

onPressIn 與onPressOut結合可以計算使用者按下的時間。

    <TouchableOpacity onPressIn={this._pressIn.bind(this)} onPressOut={this._pressOut.bind(this)}>
          <Text>測試按下的時間</Text>
    </TouchableOpacity>

    _pressIn(){
        console.log("pressIn");
    }

    _pressOut(){
        console.log("pressOut");
    }