ListEmptyComponent未在React Native Section List中使用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上而不会拉伸到全屏.

Answer 1

这对我有用，适用flexGrow: 1于contentContainerStyle

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

Answer 2

我通过以下简单的技巧获得了成功

import { Dimensions } from "react-native";
const SCREEN_HEIGHT = Dimensions.get("window").height;

比我声明空组件

_listEmptyComponent = () => {
    return (
      <View
        style={{
          justifyContent: "center",
          alignItems: "center",
          height: SCREEN_HEIGHT , //responsible for 100% height
          backgroundColor: "#ddd"
        }}
      >
        <Text
          style={{
            justifyContent: "center",
            alignItems: "center",
            fontSize: 20
          }}
        >
          No Contracts Found
        </Text>
      </View>
    );

最后Flatlist看起来像：

          <FlatList
            extraData={this.props.contracts}
            data={this.props.contracts}
            ListEmptyComponent={this._listEmptyComponent.bind(this)}
            renderItem={({ item }) => (
              <Text>{item.contractName}>
              <Text/>
            )}
            keyExtractor={(item, index) => item.id}
          />