React native React Native-View-won'；t使用页眉和页脚占用所有可用空间

我正在尝试创建一个带有页眉和页脚的页面，在页眉和页脚之间有一个占据所有剩余空间的视图，但该视图仅占据可用空间的一半，如下图所示：

以下是相关代码：

    <View style={{flex: 1, flexDirection: 'column'}}>
      <View style={{flex: 1, flexDirection: 'column', height: 120}}>

        <View style={{height: 70, borderWidth: 2}}>
          <Text> HEADER </Text>
        </View>
        <View style={{flexDirection: 'row', justifyContent: 'space-between', height: 50, alignItems: 'center', borderWidth: 2}}>
        // Buttons and stuff ..
        </View>

      </View>

      <View style={{padding: 15, borderWidth: 2, flex: 1}}>
        <View style={{flex: 1}}><Text>Desired Content</Text></View>
      </View>

      <View style={{height: 50, backgroundColor: 'lightgrey', justifyContent: 'center', alignItems: 'center', flexDirection: 'row'}}>
      // Here is my footer ..
      </View>

    </View>

标题
//钮扣之类的。。
所需内容
//这是我的页脚。。

问题在于您将

flex:1

设置为包装标题的视图

尝试简单地删除它：