我使用的是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发货.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。