react-native - 如何修复此警告 : VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

Question

当我使用 FlatList内部组件 ScrollView我看到一个警告:

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

前后 FlatList我使用了很多其他组件，而且我的屏幕很长。
我试图用 SafeAreaView 包装内容它对我没有帮助，因为在这种情况下我无法滚动内容。我也尝试使用 ListHeaderComponent={SafeAreaView}和 ListFooterComponent={SafeAreaView}在 <FlatList> .
我用:

“ react ”:“16.9.0”，

“ react 原生”:“0.61.5”，

Answer 1

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

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>

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