React native 使用标题渲染时，反应扩展到屏幕之外的本机平面列表

我试图创建一个在平面列表组件上方呈现的标题。如果屏幕高度为800px，标题高度为100px，则FlatList应使用flexGrow:1填充700px，如果列表项过多，则可滚动。基本标记如下：

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

  <FlatList ... />
</View>

---

我对flex布局的工作原理有什么误解？我的印象是，FlatList组件实际上是由flexGrow:1包装的，因此容器将增长以填充可用空间，但不会溢出。显然，该列表的垂直内容可能是空间允许的十倍，但它与标题的高度完全不同的事实是非常可疑的。这里到底发生了什么？如果你想知道我考虑的工作行为，试着在我发布的代码的渲染方法中切换评论方法，如果你有一个较大的屏幕，那么它就添加到数据中，这样它就溢出了。

< P>扁平化列表实际上接受了一个造型头的支撑，这比创建你自己的： 就flex而言，您应该将flex或flexGrow向下传递给实际包装平面列表的组件

---

我希望这有帮助

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

就flex而言，您应该将flex或flexGrow向下传递给实际包装平面列表的组件

我希望这有帮助

只需为父视图的样式指定flex:1即可

只需为父视图的样式指定flex:1即可

---

不幸的是，我不能使用FlatList header属性，因为在实际代码中，列表实际上是基于一些情况呈现的。加载数据时，会有一个加载微调器，因此在这种情况下，我无法仅为标题呈现列表组件。实际上，我希望始终在屏幕上呈现标题，然后在页面上呈现内容的几种可能性中的一种。@gards您不能仍然使用标题道具吗，然后使用ListMPyComponent道具显示微调器-或准备就绪时的内容？这感觉有点像滥用ListMPyComponent道具用于列表清空或加载。我认为它会起作用，但我也真诚地想知道这里的平面列表做了什么意想不到的事情，或者为什么我的预期是错误的。这正是该方法的目的。因此，您可以在没有数据的情况下渲染某些内容。我们一直在生产应用程序中使用它。不幸的是，我不能使用FlatList header属性，因为在实际代码中，列表实际上是基于一些情况呈现的。加载数据时，会有一个加载微调器，因此在这种情况下，我无法仅为标题呈现列表组件。实际上，我希望始终在屏幕上呈现标题，然后在页面上呈现内容的几种可能性中的一种。@gards您不能仍然使用标题道具吗，然后使用ListMPyComponent道具显示微调器-或准备就绪时的内容？这感觉有点像滥用ListMPyComponent道具用于列表清空或加载。我认为它会起作用，但我也真诚地想知道这里的平面列表做了什么意想不到的事情，或者为什么我的预期是错误的。这正是该方法的目的。因此，您可以在没有数据的情况下渲染某些内容。我们一直在生产应用程序中使用它。

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

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