RN解决警告：VirtualizedLists should never be nested inside plain ScrollViews

React Native 开发过程中，如果我们把 FlatList 或者 SectionList 控件放在 ScrollView 中的haul，调试的时候会有如下黄盒警告：

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation
- use another VirtualizedList-backed container instead.

这个警告指明了问题，但是没有给出错在哪，也没给出解决方案。我们一起来看看问题的原因以及解决办法。

为什么将VirtualizedList嵌套在ScrollView中不好？

Virtualized Lists， 是一种带有性能优化的 List，在 List 很大的时候，它会有明显的内存优化结果。怎么个优化法呢？例如一个 List 有一千个 Cell，如果没有优化，这一千个 Cell 都会被渲染并保持在内存中，内存会明显升高。Virtualized lists 的做法是，只让显示在屏幕上的 Cell 渲染，其它的没有显示在屏幕上的 Cell 销毁。这样就节省很多内存。

FlatList 和 SectionList 都是用的 Virtualized Lists。

那现在你把 Virtualized List 放在 ScrollView 中，ScrollView 是要全部渲染的，那么 Virtualized List 就计算不出来哪些 Cell 目前显示在屏幕上，会渲染所有的 Cell，那么它的优势就显现不出来了。这个时候就会抛出上述警告。

怎么解决？

一般情况下，你能把 FlatList 或 SectionList 放在 ScrollView 中， 一定是还有别的控件和 FlatList 并列放在 ScrollView 中的对吧？想让别的控件和 FlatList 一起滚动。

要实现这个一起滚动的效果，你可以把别的控件放在 FlatList 的 ListHeaderComponent 或 ListFooterComponent 中。这样就不需要 ScrollView 了。

例如，之前需要把多个控件放在 ScrollView 中：

render() {
  return (
    <ScrollView>
      <Title>Welcome</Title>
      <Text>Take a look at the list of recipes below:</Text>
      <FlatList
        data={recipes}
        renderItem={renderItem}
      />
      <Footer/>
    </ScrollView>
  );
}

改善后的代码：

render() {
  return (
    <FlatList
      LisHeaderComponent={
      <>
        <Title>Welcome</Title>
        <Text>Take a look at the list of recipes below:</Text>
      </>}
      data={recipes}
      renderItem={renderItem}
      ListFooterComponent={
        <Footer/>
      }/>
  );
}

实现了同样的效果，警告就没了。

本文参考一篇英文博客，觉得有用，就翻译过来。
感谢原作者，原文链接