React Native TouchableOpacity 封装 防止快速点击 多次响应

不耽误干活,直接上代码,功能比较简单,具体延时时间自己定,还需要啥功能自己改进一下。

import React,{ Component } from "react";
import {TouchableOpacity, View} from "react-native";

class Button extends React.Component<ButtonProps, any> {
    constructor(props) {
        super(props)
        this.state = {
            disabled: true
        }
        this.lastClickTime=0
    }

    onPress () {
        const clickTime = Date.now()
        if (!this.lastClickTime || Math.abs(this.lastClickTime - clickTime) > 350) {  //350的时间可以延长,根据需要改变
            this.lastClickTime = clickTime
            if(this.props.onPress){
                this.props.onPress()
            }else{
                return ''
            }

        }
    }

    render() {
        return (
            <TouchableOpacity
                onPress={this.onPress.bind(this)}
                activeOpacity={this.props.activeOpacity || 0.85}
                style={this.props.style}
                disabled={this.props.disabled}
            >
                {this.props.children}
            </TouchableOpacity>)
    }
}

export default Button

猜你喜欢

转载自blog.csdn.net/xxlyzgt/article/details/81021916