javascript - 使用 ListHeaderComponent 在 FlatList 的屏幕中心显示列表空消息

Question

我正在使用不支持 FlatList 的 ListEmptyComponent 的 React-Native 版本 0.43.0。因此，当列表为空时，我使用 ListHeaderComponent 呈现 View ，

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

Answer 1

希望对你有帮助

<FlatList
    contentContainerStyle={{ flexGrow: 1 }}
    disableVirtualization={false}
    data={this.state.data}
    renderItem={this.renderItem}
    ListEmptyComponent={this.renderEmptyContainer()}
      />
    }
  />

将您的 UI 放在 renderEmptyContainer() 方法中并繁荣，只要您的列表为空，就会显示空容器