如何在 Android 上检测 React Native 中的同时触摸？答案

【问题标题】：How to detect simultaneous touches in React Native on Android?如何在 Android 上检测 React Native 中的同时触摸？
【发布时间】：2022-06-16 03:16:02
【问题描述】：

我正在开发一个需要处理同时触摸（通常最多 2 或 3 次）的应用程序。这样用户就可以同时按下多个按钮。问题在于，在 Android 上，当用户按下其中一个按钮（不需要 RN 的 <Button>）时，只要按住第一个按钮，他们就无法按下其他按钮。首先，我尝试了 RN 的 <Pressable>，以这样的方式接收 PressIn 和 PressOut 事件：


const Key = ({label, ...}): Node => {
  const [hold, setHold] = useState(false);
  return (
    <Pressable
      onPressIn={...}
      onPressOut={...}
      style={hold ? styles.keyHold : styles.keyUnhold}
    >
      <Text>{label}</Text>
    </Pressable>
  );
};


const Keyboard = ({...}): Node => {
  //...
  return (
    <FlatList
      data={data}
      renderItem={({item}) => {
        const {label, name} = item;
        return <Key title={label} ... />;
      }}
    />
  );
};

它有上述问题。后来我在 StackOverflow(React Native - onTouchStart vs PanResponder for multiple touches per second How do I enable touch on multiple buttons simultaneously in react native?How to detect simultaneous onPress events in react native?) 上找到了很多答案，我尝试用onTouchStart/onTouchEnd 和<View> 替换<Pressable> 和onPressIn/onPressOut。问题仍然存在，除了当按住一个按钮（使用<View> 构造）并尝试按下另一个按钮时，第一个按钮被释放并且屏幕上的任何触摸都会触发第一个按钮（仍然是物理按住）。

已发布问题的许多答案和 cmets 建议使用 PanResponder，但通过闪避我找不到任何使用 PanResponder 实现我想要的目标的示例。

所以问题是：如何在 RN 中实现这一点？我应该使用PanResponder 吗？如果是的话，一个关于如何做到这一点的例子对我真的很有帮助。或者也许还有其他我不知道的实现方式？

（我在运行 7.1 的真实 Android 设备上使用 RN 0.66）

【问题讨论】：

你想达到什么目的？当您说“当用户点击按钮时，他无法点击其他地方” - 这是否意味着您正在寻找多次点击功能，以便用户可以同时点击/按下多个元素？
是的，我需要同时为多个元素/按钮处理多个点击。我已经编辑了问题以澄清这一点。

标签： android react-native

【解决方案1】：

这对元素 Pressable 或 Touchable 不起作用，您可以将元素 View 与事件 onTouchStart 和 onTouchEnd 一起使用

  <View>
               <View onTouchStart={onPressInFirst} onTouchEnd={onPressOutFirst}>
                  <Text>BUTTON 1</Text>
                </View>
                <View onTouchStart={onPressInSecond} onTouchEnd={onPressOutSecond}>
                  <Text>BUTTON 2</Text>
                </View>
</View>

【讨论】：