React Native Android端如何处理多按钮同时按压问题？

原因分析 #

• Android触摸事件拦截机制：TouchableHighlight这类组件会优先消费触摸事件，Android的事件分发逻辑会阻止事件传递到外层View，导致你设置的onTouchStart/onTouchEnd回调无法触发；而iOS的触摸分发允许外层视图同时接收触摸事件，所以可以正常工作。
• Touchable组件的单点设计：Touchable系列组件针对单点交互优化，Android系统在第一个触摸事件被处理后，会阻止后续触摸事件传递到其他组件，无法同时触发多个按钮的触摸回调。

解决方案 #

方案一：移除Touchable组件，直接用View处理触摸 #

如果不需要Touchable的高亮反馈，直接使用View的触摸回调即可，避免事件拦截：

import { View, StyleSheet } from 'react-native';

export default function App() {
  function click1() {
    console.log("click1");
  }

  function click2() {
    console.log("click2"); // 修正原代码拼写错误
  }

  function click1Out() {
    console.log("click1Out");
  }

  function click2Out() {
    console.log("click2Out"); // 修正原代码拼写错误
  }

  return (
    <View style={styles.container}>
      <View 
        style={styles.button}
        onTouchStart={click1} 
        onTouchEnd={click1Out}
        activeOpacity={0.8} // 可选：添加触摸透明度反馈
      />
      <View 
        style={styles.button}
        onTouchStart={click2} 
        onTouchEnd={click2Out}
        activeOpacity={0.8}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  button: {
    width: 100,
    height: 100,
    backgroundColor: '#2196F3',
    borderRadius: 8,
  },
});

方案二：使用expo-gesture-handler处理多点触摸 #

如果需要保留触摸反馈或更复杂的手势逻辑，推荐使用Expo官方的手势处理库，它对多平台多点触摸支持更一致：

1. 安装依赖：

npx expo install expo-gesture-handler

2. 修改代码：

import { View, StyleSheet } from 'react-native';
import { GestureDetector, TouchGesture } from 'expo-gesture-handler';

export default function App() {
  const gesture1 = TouchGesture()
    .onStart(() => console.log("click1"))
    .onEnd(() => console.log("click1Out"));

  const gesture2 = TouchGesture()
    .onStart(() => console.log("click2"))
    .onEnd(() => console.log("click2Out"));

  return (
    <View style={styles.container}>
      <GestureDetector gesture={gesture1}>
        <View style={styles.button} />
      </GestureDetector>
      <GestureDetector gesture={gesture2}>
        <View style={styles.button} />
      </GestureDetector>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  button: {
    width: 100,
    height: 100,
    backgroundColor: '#2196F3',
    borderRadius: 8,
  },
});

注意：原代码中存在拼写错误（clock2/clock2Out应为click2/click2Out），建议修正以避免日志混淆。

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