React Native 错误“VirtualizedLists不应该嵌套在具有相同方向的普通ScrollView中”

vwkv1x7d 于 6个月前发布在 React

关注(0)|答案(2)|浏览(52)

我在这里创建了一个组件EventCards，我使用Flatlist。我在Home组件中调用该组件，其中EventCards组件在ScrollView中。

Const Home= () => { 
  return ( 
    othercomponents...
      <ScrollView>
        othercomponents...
        <EventCards />
        othercomponents...
      </ScrollView>
    othercomponents...
    )
  }

字符串
现在，它给予一个错误：

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

型

的数据
The Flatlist是即将到来的事件。
我尝试在滚动视图中使用FlatList。但它抛出一个错误。我想解决这个错误。

react-native

来源：https://stackoverflow.com/questions/77494875/flatlist-in-scrollview-error-virtualizedlists-should-never-be-nested-inside-pla

2条答案

按热度按时间

wixjitnu1#

上述问题的原因是当我们在scrollview中渲染flatlist时，它会同时渲染所有的项目，尽管flatlist的优化技术.其中flatlist只会渲染适合可见区域的项目。
要处理此警告，Flatlist本身使我们能够在Flatlist项的内容上添加自定义页眉和页脚组件。

这将使Flatlist的整个内容可滚动，并且我们的数据项将以优化的方式呈现。

例如

<FlatList
    data={myData}
    renderItem={renderItemHandler}
    ListHeaderComponent={() => {
      return (
        <View>
          {/**
           * place your header components here
           */}
        </View>
      )
    }}
    ListFooterComponent={() => {
      return (
        <View>
          {/**
           * place your footer components here
           */}
        </View>
      )
    }}
  />

字符串

赞(0）回复(0）举报 6个月前

bgibtngc2#

正如明确指出的那样，您不应该将FlatList嵌套在ScrollView中。
现在，如果您希望在用户在视口中滚动时在FlatList之前或之后看到ScrollView中的其他组件，则可以分别使用ListHeaderComponent和ListFooterComponent，然后从代码中删除ScrollView。
如果这不是您正在寻找的答案，请提供有关您计划实现的UI的更多信息。

赞(0）回复(0）举报 6个月前

我来回答

React Native 错误“VirtualizedLists不应该嵌套在具有相同方向的普通ScrollView中”

2条答案

相关问题

热门标签

最新问答