时间戳

首页 > 解决方案 > 如何解决此警告：VirtualizedLists 永远不应嵌套在具有相同方向的普通 ScrollViews 中

react-native - 如何解决此警告：VirtualizedLists 永远不应嵌套在具有相同方向的普通 ScrollViews 中

问题描述

当我FlatList在里面使用组件时，ScrollView我看到一个警告：

VirtualizedLists 永远不应该嵌套在具有相同方向的普通 ScrollViews 中 - 改用另一个 VirtualizedList 支持的容器。

FlatList在我使用很多其他组件之前和之后，我的屏幕很长。

我试图用它来包装内容，SafeAreaView但它对我没有帮助，因为在这种情况下我无法滚动内容。ListHeaderComponent={SafeAreaView}我也尝试ListFooterComponent={SafeAreaView}在<FlatList>.

我用：

标签： react-nativereact-native-flatlistreact-native-scrollviewsafeareaview

解决方案

这是一个 VirutalizedList 支持的容器实现，使用FlatList：

import React from 'react';
import { FlatList } from 'react-native';

export default function VirtualizedView(props: any) {
  return (
    <FlatList
      data={[]}
      ListEmptyComponent={null}
      keyExtractor={() => "dummy"}
      renderItem={null}
      ListHeaderComponent={() => (
        <React.Fragment>{props.children}</React.Fragment>
      )}
    />
  );
}

用法：


  <VirtualizedView>
    <Text>Anything goes here, even FlatList works good</Text>
    <View style={{minHeight: 480}}> // leave enough space for better user experience
      <FlatList 
        data={data}
        keyExtractor={keyExtractor}
        renderItem={({item}) => <Item data={item} />}
        onRefresh={refetch}
        refreshing={loading}
        onEndReached={concatData}
      />
    </View>
  </VirtualizedView>

当您的屏幕太长时，这将显示滚动条并删除讨厌的警告信息和性能将毫无问题地保存。

推荐阅读