React Native：FlatList列表项如何根据图片尺寸自适应高度

你遇到的问题核心是所有列表项共用了同一个图片高度值，导致所有图片区域被拉伸到最高图片的尺寸。要实现每个列表项高度随自身图片自适应，按以下步骤调整：

1. 为每个Feed组件单独计算图片高度 #

在Feed组件内部，通过FastImage的onLoad回调获取当前图片的真实宽高，再根据屏幕宽度计算等比例的显示高度，替换掉全局的imageSize?.height：

import React, { useState } from 'react';
import { View, Dimensions } from 'react-native';
import FastImage from 'react-native-fast-image';

const SCREEN_WIDTH = Dimensions.get('window').width;

const Feed = ({ feed, navigation }) => {
  // 用state存储当前图片的计算后高度
  const [imageHeight, setImageHeight] = useState(0);

  const handleImageLoad = (event) => {
    const { width, height } = event.nativeEvent.source;
    // 按屏幕宽度等比例缩放计算显示高度
    const calculatedHeight = (SCREEN_WIDTH / width) * height;
    setImageHeight(calculatedHeight);
  };

  return (
    <View style={{ width: '100%' }}>
      {/* 这里放置列表项的其他内容，比如标题、描述等 */}
      <FastImage
        style={{ 
          width: SCREEN_WIDTH, 
          // 加载完成前用最小高度占位，避免布局跳动
          height: imageHeight || 100 
        }}
        source={{
          uri: feed?.mobileWEBPurl,
          priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.contain}
        fallback={true}
        onLoad={handleImageLoad}
        onError={() => console.log("Error loading image")}
      />
      {/* 其他内容 */}
    </View>
  );
};

export default Feed;

2. 确保FlatList不强制统一高度 #

检查FlatList配置，移除任何固定item高度的属性，让FlatList自动识别每个列表项的实际高度：

<FlatList
   data={filteredUsers}
   renderItem={({ item }) => <Feed {...item} navigation={navigation} />}
   keyExtractor={(item) => item?.id}
   // 移除所有固定item高度的配置
 />

3. 排查全局样式干扰 #

确认Feed组件的根View没有设置flex:1、固定高度或其他会拉伸内容的样式，保证根View随内容自适应高度。

调整完成后，每个列表项会根据自身图片的尺寸计算高度，实现你需要的auto效果，不会再出现所有项高度统一为最高图片尺寸的问题。

内容的提问来源于stack exchange，提问作者Beauty Verse