#javascript #reactjs #react-native
#javascript #reactjs #react-native
Вопрос:
Я нахожусь на заключительной стадии моего приложения, теперь у меня проблема с многократным выполнением (когда пользователь нажимает несколько раз) с 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;
Комментарии:
1. Почему вы хотите предотвратить многократное выполнение? это из-за какого-то асинхронного действия, которое вы выполняете?
2. Вы можете оформить
debounceTime
operator вrxjs
. Это то, что я использовал, по крайней мере, для аналогичного случая.3. @HendEl-Sahli Я обновил свой вопрос. @Javascriptonian Я уже создал свой компонент debounce, но я хочу сделать это путем прямого изменения
TouchableOpacity
, как я описал выше.4. @Nitish Я мог бы предложить решение, которое требует изменения в вашем
import
заявлении вашегоTouchableOpacity
компонента в каждом месте вашего кода, который его использует5. @HendEl-Sahli Вы имеете в виду, что, поскольку я создал вышеупомянутый компонент, просто импортируйте его и замените на
TouchableOpacity
все места, где я использую, или у вас есть другой способ?