限制 FlatList 的大小，以免强制页脚离开屏幕

Question

有没有办法限制 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>
            )} 
            />
        <View style={{backgroundColor: 'green', height: 40}} />
    </View>
}

在响应式设计模式下，它呈现为：

Answer 1

实现此目的的一种方法是使用页脚的绝对位置并将列表的下边距设置为与页脚的高度相等。像这样的东西：

<View style={{flex: 1}}>
  <View style={{ backgroundColor: 'red', height: 40 }} />
  <FlatList
    style={{ marginBottom: 40 }}
...
  />
  <View
    style={{
      backgroundColor: 'green',
      width: '100%',
      height: 40,
      position: 'absolute',
      bottom: 0,
    }}
  />
</View>