ReactNative-触摸事件

最新推荐文章于 2022-07-19 17:57:58 发布

_RTFSC_

最新推荐文章于 2022-07-19 17:57:58 发布

阅读量2.9k

点赞数

本文链接：https://blog.csdn.net/u014360817/article/details/52410563

版权

React Native 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

在ReactNative好像只有在Text组件中支持触摸事件其默认是不支持触摸事件的ReactNative给我们提供几个API以供组件支持触摸：TouchableOpacity，TouchableHighlight，TouchableNativeFeedback，TouchableWithoutFeedback，
这里使用方法一样只是反馈效果有点差别，这里只演示TouchableOpacity.

经常用到的触摸回调函数：
–onPressIn：点击开始；
–onPressOut：点击结束或者离开；
–onPress：单击事件回调；
–onLongPress：长按事件回调。

使用方法只需将需要使用触摸功能的组件包裹即可

/**
 * Created by gaocai on 16/9/2.
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    TouchableHighlight,
    TouchableNativeFeedback,
    TouchableWithoutFeedback,
} from 'react-native'

class TouchG extends Component {
    render() {
        return (
            <View>
                <TouchableOpacity
                    //当开始按下时调用
                    onPressIn={() => console.log('onPressIn')}
                    //当松开时调用
                    onPressOut={() => console.log('onPressOut')}
                    //当按下时调用
                    onPress={() => console.log('onPress')}
                    //当长按时调用
                    onLongPress={() => console.log('onLogPress')}
                >
                    <View style={{width: 100, height: 100, backgroundColor: 'red'}}/>


                </TouchableOpacity>
                <Text
                    //当开始按下时调用
                    onPressIn={() => console.log('onPressIn')}
                    //当松开时调用
                    onPressOut={() => console.log('onPressOut')}
                    //当按下时调用
                    onPress={() => console.log('onPress')}
                    //当长按时调用
                    onLongPress={() => console.log('onLogPress')}
                >Text支持点击</Text>

            </View>
        )
    }
}

module.exports = TouchG;