react native 防重复点击组件

 分享一个防重复点击组件

import React, { PureComponent } from 'react';
import {
  TouchableHighlight,
  TouchableNativeFeedback,
  TouchableWithoutFeedback,
  TouchableOpacity,
  Platform  
} from 'react-native';
import PropTypes from 'prop-types';

const isAndroid = Platform.OS === 'android';

const propTypes = {
  isHighlight: PropTypes.bool,       // 用于使用TouchableHighlight组件
  isNativeFeedback: PropTypes.bool,  // 仅用于安卓平台，设置原生触摸响应效果
  isWithoutFeedback: PropTypes.bool, // 用于使用TouchableWithoutFeedback组件, 不推荐使用
  children: PropTypes.node,
  activeOpacity: PropTypes.number,   // 用于TouchableOpacity和TouchableHighlight组件，设置触摸响应时不透明度
  underlayColor: PropTypes.string,   // 仅用于TouchableHighlight组件，设置触摸响应时底层颜色
  onPress: PropTypes.func.isRequired // 当触摸操作结束时调用, 处理触摸响应事件
};

const defaultProps = {
  isHighlight: false,
  isNativeFeedback: false,
  isWithoutFeedback: false,
  children: null,
  activeOpacity: 0.8,
  underlayColor: '#e6e6e6'
};

const preventDoublePress = {
  lastPressTime: 1,
  onPress(callback) {
    const curTime = new Date().getTime();
    if (curTime - this.lastPressTime > 1000) {
      this.lastPressTime = curTime;
      callback();
    }
  },
};

/**
 * 组件名称：防重复点击触摸组件
 * 注意事项：默认使用TouchableOpacity组件效果
 * */
class Touchable extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
    this.onPreventDoublePress = this.onPreventDoublePress.bind(this);
  }

  /**
   * 防重复点击处理事件
   * */
  onPreventDoublePress() {
    const { onPress } = this.props;
    if (onPress) {
      preventDoublePress.onPress(onPress);
    }
  }

  render() {
    const {
      children,
      isHighlight,
      isNativeFeedback,
      isWithoutFeedback,
      activeOpacity,
      underlayColor
    } = this.props;

    /** TouchableHighlight 触摸底色高亮响应效果 */
    if (isHighlight) {
      return (
        <TouchableHighlight
          {...this.props}
          underlayColor={underlayColor}
          onPress={this.onPreventDoublePress}
        >
          {children}
        </TouchableHighlight>
      );
    }

    /** TouchableNativeFeedback Android原生触摸响应效果 */
    if (isAndroid && isNativeFeedback) {
      return (
        <TouchableNativeFeedback
          {...this.props}
          delayPressIn={0}
          background={TouchableNativeFeedback.SelectableBackground()}
          onPress={this.onPreventDoublePress}
        >
          {children}
        </TouchableNativeFeedback>
      );
    }

    /** TouchableWithoutFeedback 无视觉反馈触摸响应效果, 建议少使用 */
    if (isWithoutFeedback) {
      return (
        <TouchableWithoutFeedback
          {...this.props}
          onPress={this.onPreventDoublePress}
        >
          {children}
        </TouchableWithoutFeedback>
      );
    }

    /** TouchableOpacity Android/IOS双平台默认触摸响应效果 */
    return (
      <TouchableOpacity
        {...this.props}
        activeOpacity={activeOpacity}
        onPress={this.onPreventDoublePress}
      >
        {children}
      </TouchableOpacity>
    );
  }
}

Touchable.propTypes = propTypes;
Touchable.defaultProps = defaultProps;

export default Touchable;