FlatList占满全屏问题求助：如何将其高度限制为顶部100px？

问题出在两个地方：一是父容器SafeAreaView的居中布局把FlatList推到屏幕中间且让它占满可用空间，二是水平方向的FlatList没有显式设置高度，默认会填充父容器。按下面修改就能解决，同时保留FAB的原有样式：

修改后的完整代码 #

const DATA = [
    {
        id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
        title: 'First Item',
    },
    {
        id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
        title: 'Second Item',
    },
    {
        id: '58694a0f-3da1-471f-bd96-145571e29d72',
        title: 'Third Item',
    },
]

const LeftContent = props => <Avatar.Icon {...props} icon="folder" />

const Item = ({ title }) => (
    <Card style={{
        height: 70
    }}>
        <Card.Title title="Card Title" subtitle="Card Subtitle" left={LeftContent} />
    </Card>
)

const renderItem = ({ item }) => (
    <Item title={item.title} />
)

return (
    <SafeAreaView style={{
        flex: 1,
        // 移除居中属性，让子元素默认从上到下排列
        // justifyContent: 'center',
        // alignItems: 'center',
    }}>
        {/* 给FlatList设置固定高度100px，宽度占满屏幕 */}
        <FlatList
            style={{ height: 100, width: '100%' }}
            // 可选：如果要让列表内容在100px高度内垂直居中，加上下面这行
            // contentContainerStyle={{ justifyContent: 'center' }}
            horizontal
            data={DATA}
            renderItem={renderItem}
            keyExtractor={item => item.id}
        />

        <FAB
            icon="plus"
            style={styles.fab}
            onPress={() => console.log('Pressed')}
        />
    </SafeAreaView>
)

const styles = StyleSheet.create({
    fab: {
        position: 'absolute',
        margin: 16,
        right: 25,
        bottom: 100,
    },
})

关键修改点说明 #

• 移除SafeAreaView的justifyContent: 'center'和alignItems: 'center'，让FlatList默认排列在屏幕顶部，而非居中
• 给FlatList添加style={{ height: 100, width: '100%' }}，强制它仅占用100px高度，宽度铺满屏幕（若不需要满屏宽度可自行调整）
• 若希望FlatList内的卡片在100px高度内垂直居中，可添加contentContainerStyle={{ justifyContent: 'center' }}，避免卡片贴在顶部

内容的提问来源于stack exchange，提问作者volka nosky