ScrollView 中的 FlatList 在 React Native 中不起作用答案

【问题标题】：FlatList inside ScrollView doesn't work in React NativeScrollView 中的 FlatList 在 React Native 中不起作用
【发布时间】：2021-05-24 08:50:14
【问题描述】：

当我在 ScrollView 中使用 FlatList 时出现错误，因为 VirtualizedLists 不应该嵌套在具有相同方向的普通 ScrollViews 中 - 请改用另一个 VirtualizedList 支持的容器。

我已尝试添加如下所述的组件：

<SafeAreaView>
  <ScrollView>
    <View>
      <FlatList />
    </View>
  </ScrollView>
</SafeAreaView>

【问题讨论】：

我可以知道您为什么要在 ScrollView 组件中实现 FlatList 组件吗？
我还有一个列表要显示在第一个 FlatList 组件下方。所以我希望总页面位于父 ScrollView 组件内。
我们可以使用 ListFooterComponent 在平面列表的末尾显示子元素

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

【解决方案1】：

使用这种方式，而不是像在 Scrollview 中使用 Flatlist 一样

<SafeAreaView style={{flex: 1}}>
    <FlatList
      data={data}
      ListHeaderComponent={ContentThatGoesAboveTheFlatList}
      ListFooterComponent={ContentThatGoesBelowTheFlatList} />
</SafeAreaView>

【讨论】：

谢谢。添加了 ListFooterComponent 并且这有效。