如何使用FlexBox制作粘性页脚并做出反应

我在Flexbox中使用React-Native路由器。最后，我想展示FlatList的全屏显示和粘性页脚。我尝试flexGrow: 1为FlatList和flexShrink: 0View页脚指定，但是它不起作用。我正在Expo中构建应用程序，并在iPhone上查看结果。

import React, {Component} from 'react';
import {
  Text,
  View,
  FlatList,
} from 'react-native'
import {Provider} from 'react-redux'
import {NativeRouter, Route, Link} from 'react-router-native'

export default class App extends Component {
  render() {
    return <NativeRouter>
      <View style={{
        display: "flex",
        flexDirection: "column",
        padding: 10,
      }}>
        <View style={{
          display: "flex",
          flexDirection: 'row',
          justifyContent: 'space-around'
        }}>
          <Link
              to="/lobby"
              underlayColor='#f0f4f7'
              style={{
                flex: 8,
                alignItems: 'center',
                padding: 10,
              }}>
            <Text>Lobby</Text>
          </Link>
          <Link
              to="/"
              underlayColor='#f0f4f7'
              style={{
                flex: 2,
                alignItems: 'center',
                padding: 10,
              }}>
            <Text>Home</Text>
          </Link>
        </View>

        <Route exact path="/" component={Home}/>
        <Route path="/lobby" component={Lobby}/>
      </View>
    </NativeRouter>
  }
}

const Home = () => (
    <Text>
      Home
    </Text>
);


class Lobby extends Component {
  render() {
    return <View style={{
      flexGrow: 1,
      flexDirection: "column",
      // justifyContent: "space-between"
    }}>
      <FlatList
          style={{
            flexGrow: 1,
          }}
          data={[
            {key: 'Spring Game'},
            {key: 'Summer Game'},
            {key: 'Fall Game'},
            {key: 'Winter Game'},
          ]}
          renderItem={({item}) => <Text style={{
            display: "flex",
            flex: 1,
            padding: 10,
            fontSize: 18,
            height: 44,
            alignContent: "center"
          }}>{item.key}</Text>}
      />

      <View style={{
        display: "flex",
        flexDirection: "row",
        backgroundColor: "#848441",
        flexShrink: 0,
      }}>
        <Text style={{
          flex: 6,
          alignSelf: "flex-end"
        }}>Footer</Text>
      </View>
    </View>
  }
}