3

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

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

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

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

我用：

  • “反应”：“16.9.0”，
  • “反应原生”：“0.61.5”，
4

3 回答 3

7

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

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

于 2020-08-01T12:33:58.507 回答
0

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

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

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

于 2020-04-07T14:36:23.337 回答
0

在我的情况下，我所做的事情大致如下：

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

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

于 2021-01-21T08:51:12.223 回答