如何限制FlatList尺寸以确保底部绿色View始终可见？

可以实现，核心是通过flex布局给FlatList分配固定可用空间，让它在内容超出时内部滚动，以此保证底部绿色View始终可见。

修改后的代码如下：

const FlatListTest = () => {
    const data = []
    for (let i = 0 ; i < 30; i++) {
        data.push(i)
    }

    return <View style={{flex: 1}}>
        <View style={{backgroundColor: 'red', height: 40}} />
        <FlatList
            data={data}
            renderItem={item => (
                <Text>
                    {item.item}
                </Text>
            )}
            style={{flex: 1}} // 关键修改：让FlatList占据剩余可用空间
            />
        <View style={{backgroundColor: 'green', height: 40}} />
    </View>
}

关键说明 #

• 父容器已设置flex:1，确保它占据屏幕全部可用空间
• 给FlatList添加style={{flex:1}}后，它会自动填充顶部红色View和底部绿色View之间的剩余空间
• 当列表数据过多时，FlatList会启用内部滚动，不会撑开父容器，底部绿色View始终固定在屏幕底部

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