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 防重复点击组件》

发布了36 篇原创文章 · 获赞 64 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/u010379595/article/details/70915230
今日推荐