ReactNative 使用百分比宽度时，aspectRatio 在某些情况下无法正确推断出高度，导致图片高度为 0，从而无法显示

大喜xi2026-01-13 11:04

为了确保图片能够正常显示，最稳妥的方法是使用 Dimensions 计算出精确的图片宽度和高度。

请按照以下步骤修改您的代码：

引入 Dimensions ：在文件顶部的 import 部分添加 Dimensions：
tsx 复制代码
```
import {
  Dimensions, // <--- 添加这一行
} from 'react-native';
```

计算图片尺寸 ：在 const styles = StyleSheet.create({ ... }) 之前，添加尺寸计算逻辑：

tsx 复制代码

// 计算九宫格图片尺寸
const { width: screenWidth } = Dimensions.get('window');
// 屏幕宽度 - section左右padding(32) - postCard左右padding(32) = 内容区域宽度
const contentWidth = screenWidth - 32 - 32;
// 间距设为内容宽度的 2%
const gap = contentWidth * 0.02;
// (总宽度 - 2个间距) / 3 = 单张图片宽度
const imageSize = (contentWidth - gap * 2) / 3;

更新 gridImage 样式 ：将 styles 中的 gridImage 修改为使用计算出的固定宽高，并将 imagesContainer 的 flexWrap 属性确保设置正确：

tsx 复制代码

const styles = StyleSheet.create({
  // ... 其他样式保持不变 ...
  
  imagesContainer: { 
    flexDirection: 'row', 
    flexWrap: 'wrap', 
    marginBottom: 8 
  },
  singleImage: { 
    width: '100%', 
    height: 180, 
    borderRadius: 8 
  },
  gridImage: { 
    width: imageSize, 
    height: imageSize, // 明确指定高度
    borderRadius: 8, 
    marginBottom: 8, 
    marginRight: gap // 使用计算出的间距
  },
  
  // ... 其他样式保持不变 ...
});

检查渲染逻辑中的间距处理：

tsx 复制代码

style={[
  styles.gridImage,
  (idx + 1) % 3 === 0 && { marginRight: 0 }
]}

这样修改后，每张图片都会有明确的宽度和高度，就能正常显示了。