React Native Bottom Sheet 模态框连续关闭与打开的最佳实践

问题背景

在使用 React Native Bottom Sheet 库时，开发者经常遇到需要连续关闭和重新打开模态框的场景。例如，用户首先看到一个预览模态框，点击确认后需要立即显示另一个内容完全不同的模态框。在 Android 平台上这种操作通常很流畅，但在 iOS 上可能会出现第二个模态框无法正常显示的问题。

核心问题分析

问题的本质在于模态框的状态管理。当连续调用 close() 和 present() 方法时，由于底层实现机制的不同，iOS 可能无法正确处理这种快速的状态切换。具体表现为：

1. 第一次调用 close() 后，模态框开始关闭动画
2. 立即调用 present() 时，iOS 可能认为模态框仍处于"已展示"状态
3. 导致第二个 present() 调用被忽略

解决方案

1. 使用状态队列

更可靠的做法是建立一个状态队列，确保前一个操作完全完成后再执行下一个：

const reloadInfoModal = async () => {
  await infoModalRef.current.close();
  infoModalRef.current.present(props);
}

2. 模态框堆栈模式

对于复杂的模态框交互场景，推荐实现模态框堆栈管理：

// 创建模态框堆栈
const [modalStack, setModalStack] = useState([]);

// 添加新模态框
const pushModal = (content) => {
  setModalStack(prev => [...prev, content]);
};

// 移除当前模态框
const popModal = () => {
  setModalStack(prev => prev.slice(0, -1));
};

// 渲染当前顶部模态框
{modalStack.length > 0 && (
  <BottomSheetModal>
    {modalStack[modalStack.length - 1]}
  </BottomSheetModal>
)}

3. 动画完成回调

利用 Bottom Sheet 提供的动画完成回调确保时序正确：

infoModalRef.current.close(() => {
  // 确保关闭动画完成后才打开新模态框
  infoModalRef.current.present(newProps);
});

最佳实践建议

1. 避免直接连续调用：不要在没有等待关闭完成的情况下立即调用打开
2. 使用状态管理：推荐使用 Zustand 或 Redux 等状态管理库统一管理模态框状态
3. 考虑用户体验：快速切换模态框可能导致用户困惑，适当添加过渡动画
4. 平台差异处理：针对 iOS 和 Android 的不同表现做好测试和适配

性能优化技巧

1. 复用模态框实例：不要频繁创建销毁，而是重用同一个实例
2. 预加载内容：提前准备可能显示的模态框内容
3. 动画优化：适当调整动画时长，平衡流畅度和响应速度
4. 内存管理：对于大型内容模态框，注意卸载不必要的组件

通过以上方法和最佳实践，开发者可以构建出在各种平台上表现一致、用户体验良好的模态框交互流程。