Android端React Native中TouchableOpacity onPress重复触发问题

Let's break down the issue and walk through solutions step by step.

Why the Duplicate Triggers Happen #

Looking at your CustomButton component, there are a couple of potential culprits for the 4x onPress fire when using keyboard/D-Pad input:

• Nested Component Event Conflicts: You’ve wrapped a TouchableOpacity inside an Animated.View, and added onFocus/onBlur handlers directly to the TouchableOpacity. When navigating with a D-Pad or keyboard, focus events can fire multiple times (e.g., initial focus, focus shifts from animation state changes) which might be triggering unintended press events indirectly.
• TouchableOpacity's Keyboard Navigation Limitations: The older TouchableOpacity component doesn’t handle keyboard/D-Pad input as reliably as the modern Pressable component. It may interpret focus + key press combinations as multiple press events.

Solution 1: Replace TouchableOpacity with Pressable (Recommended) #

Pressable is designed to handle all input types (touch, mouse, keyboard) consistently. Let’s refactor your CustomButton to use Pressable with proper animation handling:

import React, { Component } from 'react';
import { View, Text, Pressable, Animated, Easing } from 'react-native';

export default class CustomButton extends Component {
  constructor(props) {
    super(props);
    this.state = { loaded: false };
    this.animatedValue = new Animated.Value(1);
  }

  componentDidMount() {
    this.setState({ loaded: true });
  }

  handlePressIn = () => {
    Animated.spring(this.animatedValue, {
      toValue: this.props.toValue,
      useNativeDriver: true, // Boosts animation performance
    }).start();
  };

  handlePressOut = () => {
    Animated.spring(this.animatedValue, {
      toValue: 1,
      friction: 3,
      tension: 40,
      useNativeDriver: true,
    }).start();
  };

  render() {
    const animatedStyle = {
      transform: [{ scale: this.state.loaded ? this.animatedValue : 1 }],
    };

    return (
      <Animated.View style={animatedStyle}>
        <Pressable
          onPress={this.props.onPress}
          style={this.props.buttonStyle}
          onPressIn={this.handlePressIn}
          onPressOut={this.handlePressOut}
          android_disableSound={true} // Optional: Disable system press sound if needed
        >
          <View style={this.props.buttonWrapper}>
            <Text style={this.props.buttonLabel}>{this.props.buttonName}</Text>
          </View>
        </Pressable>
      </Animated.View>
    );
  }
}

Key improvements here:

• Swapped TouchableOpacity for Pressable, using onPressIn/onPressOut instead of onFocus/onBlur—this aligns with how press events work across all input types.
• Added useNativeDriver: true to animations for smoother performance and to avoid blocking the JS thread.
• Removed redundant bind calls by using class arrow functions.

Solution 2: Debouncing as a Quick Fix #

If you need a faster workaround without full refactoring, using lodash’s debounce is absolutely suitable. It won’t cause meaningful performance issues—lodash’s debounce is highly optimized, and the overhead is negligible for this use case.

Here’s how to implement it in your App.js:

First, import debounce:

import { debounce } from 'lodash';

Then wrap your quantity handlers (and add cleanup to avoid memory leaks):

constructor(props) {
  super(props);
  this.state = { selectedQty: 0 };
  
  // Debounce handlers with a 100ms delay (balances responsiveness and duplicate prevention)
  this.increaseQty = debounce(() => {
    this.setState(prevState => ({ selectedQty: prevState.selectedQty + 1 }));
  }, 100);
  
  this.decreaseQty = debounce(() => {
    this.setState(prevState => ({ 
      selectedQty: prevState.selectedQty > 0 ? prevState.selectedQty - 1 : 0 
    }));
  }, 100);
}

componentWillUnmount() {
  // Cancel pending debounces to avoid memory leaks
  this.increaseQty.cancel();
  this.decreaseQty.cancel();
}

Use the debounced handlers in your component as before:

<CustomButton 
  buttonStyle={styles.qtyButton} 
  buttonWrapper={styles.buttonWrapper} 
  buttonLabel={styles.buttonLabel} 
  buttonName="-" 
  toValue={1.1} 
  onPress={this.decreaseQty} 
/>

Debounce Performance Impact #

Debouncing adds minimal overhead (just tracking timers), which you won’t notice in your app. The key is setting an appropriate delay—100-200ms is ideal for button presses, as it stops accidental repeats without making the button feel unresponsive.

Bonus: Quick Checks to Rule Out Other Issues #

• Try removing activeOpacity={1} from your original TouchableOpacity—this prop can sometimes alter event handling logic for keyboard input.
• Ensure your ScrollView doesn’t have props like keyboardShouldPersistTaps='always' that might interfere with focus behavior.

内容的提问来源于stack exchange，提问作者Mohamed Ahmed