Question

我是本机学生。当我在 ScrollView 中使用 FlatList 组件时，我看到一条警告：

VirtualizedLists绝不能以相同的方向嵌套在普通ScrollView中-而是使用另一个支持VirtualizedList的容器。

FlatList 之前和之后，我使用了许多其他组件，并且屏幕很高。

我尝试使用 SafeAreaView 包装内容，但对我没有帮助，因为在这种情况下，我无法滚动内容我尝试在

中使用ListHeaderComponent = {SafeAreaView}和ListFooterComponent = {SafeAreaView}

我使用 FlatList 来呈现新闻列表，从状态和API切换项目和文本列表

我需要帮助，我不知道该如何解决

我使用：

“反应”：“ 16.9.0”，
“ react-native”：“ 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>
      )}
    />
  );
}

用法：

<SafeAreaView> // or not
  <VirtualizedView>
    <Text>Anything goes here, even FlatList works good</Text>
    <FlatList 
      data={data}
      keyExtractor={keyExtractor}
      renderItem={({item}) => <Item data={item} />}
      onRefresh={refetch}
      refreshing={loading}
      onEndReached={concatData}
    />
  </VirtualizedView>
</SafeAreaView>

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

Answer 2

将其包装在<View>之类的另一个组件中，以使其不直接位于<ScrollView>内：

<ScrollView>
  <View>
    <FlatList>

或者您可以将nestedScrollEnabled的{{1}}属性设置为true。

Answer 3

使用https://facebook.github.io/react-native/docs/scrollview#nestedscrollenabled

有一个更简单的解决方案

这仅适用于Android（即使没有它，iOS也可以正常运行）。

只需确保在父级和子级ScrollViews（或子级FlatList）中启用此道具。

Answer 4

在我的案例中，我所做的事情是这样的：

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

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

在ScrollView中使用FlatList时出错

4 个答案: