React Native Bottom Sheet 动态高度在iOS横竖屏切换时的解决方案

问题背景

在使用React Native Bottom Sheet库时，开发者发现当BottomSheetModal启用enableDynamicSizing属性并在内部使用BottomSheetScrollView时，在iOS设备上旋转屏幕会导致容器高度计算错误。具体表现为：

1. 横屏模式下无法完整滚动查看所有内容
2. 当内容较少时，底部工作表在横屏模式下可能完全不可见
3. 容器高度保持为竖屏时的值，不随屏幕旋转更新

根本原因分析

经过深入排查，发现问题的根源在于BottomSheetContainer组件没有正确处理屏幕方向变化时的重新渲染。在React Native中，当屏幕旋转时，组件的尺寸会发生变化，但如果没有适当的机制来触发重新计算，某些布局参数可能会保持旧值。

解决方案实现

通过修改BottomSheetContainer组件的实现，可以完美解决这个问题。关键修改点包括：

1. 引入useWindowDimensions钩子来获取实时屏幕尺寸
2. 添加状态管理来跟踪当前屏幕方向
3. 使用useEffect监听屏幕尺寸变化
4. 为容器组件添加key属性强制重新渲染

const dimensions = useWindowDimensions();
const initOrientation = dimensions.width > dimensions.height ? 'landscape' : 'portrait';
const [orientationKey, setOrientationKey] = useState(initOrientation);

useEffect(() => {
  setOrientationKey(dimensions.width > dimensions.height ? 'landscape' : 'portrait');
}, [dimensions]);

// 在容器组件上添加key属性
<View
  key={orientationKey}
  // ...其他属性
/>

架构影响分析

这种解决方案的优势在于：

1. 无侵入性：不需要修改应用的整体架构
2. 性能优化：仅在屏幕旋转时触发重新渲染
3. 兼容性：不影响Android平台的行为
4. 灵活性：可以与其他Bottom Sheet特性共存

最佳实践建议

1. 组件层级：将BottomSheetModalProvider放置在应用根组件中
2. 布局处理：确保内容组件能够响应尺寸变化
3. 测试策略：在iOS设备上全面测试各种屏幕旋转场景
4. 性能监控：关注屏幕旋转时的性能表现

扩展思考

这个问题揭示了React Native中处理屏幕旋转的通用模式。类似的解决方案可以应用于：

1. 响应式布局组件
2. 全屏视频播放器
3. 图表和可视化组件
4. 任何需要适应屏幕尺寸变化的UI元素

通过理解这个案例，开发者可以更好地掌握React Native中处理动态布局的技巧，特别是在需要考虑设备方向变化的场景下。