React Native 防重复提交实现方法

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

{/**按钮防重复提交组件*/}
export default class Touch extends Component {
  
  ToPress =()=>{
    const {onPress} = this.props;
    if (this.lastPressed && this.lastPressed + 500 >= Date.now()) {
      return;
    }
    this.lastPressed = Date.now();
    onPress&&onPress()
  }

  render(){
    const {style} = this.props
    return(
      <TouchableOpacity
        activeOpacity={0.85}
        style={style?style:{}}
        onPress={this.ToPress}
        {...this.props}
      >
        {this.props.children}

      </TouchableOpacity>
    )
  }
}
//使用例子
<Touch
  style={{}}
  onPress={()=>{}}
>
  {/*自己定义的布局*/}
</Touch>

写了一个更加完整的组件,点击查看《react native 防重复点击组件》

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值