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