React Native中Image组件defaultSource无法铺满视图问题求助

使用React Native的Image组件defaultSource属性设置占位图时，占位图无法铺满整个Image视图。已配置：

• resizeMode='cover'
• 组件样式：height: 120, width: 122, borderRadius: 70
• 占位图尺寸：252x249

不想使用任何钩子或第三方ImageView组件，当前加载完成后原图显示正常，但占位图显示异常。

代码如下：

<Image
  source={{ URI: `${BASE_URL}/file_uploads/${image}` }}
  defaultSource={require('./g-design.png')}
  resizeMode='cover'
  style={{ height: 120, width: 122, borderRadius: 70}} />

方法1：调整占位图尺寸与组件宽高完全匹配 #

将占位图裁剪为122x120（和Image组件的宽高一致），这样resizeMode='cover'会直接让图片铺满整个视图，不会出现留白或适配问题。

方法2：给Image组件添加overflow: 'hidden'样式 #

borderRadius可能会限制图片的渲染范围，添加overflow: 'hidden'可以确保图片完全填充到圆角容器内：

<Image
  source={{ URI: `${BASE_URL}/file_uploads/${image}` }}
  defaultSource={require('./g-design.png')}
  resizeMode='cover'
  style={{ 
    height: 120, 
    width: 122, 
    borderRadius: 70,
    overflow: 'hidden'
  }} />

方法3：修改resizeMode为'stretch'（备选） #

如果不想调整图片尺寸，可以尝试将resizeMode改为'stretch'，强制图片拉伸适配组件宽高。注意这会改变图片比例，仅当占位图与组件比例差异较小时适用：

<Image
  source={{ URI: `${BASE_URL}/file_uploads/${image}` }}
  defaultSource={require('./g-design.png')}
  resizeMode='stretch'
  style={{ height: 120, width: 122, borderRadius: 70}} />

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