React Native Bottom Sheet 模态框异常关闭问题分析与解决方案

问题现象

在使用 React Native Bottom Sheet 库时，开发者报告了一个关于模态框关闭行为的异常问题。当使用默认堆栈样式连续展示多个模态框后，在尝试关闭当前模态框时，会出现不可预测的行为：已经被关闭的模态框会意外地尝试关闭当前正在展示的模态框。

问题根源分析

通过深入排查，发现问题主要出现在以下两个关键环节：

1. 重复触发关闭回调：当 enableDismissOnClose 属性设置为 true 时，handleBottomSheetOnClose 函数会在模态框最小化状态下被 BottomSheet:onClose 回调多次触发。

2. 状态管理异常：多次触发关闭回调导致 unmount 函数被重复调用，进而错误地从 _sheetsQueue 列表中移除了可拖拽的模态框实例，破坏了 BottomSheetModalProviderWrapper 内部的状态跟踪机制。

技术细节剖析

核心问题代码段

在 handleBottomSheetOnClose 回调函数中，当模态框处于最小化状态时，缺少对已卸载状态的检查，导致可以多次触发卸载操作：

const handleBottomSheetOnClose = useCallback(
  function handleBottomSheetOnClose() {
    if (minimized.current) {
      return;
    }

    // 缺少对已卸载状态的检查
    if (enableDismissOnClose && mounted.current) {
      unmount();
    }
  },
  [enableDismissOnClose, unmount]
);

在 handleUnmountSheet 函数中，当从 _sheetsQueue 数组中移除元素时，没有验证索引的有效性：

const _sheetsQueue = sheetsQueueRef.current.slice();
const sheetIndex = _sheetsQueue.findIndex(item => item.key === key);

// 直接移除元素，没有验证 sheetIndex 的有效性
_sheetsQueue.splice(sheetIndex, 1);
sheetsQueueRef.current = _sheetsQueue;

解决方案

针对上述问题，我们提出两个关键修复方案：

1. 添加卸载状态检查：在触发卸载操作前，验证模态框是否已经被卸载：

if (enableDismissOnClose && mounted.current && !unmounted.current) {
  unmount();
}

2. 增强队列操作安全性：在从 _sheetsQueue 中移除元素前，验证索引的有效性：

if (sheetIndex >= 0 && sheetIndex < _sheetsQueue.length) {
  _sheetsQueue.splice(sheetIndex, 1);
  sheetsQueueRef.current = _sheetsQueue;
}

最佳实践建议

1. 合理使用 useCallback：确保所有回调函数都使用 useCallback 进行包装，避免不必要的重新创建和触发。

2. 状态管理严谨性：在操作内部状态队列时，始终验证索引和边界条件，防止无效操作。

3. 调试技巧：在开发阶段，可以通过添加详细的日志来跟踪模态框的挂载和卸载过程，帮助快速定位问题。

问题重现与验证

要验证此问题，可以按照以下步骤操作：

1. 连续展示多个模态框（建议至少6个）
2. 按顺序关闭这些模态框
3. 观察在关闭第3或第4个模态框时是否会影响 _sheetsQueue 数组的状态

需要注意的是，由于这是一个竞态条件问题，可能不会每次都精确重现，因为问题的出现取决于 BottomSheet:onClose 回调被 useAnimatedReaction 触发的时机和频率。

总结

React Native Bottom Sheet 库中的模态框管理机制在处理连续展示和关闭多个模态框时，需要特别注意状态管理的严谨性和回调函数的稳定性。通过添加适当的状态检查和边界条件验证，可以有效避免这类异常关闭行为的发生。开发者在使用此类复杂交互组件时，应当充分理解其内部状态管理机制，并遵循最佳实践来确保应用的稳定性。