错误 - VirtualizedLists 不应该嵌套在具有相同方向的普通 ScrollViews 中

Question

我正在开发一个 react-native 应用程序，我必须将对象列表放在 Scrollview 中，所以我使用 FlatList 组件来做到这一点。这是产生错误的代码：

<ScrollView contentContainerStyle={style}>
   Other components
   <FlatList
       style={style}
       data={data}
       scrollEnabled={false}
       keyExtractor={(item, index) => index.toString()}
       renderItem={({ item, index}) => (somethings)}
   />
   Other components
</ScrollView>

完整的错误是：VirtualizedLists 不应该嵌套在具有相同方向的普通 ScrollViews 中，因为它可能会破坏窗口和其他功能 - 请改用另一个 VirtualizedList 支持的容器。

Answer 1

Flatlist 有自己的 ScrollView，您可以使用它滚动列表，因此无需将 flatlist 放入 ScrollView 中，这就是它发出警告的原因，两个滚动视图都会发生冲突，其中一个（主要是父级） ) 有效。

Answer 2

该错误是不言自明的，即使只是误报，避免此类事情也应该符合开发人员的最大利益。 您的特殊情况可以使用以下解决方案：

<FlatList
  data={data}
  keyExtractor={(item, index) => `key-${index}`}
  ListHeaderComponent={() => (
    <SomeComponents>
      ...Some components those need to be on top of the list
    </SomeComponents>
  )}
  ListFooterComponent={() => (
    <SomeComponents>
      ...Some components those need to be below the list
    </SomeComponents>
  )}
  renderItem={({ item, index}) => (somethings)}
/>

另外注意，如果您需要更复杂的列表，需要列表本身的页眉和页脚，您可以尝试SectionList。

Answer 3

避免使用具有相同方向的 FlatList。相反，像这样重构你的代码 --

  <ScrollView contentContainerStyle={style}>
    Other components
    {
      data.map((item)=> <Somthing item={item}/>)
    }
    Other components
  </ScrollView>

Answer 4

您的组件FlatList 和ScrollView 具有相同的方向（垂直），因此您需要将组件放在具有水平方向的ScrollView 中，如下所示：

<View>
    <ScrollView nestedScrollEnabled={true} style={{ width: "100%" }} >
    <View>
    <ScrollView horizontal={true} style={{ width: "100%" }}>
        <FlatList />
    </ScrollView>
    </View>
    </ScrollView>
</View>

Answer 5

因为，只有父视图会滚动 (ScrollView) 而不是子 FlatList，所以要获得警告，您可以将 prop scrollEnabled={false} 传递给 FlatList。

如果不成功，则 从 react-native 导入 LogBox 并将其写入您的组件中

useEffect(() => {
  LogBox.ignoreLogs(["VirtualizedLists should never be nested"])
}, [])

希望警告将被删除。

Answer 6

任何想解决这个问题的人都可以使用自定义的VirtualizedScrollView，如下所示：

import React from 'react';
import { FlatList } from 'react-native';

const VirtualizedScrollView = props => {
  return (
    <FlatList
      {...props}
      data={[]}
      keyExtractor={(e, i) => 'dom' + i.toString()}
      ListEmptyComponent={null}
      renderItem={null}
      ListHeaderComponent={() => (
        <>{props.children}</>
      )}
    />
  );
};

export default VirtualizedScrollView;

那么如果你在VirtualizedScrollView里面使用FlatList，它就不会得到警告/错误。

<VirtualizedScrollView>
  <FlatList 
    /*--- your props ---*/
  />
</VirtualizedScrollView>

有一个 npm 包，我得到这个代码，你也可以使用这个package

Answer 7

您可以通过使用相同的平面列表并在切换时切换数据来解决 2 个垂直的问题（我假设它们并排，用分段控件分隔？）。如果它们只是一个接一个的两个垂直平面列表，请使用 SectionList。

