react-native 0.65.1版本FlatList嵌套ScrollView出现VirtualizedLists嵌套警告问题

React Native 0.61及后续版本强化了虚拟列表的非法嵌套检测逻辑，你遇到的警告就是该检测触发的结果，这也是旧版本无报错、新版本抛出提示的核心原因。
FlatList底层基于VirtualizedList封装，核心能力是通过监听自身滚动事件计算可视区域范围，只渲染当前可视区域内的列表项，大幅降低长列表的性能开销。当它被嵌套在普通ScrollView中时，同方向的滚动事件会优先被父ScrollView消费，导致VirtualizedList无法正确计算可视区域，会默认渲染全量列表项，彻底失去虚拟滚动的性能优势，长列表场景下极易出现卡顿、内存溢出问题，官方因此新增了该警告做强制提示。

• 优先采用官方推荐的改造方案：将原本放在ScrollView中、FlatList之外的UI内容，拆分到FlatList的对应属性中，整个页面仅保留FlatList作为唯一的纵向滚动容器：
  原本放在FlatList上方的非列表UI，传入ListHeaderComponent属性；原本放在FlatList下方的非列表UI，传入ListFooterComponent属性，示例代码如下：

  <FlatList
    ListHeaderComponent={<View>{/* 原ScrollView内FlatList上方的所有UI */}</View>}
    data={列表数据源}
    renderItem={列表项渲染函数}
    ListFooterComponent={<View>{/* 原ScrollView内FlatList下方的所有UI */}</View>}
  />
  

• 特殊场景必须保留嵌套结构时，明确禁用FlatList的滚动能力，将滚动逻辑完全交给父ScrollView处理：给父ScrollView添加nestedScrollEnabled={true}属性，同时给FlatList添加scrollEnabled={false}属性，短列表场景下还可以额外添加disableVirtualization={true}直接屏蔽警告，注意该属性会使FlatList失去虚拟滚动能力，长列表禁止使用。
• 多组列表同页展示的场景，直接用SectionList组件替代ScrollView+多FlatList的嵌套结构，将多组列表数据整合为SectionList支持的sections格式，统一处理滚动逻辑。

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