react-native - 你如何在 native react 中使用 ScrollView 内的 FlatList

Question

我正在尝试使用平面列表来显示数据库中的帖子，但是平面列表只占据了屏幕的一半，而其他 2 个容器也占据了大约一半的屏幕，目前当我在平面列表上滚动时，帖子只显示在屏幕的下半部分(如预期的那样)，但我希望整个页面滚动，这样帖子就可以在全屏上看到，这样更容易阅读。

这是我的布局的简化版本...

<View>
  <View>
    // some content
  </View>
  <View>
    // some content
  </View>
  <FlatList
    // posts displayed from a database
  />
</View>

有没有办法保留 Flatlist 组件，但允许在第一次滚动时整个屏幕向上滑动，直到 FlatList 到达页面顶部，然后开始滚动 FlatList？

Answer 1

由于性能问题，您不应在 ScrollView 中呈现 FlatList。您可以做的是将 FlatList 定义为组件中的主容器，然后将要在 FlatList 上方显示的所有其他 View 传递给 ListHeaderComponent FlatList

的属性

  <FlatList
    ListHeaderComponent={
      <View>
        // some content
      </View>
      <View>
        // some content
      </View>
    }
    data={someDataArray}
    renderItem={({ item }) => (
        <SomeItem />
    )}
    keyExtractor={(data) => data.id}
  />

这样你的整个屏幕就可以滚动了