React Native应用：iPhone14最新iOS下添加卡片按钮无响应

问题描述 #

在运行最新iOS版本的iPhone 14设备上，React Native应用中使用@gorhom/bottom-sheet实现的BottomSheetModal内的“添加卡片”按钮出现无响应问题——按钮可见，但点击后没有任何动作触发。已排查控制台，未发现错误或警告信息。

相关环境：

• 设备：iPhone 14
• UI库：@gorhom/bottom-sheet

可能的解决方案 #

1. 处理手势冲突 #

@gorhom/bottom-sheet的滑动手势可能会拦截按钮点击事件，尤其是iOS平台。可以尝试两种方式：

• 暂时关闭下拉关闭功能，验证是否是手势拦截导致：

<BottomSheetModal
  enablePanDownToClose={false}
  // 其他原有配置
>
  {/* 你的底部弹窗内容 */}
</BottomSheetModal>

• 给按钮添加pointerEvents="box-only"属性，确保点击事件不被底层手势捕获：

<TouchableOpacity 
  onPress={handleAddCard}
  pointerEvents="box-only"
>
  <Text>添加卡片</Text>
</TouchableOpacity>

2. 升级@gorhom/bottom-sheet版本 #

部分旧版本的库在iOS 16+（iPhone14默认搭载系统）上存在手势与点击事件冲突的已知问题，建议升级到最新稳定版：

npm update @gorhom/bottom-sheet
# 或使用yarn
yarn upgrade @gorhom/bottom-sheet

3. 检查组件层级与交互属性 #

• 确认按钮的所有父组件未设置pointerEvents="none"，该属性会禁用整个子树的交互能力
• 给BottomSheetModal设置更高的zIndex，避免被其他组件遮挡导致点击无效：

<BottomSheetModal
  style={{ zIndex: 9999 }}
  // 其他原有配置
>
  {/* 你的底部弹窗内容 */}
</BottomSheetModal>

4. 调整iOS系统手势优先级 #

iOS系统级手势（如底部返回主屏幕的滑动）可能影响自定义组件的交互，可在Info.plist中添加配置调整：

<key>UIApplicationSupportsIndirectInputEvents</key>
<true/>

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