Блог

Я нахожусь на заключительной стадии моего приложения, теперь у меня проблема с многократным выполнением (когда пользователь нажимает несколько раз) с TouchableOpacity компонентом react-native, но мне нужно добавить функциональность отмены для каждого TouchableOpacity используемого в моем приложении. Итак, я использовал эту статью medium и создал пользовательский компонент. ниже приведен мой компонент, но в этом случае мне нужно изменить каждый TouchableOpacity на TouchableDebounce .

Итак, мое требование заключается в том, что я хочу добавить промежуточное программное обеспечение или что-то еще, чтобы изменить поведение TouchableOpacity таким образом, мне не нужно вносить изменения в каждый класс моего приложения. Есть ли какой-либо способ сделать это?

 import React from 'react';
import { TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';
import _ from 'lodash';

const TouchableDebounce = props => (
  <TouchableOpacity
    {...props}
    onPress={
      _.debounce(props.onPress, props.debounceTime, props.options)
    }
  >
    {props.children}
  </TouchableOpacity>
);

TouchableDebounce.propTypes = {
  onPress: PropTypes.func.isRequired,
  children: PropTypes.element,
  options: PropTypes.objectOf(PropTypes.any),
  debounceTime: PropTypes.number,
};
TouchableDebounce.defaultProps = {
  children: null,
  options: { 'leading': true, 'trailing': false },
  debounceTime: 500,
};
export default TouchableDebounce;