如何修复此警告：VirtualizedLists 永远不应嵌套在具有相同方向的普通 ScrollViews 内

Question

当我FlatList在内部使用组件时ScrollView，我看到一条警告：

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

前后FlatList我使​​用了很多其他组件，而且我的屏幕很长。

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

我用：

• “反应”：“16.9.0”，
• “反应本机”：“0.61.5”，

Answer 1

这是一个 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>

当屏幕太长时，这将显示滚动条，并删除讨厌的警告消息和性能将被保存，没有任何问题。