React Native Bottom Sheet 中 FlashList 渲染性能问题解析

问题现象

在使用 React Native Bottom Sheet 库时，开发者发现当结合 BottomSheetFlashList 组件使用时，会出现一个性能问题：即使列表项不可见，组件也会在初始渲染时将所有列表项一次性渲染出来。这显然违背了 FlashList 作为高性能列表组件的设计初衷——按需渲染可视区域内的元素。

问题复现

通过一个简单的示例可以重现该问题：

1. 创建一个包含 100 个测试数据的数组
2. 在 BottomSheetModal 中使用 BottomSheetFlashList 渲染这些数据
3. 观察发现所有 100 个列表项的渲染函数都被调用了

根本原因分析

经过深入研究，发现问题源于 Bottom Sheet 的一个特性配置——enableDynamicSizing。在 v5 版本中，这个参数默认被设置为 true，目的是让 Bottom Sheet 能够根据内容动态调整高度。然而，这种动态尺寸计算机制会强制 FlashList 在初始阶段测量所有内容的高度，导致所有列表项被渲染。

解决方案

要解决这个问题，开发者可以采取以下两种方法之一：

1. 禁用动态尺寸调整
   将 enableDynamicSizing 属性显式设置为 false：

   <BottomSheetModal
     ref={bottomSheetModalRef}
     snapPoints={['50%', '75%']}
     enableDynamicSizing={false}
   >
   

2. 设置最大动态内容尺寸
   如果确实需要动态调整大小，可以设置 maxDynamicContentSize 来限制最大高度：

   <BottomSheetModal
     ref={bottomSheetModalRef}
     snapPoints={['50%', '75%']}
     maxDynamicContentSize={500}
   >
   

版本兼容性说明

值得注意的是，这个默认值在 v4 和 v5 版本间发生了变化：

• v4 版本：enableDynamicSizing 默认为 false
• v5 版本：enableDynamicSizing 默认为 true

这种变化是为了提供更灵活的布局能力，但开发者需要注意其对列表性能的影响。

最佳实践建议

1. 当使用虚拟化列表组件（如 FlashList）时，建议始终将 enableDynamicSizing 设置为 false
2. 如果确实需要动态高度，应该配合使用 maxDynamicContentSize 来限制最大高度
3. 对于复杂场景，可以考虑为列表容器设置固定高度，这也能有效避免性能问题

通过理解这一机制，开发者可以更好地平衡 Bottom Sheet 的灵活性和列表渲染性能，打造更流畅的用户体验。