使用标题呈现时，React Native FlatList 超出屏幕范围

Posted 2023-02-19

【中文标题】使用标题呈现时，React Native FlatList 超出屏幕范围

【英文标题】：React Native FlatList extending beyond screen when rendered with a header

【发布时间】：2019-07-01 00:38:21

【问题描述】：

我正在尝试创建一个在 FlatList 组件上方呈现的标题。如果屏幕是 800px 高，标题是 100px 高，FlatList 应该填满 700px（flexGrow: 1），并且可以滚动（如果ListItems 太多）。基本标记如下：

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

  <FlatList ... />
</View>

但是，当我渲染标题时，FlatList 组件的高度实际上是 800px，与 flexGrow: 1 匹配的包装组件的高度。我可以说它是 800 像素——最后 100 像素只能通过有意滚动过去 FlatList 认为结束的位置来访问。 FlatList“额外”高度正好与标题高度一样。实际工作代码，以及小吃链接（应该允许您在浏览器中重现，如果您安装了 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 的东西有效地包裹，因此容器将增长以填充可用空间但不会溢出。显然，列表的垂直内容可能是空间允许的十倍，但它完全偏离标题高度这一事实非常可疑。这里到底发生了什么？如果您想查看我认为“有效”的行为，请尝试在我发布的代码的渲染方法中切换注释方法（如果您的屏幕较大，则将项目添加到数据中以使其溢出）。

【参考方案1】：

只需将flex:1 赋予您父母View 的样式即可。

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

【参考方案2】：

FlatList 实际上接受了一个用于设置标题样式的道具，这比尝试创建自己的标题要好得多：FlatList Header

就 flex 而言，您应该将 flex 或 flexGrow 传递给实际包装 FlatList 的 <View> 组件。

我希望这会有所帮助！

【讨论】：

不幸的是，我不能使用 FlatList 标头属性，因为在实际代码中，列表实际上是基于少数情况呈现的。当数据加载时，有一个加载微调器，所以在这种情况下，我不能只为标题渲染列表组件。我实际上希望始终呈现屏幕的标题，然后将内容的几种可能性之一呈现到页面。

@gards 你不能仍然使用 header 道具，然后使用 ListEmpytComponent 道具来显示微调器 - 或准备好的内容？

这感觉有点像滥用ListEmptyComponent 属性被用作“列表为空或加载”。我认为它会起作用，但老实说，我也很想知道 FlatList 在这里做了什么意想不到的事情（或者为什么我的预期是错误的）。

这正是该方法的用途。所以你可以在没有数据的时候渲染一些东西。我们一直在生产应用程序中使用它。