React Native - 视图不会占用页眉和页脚的所有可用空间

Question

我想创建一个页眉和页脚，并且它们之间有一个视图占用所有剩余空间，但视图只占用一半可用空间，就像在下面的图片：

Screenshot of the problem

下面是相关代码：

<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> 

Answer 1

的问题是，你设置flex: 1来包裹你的头的视图。

尽量简单地将其取出：

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