平面列表不会滚动；具有额外空间的单元格渲染

Question

我遇到了一个非常奇怪的问题。当我使用FlatList呈现产品列表时，这就是在我的单元格之间放置一个巨大的空间。 （我已注释掉背景图片以加快加载速度，但两种方式的行为相同）

ProductsListScreen.js

class ProductsListScreen extends Component<Props> {
  render() {
    return <WithFlatList products={this.props.products} />;
   // return <WithMap products={this.props.products} />;
  }
}

export default connect(({ productsReducer }) => ({
  products: Object.values(productsReducer.products)
}))(ProductsListScreen);

const WithFlatList = ({ products }) => {
  return (
    <FlatList
      data={products}
      renderItem={({ item }) => <ProductListCellView product={item} />}
      keyExtractor={item => `${item.id}`}
    />
  );
};

const WithMap = ({ products }) => {
  return (
    <ScrollView contentContainerStyle={styles.container}>
      {products.map(p => (
        <ProductListCellView product={p} key={p.id} />
      ))}
    </ScrollView>
  );
};

const styles = {
  container: {
    flex: 1,
    height: "100%"
  }
};

ProductsListCellView.js

const ProductListCellView = ({ product }: Props) => {
  return (
    <View style={styles.cellContainer}>
      <ImageBackground
        // source={{ uri: product.images[0].src }}
        style={styles.backgroundImage}
        imageStyle={styles.imageStyle}
      >
        <View style={styles.textContainer}>
          <NameText> {product.name} </NameText>
          <PriceText> ${product.price} </PriceText>
        </View>
      </ImageBackground>
    </View>
  );
};
export default ProductListCellView;

const styles = {
  cellContainer: {
    borderBottomWidth: 0.5,
    borderBottomColor: "grey",
    width: "100%",
    height: "50%",
    borderWidth: 3,
    backgroundColor: "lightblue"
  },
  backgroundImage: {
    width: "100%",
    height: "100%",
    justifyContent: "center"
  },
  imageStyle: {
    height: "140%",
    width: "140%",
    left: "-20%",
    top: "-20%"
  },
  textContainer: {
    backgroundColor: "black",
    maxWidth: "50%",
    padding: 5,
    opacity: 0.75
  }
};
const baseSize = 14;
const text = {
  name: {
    fontSize: baseSize + 8,
    fontWeight: "bold",
    color: "white"
  },
  price: { fontSize: baseSize + 4, color: "white" }
};
const NameText = props => <Text style={text.name}>{props.children}</Text>;
const PriceText = props => <Text style={text.price}>{props.children}</Text>;

似乎无论我将height的{​​{1}}设置为什么，它都会在屏幕的该百分比（或根据屏幕高度显示的某个容器）渲染该单元格含量在相同百分比的单元格中。

此外，列表没有滚动。我可以看到下一个单元格从底部窥视，因此整个列表都在渲染，但是当我尝试滚动时，它会反弹回来。我尝试过用cellContainer包装各种东西，但是没有运气。 （我在下面的屏幕截图中将ScrollView的高度更改为15％）

当我手动映射项目时（将上面代码中的return切换为使用`，则高度可以正常工作，但滚动仍然不起作用：

还有其他人有这个问题吗？

Answer 1

不是将height中的cellContainer设置为％值，而是将其设置为静态height，或使用padding自动调整每个项目的大小。