如何解决此警告：VirtualizedLists 不应该嵌套在具有相同方向的普通 ScrollViews 中答案

【问题标题】：How to fix this warning: VirtualizedLists should never be nested inside plain ScrollViews with the same orientation如何解决此警告：VirtualizedLists 不应该嵌套在具有相同方向的普通 ScrollViews 中
【发布时间】：2019-12-16 14:56:29
【问题描述】：

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

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

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

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

我用：

“反应”：“16.9.0”，
"react-native": "0.61.5",

【问题讨论】：

标签： react-native react-native-flatlist react-native-scrollview safeareaview

【解决方案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>

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

【讨论】：

它就像一个魅力！谢谢。我在 VirtualizedView Flatlist 中使用 showsVerticalScrollIndicator={false} 删除了滚动条指示器

【解决方案2】：

使用https://facebook.github.io/react-native/docs/scrollview#nestedscrollenabled有一个更简单的解决方案

这仅对 Android 是必需的（即使没有它，iOS 也可以正常工作）。

只需确保在父 ScrollView 和子 ScrollView（或子 FlatList）中都启用此属性。

【讨论】：

【解决方案3】：

在我的情况下，我所做的事情是这样的：

render() {
    return (
        <SafeAreaView style={{ flex: 1 }}>
            ...
            <ScrollView>
                ...
                <FlatList
                    scrollEnabled={false} // this line is important
                    ...
                </FlatList>
                ...
            </ScrollView>
        </SafeAreaView>
    );
}

它不会删除警告，但它确实可以按我的意愿工作，因为我需要 ScrollView 和 FlatList。

【讨论】：