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

Posted 2023-02-19

【中文标题】由于项目没有固定高度，FlatList 不滚动

【英文标题】：FlatList not scrolling due to items not having a fixed height

【发布时间】：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;

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

【参考方案1】：

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

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

【讨论】：

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

【参考方案2】：

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