VirtualizedLists 不应该嵌套在具有相同方向的普通 ScrollViews 中答案

【问题标题】：VirtualizedLists should never be nested inside plain ScrollViews with the same orientationVirtualizedLists 不应该嵌套在具有相同方向的普通 ScrollViews 中
【发布时间】：2021-06-22 12:32:20
【问题描述】：

我正在使用 React Native 构建一个移动应用程序，其中一个页面中有一个 ScrollView。

问题是我在这个页面中有一个FlatList，所以当我转到那个页面时，我收到了这个错误： VirtualizedLists should never be nested inside plain ScrollViews with the same orientation... 问题是，我将ScrollView nestedScrollEnabled 设置为true，我还将FlatList's scrollEnabled 设置为false，因为我真的不需要那里的滚动（我用它来渲染枚举中的项目）所以我认为应该修复错误，但错误仍然存在。

看起来像这样：

<ScrollView showsVerticalScrollIndicator={false} nestedScrollEnabled={true}>
  <MyComponent />
</ScrollView>

MyComponent 有这个 FlatList：

<FlatList
    scrollEnabled={false}
    style={{padding: 8,marginBottom: 8,}}
    data={categories}
    numColumns={numOfColumns}
    keyExtractor={category => category}
    renderItem={item => renderItem(item.item)}
/>

它基本上看起来像这样：

<SafeAreaView>
 <ScrollView>
  <FlatList />
  <OTHER COMPONENTS />
 </ScrollView>
</SafeAreaView>

【问题讨论】：

标签： react-native

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

错误是因为您在 ScrollView 中使用了 FlatList。

FlatList 已经是一个可滚动的组件，

FlatList 正在接受像 ListHeaderComponent 这样的道具来呈现页眉内容，ListFooterComponent 来呈现页脚内容。在这里您可以删除ScrollView，而您只能渲染FlatList 以使整个页面可滚动

您需要更改您的代码，如下所示：

const _renderHeader = () => <Text>Your Header</Text>
const _renderFooter = () => <Text>Your Footer</Text>
const _renderFooter = () => <Text>FlatList items</Text>

<SafeAreaView>
 <FlatList 
   data={data}
   keyExtractor={(item, index) => String(index)}
   renderItem={_renderItem}
   ListHeaderComponent={_renderHeader}
   ListFooterComponent={_renderFooter}
   ListFooterComponentStyle={styles.footerStyle} //If you need to give specific styles for footer component
   ListHeaderComponentStyle={styles.headerStyle} //for header comp style
 />
</SafeAreaView>

您不想在使用 FlatList 时使用 ScrollView

You can check the official docs for more clarification

【讨论】：