对于水平的，您可以尝试将 Horizo​​ntal FlatList 放在垂直 FlatList 的 ListHeaderComponent 中，看看会发生什么。如果您在垂直滚动视图中使用垂直 FlatList 可能会很麻烦，但可能有两个不同的轴可能没问题。另一个选项是两个只在水平滚动视图中显示几个项目并有一个“显示更多”。

最后一个选项是重新设计/重新考虑页面，所以它没有做太多。在移动设备上，少即是多，开发人员/设计师喜欢将桌面思维移植到移动设备上。可能值得一试。

Answer 8

我使用SectionList 方法解决了这个问题并想发布一个代码示例，因为我找到了Section data required by React Native to be clear but also quite prescriptive。

 renderList = ({empty, posts}: {empty: boolean, posts: Array<Object>}) => (
    <SectionList
      sections={[
        {type: 'MAP', data: [{}]}, // Static sections.
        {type: 'PROFILE', data: [{}]},
        {type: 'POSTS', data: posts} // Dynamic section data replaces the FlatList.
      ]}
      keyExtractor={(item, index) => index}
      renderItem={({item, section}) => {
        switch (section.type) {
          // Different components for each section type.
          case 'MAP':
            return <MapView />;
          case 'PROFILE':
            return <Profile />;
          case 'POSTS':
            return <Post item={item} />;
          default:
            return null;
        }
      }}
      ItemSeparatorComponent={() => <Separator />}
      ListFooterComponent={() => <>{empty && <EmptyList />}</>}
    />
  );

好在内容在逻辑上感觉非常独立，因此您可以轻松添加部分或拥有不同的动态数据源。

（如果您正在构建一个表单并想要更好的键盘处理，您也可以尝试使用react-native-keyboard-aware-scroll-view 中的KeyboardAwareSectionList。）

Answer 9

Flatlist 本身有一个集成的滚动视图，因此您可以通过移除 ScrollView 组件来解决此错误，而只保留 Fatlist 组件

Answer 10

错误？您正在尝试在滚动视图组件中呈现 FlatList 组件，这就是引发警告的原因。

解决方案使用 Flatlist 的 ListHeaderComponent={} 属性渲染组件，即在你的 flatlist 中添加如下属性

const FlatList_Header = () => {
    return (
        <View style={{
            height: 45,
            width: "100%",
            backgroundColor: "#00B8D4",
            justifyContent: 'center',
            alignItems: 'center'
                    }}
        >
 
        <Text style={{ fontSize: 24, color: 'white' }}> Sample FlatList Header </Text>
 
        </View>
    );
  }
<FlatList
    data={BirdsName}
    renderItem={({ item }) => <ItemRender name={item.name} />}
    keyExtractor={item => item.id}
    ItemSeparatorComponent={ItemDivider}
    **ListHeaderComponent={FlatList_Header}**
    ListHeaderComponentStyle={{ borderBottomColor: 'red', borderBottomWidth: 2 }}
      />

请注意上面代码中 ListHeaderComponent 的使用，这应该会抑制警告。

Answer 11

使用flatList，如this.ListHeaderComponent 和ListFooterComponent：

<FlatList ListHeaderComponent={
    <ScrollView
        style={styles.yourstyle}
        showsVerticalScrollIndicator={false}
    >
        <View style={styles.yourstyle}>
        </View>
    </ScrollView>
    }
    data={this.state.images}
    renderItem={({ item, index }) => {
        return (
            <View
                style={styles.yourstyle}
            >
                <Image
                    source={{
                        uri: item,
                    }}
                    style={styles.yourstyle}
                    resizeMode={"contain"}
                />
                <Text
                    numberOfLines={2}
                    ellipsizeMode="tail"
                    style={styles.yourstyle}
                >
                    {item.name}
                </Text>
            </View>
        );
    }}
    keyExtractor={({ name }, index) => index.toString()}
    ListFooterComponent={
        <View style={styles.yourstyle}></View>
    }
/>