欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-01 16:53:37
...

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

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

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