VirtualizedLists 永远不应该嵌套在具有相同方向的普通 ScrollViews 中，因为它会破坏窗口和其他功能答案

【问题标题】：VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionalityVirtualizedLists 永远不应该嵌套在具有相同方向的普通 ScrollViews 中，因为它会破坏窗口和其他功能
【发布时间】：2022-12-16 18:43:02
【问题描述】：

<ScrollView>
  <Flatlist data={[1,2,3]}/>
</ScrollView>

将此代码复制到版本为 0.64 的新 react-native 项目中，它将立即失败

从 react native 0.61 更新到 0.64 后，VirtualizedLists should never be nested inside plain ScrollViews (Error not warning) start falling because I can't just change to each and every page I need an general solution as I don't have any large flatlist inside滚动视图，但我无法修改每个页面，我只需要与以前的 React 版本相同的工作方式，因为性能与小列表无关

目前尝试过的方法

1.FlatList 添加props = nestedScrollEnabled

2.ListHeaderComponent & ListFooterComponent（页数高，无法更改）

3.LogBox / Yellobox 隐藏错误 LogBox.ignoreLogs(['VirtualizedLists 不应该被嵌套']);

不想在渲染 UI 中添加地图循环

【问题讨论】：

标签： reactjs react-native react-native-flatlist

【解决方案1】：

使用 Flatlist 作为整个视图，并利用 ListHeaderComponent 和 ListFooterComponent 参数添加任何不应滚动的元素。就像是：

<FlatList
  ListHeaderComponent={<MyComponentGoingAboveTheList />}
  data={[{ key: "a" }, { key: "b" }]}
  renderItem={({ item }) => <Text>{item.key}</Text>}
  ListBottomComponent={<MyComponentGoingBelowTheList />}
/>

【讨论】：