react-native Touchable介绍和使用_reativenative touchable

作者：小惠珠哦 | 2024-07-02 23:22:50

踩

reativenative 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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小惠珠哦/article/detail/781240