react-native Touchable介紹和使用

本文轉載自   https://www.jianshu.com/p/a840d2e9a312

 

一 前言

   1.React Native 中，手勢監聽的兩種方式

        ①.標籤中有許多 on 開頭的屬性

           在不同標籤上有的屬性是不能做出相應的響應的，比如下面的例子,同樣的屬性，在View上不可使用，在Text上就可以

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 實例化一個View */}
                    <View style={styles.testViewStyle} onPressIn={() => {alert('點擊')}}>
                    </View>
                    {/* 實例化一個Text */}
                    <Text style={styles.testTextStyle} onPress={() => {alert('點擊')}}></Text>
                </View>
            );
        }
    });

    var styles = StyleSheet.create({
        container: {
            flex:1,
            backgroundColor:'gray'
        },

        testViewStyle: {
            // 設置尺寸
            width:width,
            height:40,
            marginTop:20,
            // 設置背景顏色
            backgroundColor:'red'
        },

        testTextStyle: {
            // 設置尺寸
            width:width,
            height:40,
            marginTop:20,
            // 設置背景顏色
            backgroundColor:'yellow'
        }
    });

效果：

 

     ②.爲了避免上面問題，在開發中推薦使用 Touchable 的方式來實現用戶點擊事件的包裝

    import {
        AppRegistry,
        StyleSheet,
        Text,
        View,
        TouchableOpacity
    } from 'react-native';

效果：

完成上面的步驟我們就可以使用Touchable來包裝我們的標籤了，格式如下

    <TouchableOpacity Touchable屬性>
        <需要包裝的標籤></需要包裝的標籤>
    </TouchableOpacity>
    

這裏就來將上面的方式更改一下，從中可以看出，不僅可以讓標籤有接收觸摸事件能力，還出現了不透明的效果（類似於高亮的效果）

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 包裝View */}
                    <TouchableOpacity
                        onPress={() => {alert('點擊了View')}}
            >
                    <View style={styles.testViewStyle}></View>
                    </TouchableOpacity>
                    {/* 包裝Text */}
                    <TouchableOpacity
                        onPress={() => {alert('點擊了Text')}}
            >
                        <Text style={styles.testTextStyle}></Text>
                    </TouchableOpacity>
                </View>
            );
        }
    });

 

 

二  Touchable 常用屬性介紹

  1.Touchable 中包含兩種觸摸類別：

      ①TouchableHighlight(高亮觸摸)

            當手指點下的時候，該視圖的不透明度會進行降低同時會看到相應的顏色（原理：在底層新添加一個View）,需要注意的是TouchableHighlight只能進行一層嵌套，不能多層嵌套，如果需要多層嵌套就要用View包裝

• TouchableWithoutFeedback：這個屬性說明了這個組件繼承了所有TouchableWithoutFeedback的屬性
• disabled：如果爲true,則禁止此組件的一切交互
• hitSlop {top: number, left: number, bottom: number, right: number}：這一屬性定義了按鈕的外延範圍。這一範圍也會使pressRetentionOffset（見下文）變得更大。 注意：觸摸範圍不會超過父視圖的邊界，也不會影響原先和本組件層疊的視圖（保留原先的觸摸優先級）
• onLayout{nativeEvent: {layout: {x, y, width, height}}}：當加載或者佈局改變的時候被調用
• onLongPress：長按
• onPress：點擊
• onPressIn：按住
• onPressOut：擡起
• pressRetentionOffset {top: number, left: number, bottom: number, right: number}：在當前視圖不能滾動的前提下指定這個屬性，可以決定當手指移開多遠距離之後，會不再激活按鈕。但如果手指再次移回範圍內，按鈕會被再次激活。只要視圖不能滾動，你可以來回多次這樣的操作。確保你傳入一個常量來減少內存分配
• underlayColor：當觸摸或者點擊控件的時候顯示出的顏色
• style：可以設置控件的風格演示，該風格演示可以參考View組件的style
• onShowUnderlay：當底層顯示的時候調用
• onHideUnderlay：當底層被隱藏的時候調用
• activeOpacity：設置組件在進行觸摸時候，顯示的不透明度（取值：0 ~ 1）                                                 

     ②TouchableOpacity(不透明觸摸)

      該組件封裝了響應觸摸事件，當點擊按下的時候，該組件的透明度會降低

• activeOpacity：設置當用戶觸摸的時候，組件的透明度（取值：0 ~ 1）
• TouchableWithoutFeedback：這個屬性說明了這個組件繼承了所有TouchableWithoutFeedback的屬性
• disabled：如果爲true,則禁止此組件的一切交互
• hitSlop {top: number, left: number, bottom: number, right: number}：這一屬性定義了按鈕的外延範圍。這一範圍也會使pressRetentionOffset（見下文）變得更大。 注意：觸摸範圍不會超過父視圖的邊界，也不會影響原先和本組件層疊的視圖（保留原先的觸摸優先級）
• onLayout{nativeEvent: {layout: {x, y, width, height}}}：當加載或者佈局改變的時候被調用
• onLongPress：長按
• onPress：點擊
• onPressIn：按住
• onPressOut：擡起
• pressRetentionOffset {top: number, left: number, bottom: number, right: number}：在當前視圖不能滾動的前提下指定這個屬性，可以決定當手指移開多遠距離之後，會不再激活按鈕。但如果手指再次移回範圍內，按鈕會被再次激活。只要視圖不能滾動，你可以來回多次這樣的操作。確保你傳入一個常量來減少內存分配

2.常見的觸摸事件演示

---

       ①.TouchableHighlight（高亮觸摸）

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 點擊 */}
                    <TouchableHighlight
                        onPress={() => {alert('點擊')}}
                        underlayColor={'red'}
                    >
                        <View style={styles.testViewStyle}></View>
                    </TouchableHighlight>

                    {/* 按下 */}
                    <TouchableHighlight
                        onPressIn={() => {alert('按下')}}
                        underlayColor={'orange'}
                    >
                        <View style={styles.testViewStyle}></View>
                    </TouchableHighlight>

                    {/* 擡起 */}
                    <TouchableHighlight
                        onPressOut={() => {alert('擡起')}}
                        underlayColor={'blue'}
                    >
                        <View style={styles.testViewStyle}></View>
                    </TouchableHighlight>

                    {/* 長按 */}
                    <TouchableHighlight
                        onLongPress={() => {alert('長按')}}
                        underlayColor={'yellow'}
                    >
                        <View style={styles.testViewStyle}></View>
                    </TouchableHighlight>
                </View>
            );
        }
    });

效果：

     ②TouchableOpacity（不透明觸摸）

 

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 點擊 */}
                    <TouchableOpacity
                        onPress={() => {alert('點擊')}}
                    >
                        <View style={styles.testViewStyle}></View>
                    </TouchableOpacity>

                    {/* 按下 */}
                    <TouchableOpacity
                        onPressIn={() => {alert('按下')}}
                    >
                        <View style={styles.testViewStyle}></View>
                    </TouchableOpacity>

                    {/* 擡起 */}
                    <TouchableOpacity
                        onPressOut={() => {alert('擡起')}}
                    >
                        <View style={styles.testViewStyle}></View>
                    </TouchableOpacity>

                    {/* 長按 */}
                    <TouchableOpacity
                        onLongPress={() => {alert('長按')}}
                    >
                        <View style={styles.testViewStyle}></View>
                    </TouchableOpacity>
                </View>
            );
        }
    });

效果：

 

鏈接：https://www.jianshu.com/p/a840d2e9a312