由于项目没有固定高度，FlatList 不滚动答案

【问题标题】：FlatList not scrolling due to items not having a fixed height由于项目没有固定高度，FlatList 不滚动
【发布时间】：2020-12-19 04:23:33
【问题描述】：

我正在开发一个具有提要的应用程序。我正在使用 FlatList 来呈现从后端服务器获取的所有项目。

这是我的平面列表：

return (
      <View style={styles.flatListContainer}>
        <FlatList
          contentContainerStyle={styles.flatList}
          data={this.props.allRecommendations}
          keyExtractor={(item) => item.id.toString()}
          renderItem={(recommendationData) => (
            <RecommedationCard recommendationData={recommendationData} />
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  activityIndicatorScreen: {
    flex: 1,
    justifyContent: "center",
    alignContent: "center",
    backgroundColor: colors.secondaryLight,
  },
  flatListContainer: {
    flex: 1,
    width: "100%",
  },
  flatList: {
    justifyContent: "center",
    alignItems: "center",
  },
});

我注意到我的 FlatList 不会滚动，除非我为正在渲染的项目设置固定高度。我不想这样做，因为一个项目可以是任何高度。

这是我的 Item 组件：

import React, { Component } from "react";
import { View, Text, StyleSheet, Image } from "react-native";

import colors from "../../constants/colors";

class RecommendationCard extends Component {
  renderRecommendationImages = () => {
    const recommendationImages = this.props.recommendationData.item
      .recommendation_images;
    return recommendationImages.map((recommendationImage) => (
      <Image
        key={recommendationImage.id}
        style={styles.recommendationImage}
        source={{ uri: recommendationImage.img_url }}
      />
    ));
  };

  render() {
    return (
      <View style={styles.recommendationCardContainer}>
        <View style={styles.browserInfoContainer}>
          <Image
            style={styles.browserPfp}
            source={{
              uri: this.props.recommendationData.item.browser.profile_img_url,
            }}
          />
          <View style={styles.browserInfoTextContainer}>
            <Text style={styles.browserName} numberOfLines={1}>
              {this.props.recommendationData.item.browser.first_name}{" "}
              {this.props.recommendationData.item.browser.last_name}
            </Text>
            <Text style={styles.browserLocation} numberOfLines={1}>
              {this.props.recommendationData.item.browser.city}{" "}
              {this.props.recommendationData.item.browser.state},{" "}
              {this.props.recommendationData.item.browser.country}
            </Text>
          </View>
        </View>
        <View style={styles.recommendationInfoContainer}>
          <Text style={styles.recommendationTitle}>
            {this.props.recommendationData.item.title}
          </Text>
          <Text style={styles.recommendationContent}>
            {this.props.recommendationData.item.content}
          </Text>
          {this.renderRecommendationImages()}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  recommendationCardContainer: {
    width: 340,
    marginTop: 25,
    padding: 20,
    backgroundColor: "#fff",
    shadowColor: colors.darkColor,
    shadowOpacity: 0.15,
    shadowOffset: { height: 5, width: 0 },
    shadowRadius: 20,
    borderRadius: 5,
    elevation: 5,
  },
  browserInfoContainer: {
    width: "100%",
    flexDirection: "row",
  },
  browserPfp: {
    width: 60,
    height: 60,
    borderRadius: 10,
  },
  browserInfoTextContainer: {
    flexShrink: 1,
    height: 60,
    justifyContent: "center",
  },
  browserName: {
    marginStart: 20,
    fontSize: 16,
    fontFamily: "montserrat-semi-bold",
  },
  browserLocation: {
    marginTop: 6,
    marginStart: 20,
    fontSize: 15,
    fontFamily: "montserrat-regular",
  },
  recommendationInfoContainer: {
    flexShrink: 1,
    width: "100%",
    marginTop: 20,
  },
  recommendationTitle: {
    fontSize: 17,
    fontFamily: "montserrat-semi-bold",
  },
  recommendationContent: {
    marginTop: 10,
    fontSize: 15,
    fontFamily: "montserrat-regular",
  },
  recommendationImage: {
    marginTop: 10,
    width: "100%",
    height: "100%",
  },
});

export default RecommendationCard;

无论如何我可以在不设置固定高度的情况下渲染这些项目吗？谢谢。

【问题讨论】：

标签： reactjs react-native expo react-native-flatlist

【解决方案1】：

问题在于您的推荐图像高度。 height: 100% 为元素提供其父容器的 100% 高度，这就是您的问题通过为您的项目提供固定高度来解决的原因。给你的推荐图片一个高度而不是“100%”，那么你的物品就不需要一个固定的高度

 recommendationImage: {
    marginTop: 10,
    width: "100%",
    height: 200,
}

【讨论】：

嗯，好的。那解决了它。有什么解决方法吗？

【解决方案2】：

不幸的是，在 react-native 中，您无法在不提供初始高度的情况下渲染图像，这就是 flatlist 不显示项目的原因。

【讨论】：