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

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

更新：查看官方文档ListEmptyComponent

Answer 2

希望这对您有帮助

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

将您的UI放置在renderEmptyContainer（）方法中，当列表为空时，将显示Empty容器

Answer 3

您可以向FlatList添加样式。

this.state.listData.length

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

Link to snack.expo

另一个选项 - 不更改FlatList样式 - 根据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', } });

有条件地呈现FlatList

{{1}}

This is the snack.expo

Answer 4

您必须将道具ListEmptyComponent与contentContainerStyle={{flex:1}}结合使用flex：1将在容器中设置最大高度，并允许您垂直居中。即：

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

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

希望这会有所帮助。

Answer 5

作为一种临时解决方法，您可以有条件地将一个样式设置为contentContainer，以便仅像这样设置空集

centerEmptySet: { justifyContent: 'center', alignItems: 'center', height: '100%' }

和这样的风格

{{1}}

然后在2-3周内我们可以更新到0.56并删除解决方法

Answer 6

这个解决方法对我来说

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

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

6 个答案: