react-native – 使用ListHeaderComponent在FlatList的屏幕中央

import React,{ Component } from 'react';
import { Text,View,StyleSheet,FlatList } from 'react-native';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listData: []
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          renderItem={() => null}
          data={this.state.listData}
          ListHeaderComponent={() => (!this.state.listData.length? 
            <Text style={styles.emptyMessageStyle}>The list is empty</Text>  
            : null)
          }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1
  },emptyMessageStyle: {
    textAlign: 'center',//My current hack to center it vertically
    //Which does not work as expected
    marginTop: '50%',}
});

As you can see from the image the text is not centered vertically

知道如何在FlatList中垂直居中吗？

我已经尝试过应用justifyContent,alignItems等但没有用.

这是snack.expo – https://snack.expo.io/S16dDifZf的链接