ReactネイティブのflexBoxフッターが機能しない

Question

React Nativeを使用してフッターを設定する方法をスタックオーバーフローで検索しました。 と私は私が続くソリューション

https://stackoverflow.com/a/31249011/8226957

を発見し、ビューをrootにstyle={{flex: 1}}を置くが、それは動作しません。

<View style={{flex: 1}}> 
    <ScrollView> 
     <FlatList 
      data={this.state.datas} 
      renderItem={({item}) => 
       <TouchableOpacity onPress={() => {this._deleteKeyFromAsyncStorage(item.key)}}> 
        <Text style={styles.item}> 
         {item.value} 
        </Text> 
       </TouchableOpacity> 
      } 
     /> 
    </ScrollView> 
    <View> 
     <TextInput 
      style={{height: 40, borderColor: 'gray', borderWidth: 1}} 
      onChangeText={(text) => this.setState({text})} 
      value={this.state.text} 
     /> 
     <TouchableOpacity onPress={this._onAddButton}> 
      <View style={{ 
       height: 50, 
       backgroundColor: 'steelblue', 
       alignItems: 'center', 
       justifyContent: 'center', 
      }}> 
       <Text style={{textAlign: 'auto'}}>ADD</Text> 
      </View> 
     </TouchableOpacity> 
    </View> 
</View> 

私がそれに従うと、私は消えたリストを見る。 どうすればこの問題を解決できますか？

Answer 1

justifyContent : 'space-between'を追加し、

<View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between'}}> 

Answer 2

は、問題が解決しない場合は、一定の高さを設定してみてください<View style={{ flex: 1 }}>

で<ScrollView>を包むようにしてくださいあなたの問題を解決しなければならないflexDirection: 'column'を追加しようともあなたのフッター：<View style={{ height: 90 }}>