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/>
}/>
);
}

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

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

最后

以上就是风趣小海豚为你收集整理的RN解决警告：VirtualizedLists should never be nested inside plain ScrollViews的全部内容，希望文章能够帮你解决RN解决警告：VirtualizedLists should never be nested inside plain ScrollViews所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。