React Native问题：老旧低配Android设备弹窗中TouchableOpacity onPress()不触发

这种问题本质是老旧Android设备性能不足，导致TouchableOpacity依赖的onPressIn+onPressOut完整触摸生命周期出现丢帧或事件丢失，进而无法触发onPress。以下是几种实用的解决办法：

• 替换为Pressable组件
  Pressable是React Native官方推荐的更底层、稳定的触摸交互组件，它的事件触发逻辑不依赖透明度动画的执行，在低性能设备上表现更可靠。示例代码：

  import { Pressable, Text, StyleSheet } from 'react-native';
  
  const CustomButton = () => {
    return (
      <Pressable
        onPress={() => {
          // 你的点击逻辑
          console.log('点击触发');
        }}
        style={({ pressed }) => [
          styles.button,
          { opacity: pressed ? 0.6 : 1 }
        ]}
      >
        <Text style={styles.buttonText}>点击按钮</Text>
      </Pressable>
    );
  };
  
  const styles = StyleSheet.create({
    button: {
      padding: 12,
      backgroundColor: '#2196F3',
      borderRadius: 4,
    },
    buttonText: {
      color: '#fff',
      textAlign: 'center',
    }
  });
  

• 关闭TouchableOpacity的原生动画驱动
  如果不想替换组件，可以关闭useNativeDriver，改用JS端控制透明度动画，减少老旧设备的动画线程压力，避免因动画阻塞导致事件丢失：

  import { TouchableOpacity, Text } from 'react-native';
  
  <TouchableOpacity
    onPress={() => console.log('点击触发')}
    activeOpacity={0.6}
    useNativeDriver={false} // 禁用原生驱动，降低性能消耗
  >
    <Text>点击按钮</Text>
  </TouchableOpacity>
  

• 手动通过onPressIn/onPressOut模拟onPress
  既然onPressIn始终能触发，可以在onPressOut中判断触摸时长，手动触发点击逻辑，规避原生组件的事件丢失问题：

  import { TouchableOpacity, Text } from 'react-native';
  import { useState } from 'react';
  
  const CustomButton = () => {
    const [pressStart, setPressStart] = useState(null);
  
    const handlePressIn = () => {
      setPressStart(Date.now());
    };
  
    const handlePressOut = () => {
      if (!pressStart) return;
      const pressDuration = Date.now() - pressStart;
      // 过滤长按（这里设500ms阈值，可根据需求调整）
      if (pressDuration < 500) {
        // 执行原本的onPress逻辑
        console.log('点击触发');
      }
      setPressStart(null);
    };
  
    return (
      <TouchableOpacity
        onPressIn={handlePressIn}
        onPressOut={handlePressOut}
        activeOpacity={0.6}
      >
        <Text>点击按钮</Text>
      </TouchableOpacity>
    );
  };
  

• 优化页面整体性能
  老旧设备上页面嵌套过深、频繁重渲染也会导致触摸事件处理延迟：

  • 使用React.memo包裹无必要重渲染的组件
  • 用useCallback缓存事件处理函数，避免因函数引用变化触发重渲染
  • 简化页面视图层级，减少不必要的嵌套

内容的提问来源于stack exchange，提问作者Avishay Matayev