首页 文章

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

提问于
浏览 次
6

我使用的是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%', 
  }
});

enter image description here

正如您从图像中看到的那样，文本不是垂直居中的

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

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

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

react-native

4 回答

  • 8

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

    回复于
  • 5

    您可以向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>
    );
  }

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

    Link to snack.expo

    另一个选项 - 不更改FlatList样式 - 根据 this.state.listData.length 有条件地渲染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',
    }

});

    This is the snack.expo

    回复于
  • 1

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

    <FlatList 
    contentContainerStyle={customers.length === 0 && styles.centerEmptySet}
    data={customers}
    renderItem={({ item, index }) => (
        /// Your item here
    )}
    keyExtractor={(item, index) => {
        return String(index);
    }}
    ListEmptyComponent={<EmptySetCustomer />}
/>

    和这样的风格

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

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

    回复于
  • 1

    希望对你有帮助

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

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

    回复于

相关问题