React Native拖拽删除Demo(触摸事件)

最新推荐文章于 2025-07-18 11:21:03 发布

孙先森i

最新推荐文章于 2025-07-18 11:21:03 发布

阅读量670

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React-Native开发记录文章标签： React Native React Native触摸事件拖拽删除

本文链接：https://blog.youkuaiyun.com/qq_38356174/article/details/98337326

React-Native开发记录专栏收录该内容

13 篇文章

订阅专栏

本文通过一个示例展示了ReactNative中触摸事件的应用，包括手指移动和释放时元素位置的更新，以及元素在特定条件下的删除与复现。利用View组件的onResponderMove和onResponderRelease函数，实现了红球跟随触摸移动并返回原位的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近学习了下ReactNative中的触摸事件，写个例子实践一下。

Demo效果：
在这里插入图片描述

当触摸红球时开始触发事件，红球随着手指移动改变位置，松开时回到原位，如果拖入蓝色区域则删除（隐藏），单击左上方按钮红球显示在原位置。

主要是利用了View触摸函数onResponderMove（触摸屏幕并且移动）和onResponderRelease（出触摸事件结束函数）实现。

代码如下：

var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');
var os = Platform.OS; //ios  or  android

export class OnTouchPage extends Component {

    static navigationOptions=({navigation, screenProps})=>{
        return{
            header:null,
        }
    }

    constructor(props){
        super(props)
        this.state={
            m_top:'40%',
            m_left:width-40,
            isShow:false,
            isDelete:false
        }
    }

    componentWillMount(evt, gestureState){
        this.createPanResponder();
    }

    render(){
        return(
            <View
                style={[styles.container,{backgroundColor:'#fff'}]}
            >
                <TouchableOpacity
                    style={{width:200,height:100,justifyContent: 'center',alignItems: 'center',marginTop:50,marginLeft:50,borderWidth:2,backgroundColor:'#f4f4f4'}}
                    onPress={()=>{
                        this.setState(
                            {
                                m_top:'40%',
                                m_left:width-40,
                                isDelete:false
                            }
                        )
                    }}>
                    <Text style={{fontSize:20,fontWeight: 'bold'}}>AddGlobule</Text>
                </TouchableOpacity>
                {
                    !this.state.isDelete?
                        <View
                            {...this.panResponder.panHandlers}
                            onResponderMove={this._onResponderMove}
                            onResponderRelease={this._onResponderRelease}
                            style={{position:'absolute',top:this.state.m_top,left:this.state.m_left,width:50,height:50,backgroundColor:'red',borderRadius:50}}></View>:
                        null
                }

                {
                    this.state.isShow?
                        <View style = {{position:'absolute',top:height-200,left:width-200,borderRadius:400,height:400,width:400,backgroundColor:'blue'}}/>:
                        null
                }
            </View>
        )
    }


    /**
     * 创建手势
     */
    createPanResponder = () => {
        this.panResponder = PanResponder.create({
            onMoveShouldSetPanResponder: () => Platform.OS === 'android',
        });
    };

    /**
     *  触摸屏幕并且移动时
     */
    _onResponderMove = (e) =>{
        let pageX = e.nativeEvent.pageX;
        let pageY = e.nativeEvent.pageY;
        if(this.state.isDelete){
            this.setState({
                m_top:pageY-15,
                m_left:pageX-15,
                isShow:false
            })
        }else {
            this.setState({
                m_top:pageY-15,
                m_left:pageX-15,
                isShow:true
            })
        }

    }

    /**
     * 松开屏幕 触摸事件结束时
     */
    _onResponderRelease = (e) =>{
        let smallY = this.state.m_top;
        let smallX = this.state.m_left;
        if(smallY>=height-200&&smallX>=width-200){
            this.setState({
                m_top:'40%',
                m_left:width-40,
                isDelete:true,
                isShow:false
            })
        }else {
            this.setState(
                {
                    m_top:'40%',
                    m_left:width-40,
                    isShow:false
                }
            )
        }

    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    center: {
        justifyContent: 'center',
        alignItems: 'center',
    },

});