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

Question

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

这是我的 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 不会滚动，除非我为正在呈现的项目设置固定高度。我不想这样做，因为一个项目可以是任何高度。

这是我的项目组件：

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;

我是否可以在不设置固定高度的情况下渲染这些项目？谢谢

Answer 1

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

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

Answer 2

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

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

FlatList not scrolling due to items not having a fixed height

reactjs

react-native

expo

react-native-flatlist