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