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

Question

我使用的是React-Native版本0.43.0,它不支持FlatList的ListEmptyComponent.因此,当列表为空时,我使用ListHeaderComponent渲染视图,

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%', 
  }
});

从图像中可以看出,文本不是垂直居中的

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

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

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

Answer 1

他们在这个pr https://github.com/facebook/react-native/pull/18206中修复了ListEmptyComponent .但他们将在0.56发货.

Answer 2

希望能帮到你

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

将您的UI放置在renderEmptyContainer（）方法中并开始操作，只要您的列表为空，就会显示Empty容器

Answer 3

您可以向FlatList添加样式.

const styles = StyleSheet.create({
  container: {
    flex:1
  },
  listStyle: {
    justifyContent: 'center'
  },
  emptyMessageStyle: {
    textAlign: 'center',
    }

});

  render() {
    return (
      <View style={styles.container}>
        <FlatList style={styles.listStyle}
          renderItem={() => null}
          data={this.state.listData}
          ListHeaderComponent={() => (!this.state.listData.length ? 
            <Text style={styles.emptyMessageStyle}>The list is empty</Text>  
            : null)}
        />
      </View>
    );
  }  

当列表不为空时,这将使列表中的项目居中.如果您不喜欢非空样式,则可能必须应用其他样式(当列表不为空时).

链接到snack.expo

另一个选项 - 不改变FlatList样式 - 有条件地渲染FlatList this.state.listData.length

render() {
    return (
      <View style={styles.container}>
        {
          this.state.listData.length?

          (<FlatList 
            renderItem={() => null}
            data={this.state.listData}
          />) 
          :
          (
            <View style={styles.emptyListStyle}>
              <Text style={styles.emptyMessageStyle}>The list is empty</Text>  
            </View>
          )
        }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1
  },
  emptyListStyle: {
    flex: 1,
    justifyContent: 'center'
  },
  emptyMessageStyle: {
    textAlign: 'center',
    }

});

这是snack.expo

Answer 4

这对我来说是一个决心。

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

Answer 5

您必须将 propsListEmptyComponent与contentContainerStyle={{flex:1}}flex:1结合使用将设置容器中的最大高度并允许您垂直居中。IE：

<FlatList 
    ...
    contentContainerStyle={customers.length === 0 && styles.centerEmptySet}
    ListEmptyComponent={<EmptySetCustomer />}
/>

请注意，当列表不为空时，您必须设置一个条件来删除 flex:1。允许滚动。

希望它会有所帮助。