react-native – 使用ListHeaderComponent在FlatList的屏幕中央显示列表空消息

前端之家收集整理的这篇文章主要介绍了react-native – 使用ListHeaderComponent在FlatList的屏幕中央显示列表空消息前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用的是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%',}
});

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

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

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

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

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

猜你在找的React相关文章