Question

我正在尝试创建一个在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像素-只有通过有意滚动到FlatList认为结尾处的位置，才能访问其中的最后100像素。只要标头高，FlatList“额外”高度就是完全。实际的工作代码以及小吃的链接（应该允许您在浏览器中复制，或者如果已安装世博会，则可以在手机上复制）：

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()
    )
  }
}

关于弹性布局如何工作，我有什么误解？我的印象是FlatList组件被flexGrow: 1的东西有效地包裹着，因此容器将增长以填充可用空间但不会溢出。显然，列表的垂直内容可能是空间允许的数量的十倍，但实际上它与标题的高度完全不符，这一事实令人怀疑。这到底是怎么回事？如果您想查看我认为“正常”的行为，请尝试在我发布的代码的render方法中切换注释的方法（如果屏幕较大，则在数据中添加项目，以至于溢出）。

Answer 1

FlatList实际上接受样式标头的道具，这比尝试创建自己的标题要好得多：FlatList Header

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

我希望这会有所帮助！

当使用标题渲染时，React Native FlatList扩展到屏幕之外

1 个答案: