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

我使用的是React本机版本0.43.0，它不支持FlatList的ListMPtyComponent。因此，我使用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%', 
  }
});

import React，{Component}来自'React'；
从“react native”导入{Text，View，StyleSheet，FlatList}；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
listData:[]
}
}
render（）{
返回(
空}
data={this.state.listData}
ListHeaderComponent={（）=>（！this.state.listData.length？
列表是空的
：null）
}
/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1
},
emptyMessageStyle：{
textAlign:'中心'，
//我目前的做法是垂直居中
//这不符合预期
马金托普：“50%，
}
});

从图像中可以看到，文本没有垂直居中

知道如何在平面列表中垂直居中吗

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

---

这是指向snack.expo的链接-

您可以在平面列表中添加样式

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>
    );
  }  

---

他们修复了此pr中的

ListentyComponent

。但它们将在0.56后发货

---

更新：签出正式文档

作为一种临时解决方法，您可以有条件地将样式设置为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并删除解决方案，希望这将对您有所帮助

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

}
/>

---

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

您必须将props

ListEmptyComponent

与

contentContainerStyle={{flex:1}}

flex:1将设置容器中的最大高度，并允许您垂直居中。即：

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

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

希望对我有帮助。

这是我的决心

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

}
/>

我不知道我们可以设计平面列表，这是个好主意。但我不想引入另一种检查平面列表样式，我想将列表空文本的呈现作为一个组件单独保留。是否有可能在不更改平面列表样式的情况下，仅通过更改该组件样式来执行此操作。可能会基于

this.state.listData.length

有条件地呈现平面列表。我正在编辑我的答案以添加此方法。但我希望功能拉刷新，因此只有我进入FlatList。然后我只能考虑有条件地设置FlatList的样式<代码>这是我的工作。你能解释一下为什么我们要添加

contentContainerStyle={{flexGrow:1}}

？@OliverD读了这篇文章，你就会知道：）谢谢，我明白了，但我的确切意思是为什么我们要使用flexGrow？Not Flex或其他东西指出，此解决方案虽然可以处理空组件，但也会影响实际列表内容

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