react-native - ListEmptyComponent 在 React Native 部分列表中没有使用 flex 1 全屏显示

Question

所以我正在使用 React Native Section List，下面是我的 ListEmptyContent 代码

// define your styles
const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    marginLeft: 10,
    marginRight: 10,
  },
  imageStyle: {
    width: 140,
    height: 120,
  },
  titleStyle: {
    fontSize: 14,
    color: '#363a45',
  },
  subTitleStyle: {
    fontSize: 12,
    color: '#898d97',
  },
});
// create a component
const GPEmtptyTransaction = ({ firstLine, secondLine }) => {
  return (
    <View style={styles.container}>
      <Image source={images.emptyTransactionIcon} style={styles.imageStyle} />
      <Text style={styles.titleStyle}>{firstLine}</Text>
      <Text style={styles.subTitleStyle}>{secondLine}</Text>
    </View>
  );
};

但是当 EmptyTemplate 被渲染时，它会在 Top 上渲染，而不是拉伸(stretch)到全屏。

Answer 1

这对我有用，申请flexGrow: 1至contentContainerStyle

<FlatList
    data={this.props.operations}
    contentContainerStyle={{ flexGrow: 1 }}
    ListEmptyComponent={<EmptyPlaceHolder />}
    renderItem={this.renderOperationItem} />