我正在尝试创建一个头部,它会在
然而,当我渲染标题时,
我对flex布局的工作方式有什么误解吗?我原本认为
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方法中切换已注释的方法(并添加数据项,如果您的屏幕更大,则会溢出)。
FlatList
的头部属性,因为在实际代码中,列表实际上是基于几种情况进行渲染的。当数据正在加载时,会出现加载旋转器,因此在这种情况下,我不能仅为标题呈现列表组件。实际上,我希望始终为屏幕呈现标题,然后将一些可能的内容之一呈现到页面上。 - gardsListEmptyComponent
属性,将其用作“列表为空或正在加载”。我认为这样做是可行的,但我也真诚地想知道在这里FlatList
是否会执行意外的操作(或者我期望的是否错误)。 - gards