React Native FlatList在呈现带有标题的情况下超出屏幕范围

Question

我正在尝试创建一个头部，它会在FlatList组件上方呈现。如果屏幕高度为800px，则标题高度为100px，FlatList应填充700px（使用flexGrow: 1），并且可以滚动（如果有太多的ListItems）。基本标记如下：

Original Answer翻译成"最初的回答"

<View style={{flexGrow: 1, backgroundColor: 'soothing-yellow-thunder'}}>
  <Header style={{height: 100}} />

  <FlatList ... />
</View>

然而，当我渲染标题时，FlatList组件的高度实际上是800px，与具有flexGrow：1的包装组件的高度相匹配。我可以看出它是800px-其中最后100px仅通过故意滚动超过FlatList认为的结束位置才能访问。 FlatList的“额外”高度正好与标题一样高。以下是实际工作代码和一个链接到一个snack（如果您安装了expo，则应允许在浏览器或手机上复制）：https://snack.expo.io/@sgardn04/flatlist-header-example

import * as React from 'react';
import { Text, View, FlatList } from 'react-native';

export default class App extends React.Component {
  _renderList() {
    return (
      <FlatList
        data={[{key: '0', content: 'hello there 0'}, {key: '1', content: 'hello there 1'}, {key: '2', content: 'hello there 2'}, {key: '3', content: 'hello there 3'}, {key: '4', content: 'hello there 4'},]}
        renderItem={({item}) => { return <View style={{height: 140, borderColor: 'red', borderWidth: 1}}><Text>{item.content}</Text></View> }} />
    )
  }

  _renderListWithHeader() {
    return (
      <View style={{flexGrow: 1}}>
        <View style={{height: 70, backgroundColor: 'lime', alignItems: 'center', justifyContent: 'center'}}><Text>Header</Text></View>

        {this._renderList()}
      </View>
    )
  }

  render() {
    return (
      this._renderListWithHeader()
      // this._renderList()
    )
  }
}

我对flex布局的工作方式有什么误解吗？我原本认为FlatList组件实际上被某个具有flexGrow: 1属性的东西包裹，因此容器会增长以填充可用空间但不会溢出。显然，列表可能有十倍于可用空间的垂直内容，但它恰好与标题的高度相差甚远，这非常值得怀疑。这里实际上发生了什么？如果您想看到我认为“正常”的行为，请尝试在我发布的代码的render方法中切换已注释的方法（并添加数据项，如果您的屏幕更大，则会溢出）。

- gards

Answer 1

只需在父级View的样式中添加flex:1即可。

<View style={{flex:1}}>
<View></View>
<Flatlist/>
</View>

- Shoaib Virk

Answer 2

FlatList实际上接受一个样式头的属性，这比尝试创建自己的头更好：FlatList Header 至于flex，你应该将flex或flexGrow属性传递给实际包装FlatList的<View>组件。

希望这可以帮助你！

- ehutchllew

---

很遗憾，我无法使用FlatList的头部属性，因为在实际代码中，列表实际上是基于几种情况进行渲染的。当数据正在加载时，会出现加载旋转器，因此在这种情况下，我不能仅为标题呈现列表组件。实际上，我希望始终为屏幕呈现标题，然后将一些可能的内容之一呈现到页面上。 - gards

@gards 你不能仍然使用header prop，然后使用ListEmpytComponent prop来显示spinner（或者内容准备好时）吗？ - ehutchllew

感觉有点像滥用 ListEmptyComponent 属性，将其用作“列表为空或正在加载”。我认为这样做是可行的，但我也真诚地想知道在这里 FlatList 是否会执行意外的操作（或者我期望的是否错误）。 - gards

这正是该方法的用途。因此，当没有数据时，您可以呈现某些内容。我们在生产应用程序中经常使用它。 - ehutchllew