React Native中如何处理多个按钮同时按下的事件响应问题

开发机器人控制器时，按钮组件需要满足两个核心要求：

• 支持同时响应多个按钮的点按事件，满足组合操作需求
• 支持按住持续触发能力：按钮按住期间通过定时器重复向机器人发送控制指令

当前项目通用按钮组件基于TouchableOpacity封装，代码如下：

<TouchableOpacity
  activeOpacity={0.4}
  {...otherProps}
  delayPressOut={100}
  onPressIn={onPressIn}
  onPressOut={onPressOut}>
  {children}
</TouchableOpacity>

项目内所有功能按钮均复用该组件。此前尝试将事件逻辑替换为onTouchStart={onPressIn}、onTouchEnd={onPressOut}实现，但该方案下按下第二个按钮不会触发对应事件，属于React Native触控响应链的已知冲突问题。

方案1：替换为Pressable组件（React Native 0.63+ 推荐） #

Pressable是React Native官方后续主推的触控组件，默认支持多点触控响应，不会出现第二个按钮按下无响应的问题，替换成本极低：

1. 将组件导入从TouchableOpacity替换为Pressable
2. 通过style参数的pressed状态实现原来activeOpacity的按压透明度效果
3. 原有onPressIn、onPressOut事件逻辑不需要改动，直接绑定即可
   参考实现：

import { Pressable } from 'react-native';

<Pressable
  {...otherProps}
  style={({ pressed }) => [
    { opacity: pressed ? 0.4 : 1 },
    otherProps.style
  ]}
  onPressIn={onPressIn}
  onPressOut={onPressOut}
  pressRetentionOffset={{ top: 20, left: 20, bottom: 20, right: 20 }}
>
  {children}
</Pressable>

可通过pressRetentionOffset扩大触控响应边界，避免按住按钮轻微滑动时误触发onPressOut中断持续发送逻辑。

方案2：给TouchableOpacity增加响应者配置（低版本兼容） #

如果项目React Native版本低于0.63无法使用Pressable，直接给现有TouchableOpacity增加两个响应者配置，即可解决多点触控冲突：

• 增加onStartShouldSetResponder={() => true}：让每个按钮在手指按下时主动申请成为触控响应者，不会被第一个按下的按钮劫持所有触控事件
• 增加onResponderTerminationRequest={() => false}：阻止当前处于按住状态的按钮被其他触控事件抢走响应权，保证持续触发逻辑不中断
  修改后的组件代码：

<TouchableOpacity
  activeOpacity={0.4}
  {...otherProps}
  delayPressOut={100}
  onPressIn={onPressIn}
  onPressOut={onPressOut}
  onStartShouldSetResponder={() => true}
  onResponderTerminationRequest={() => false}
>
  {children}
</TouchableOpacity>

实现按住重复发指令的逻辑时，需要注意三点避免bug：

• 定时器id存在组件ref中，不要存在state里，避免不必要的重渲染
• onPressOut触发、组件卸载时必须清除对应定时器，防止内存泄漏、组件销毁后还在发送无效指令
• 每个按钮独立维护自己的定时器实例，不要共用定时器，避免松开一个按钮就中断所有按钮的持续触发逻辑

内容的提问来源于stack exchange，提问作者Parth Hiren Parekh