如何让Image组件适配带最大宽高的父View？当前Image未正常显示

你的问题核心是Image组件缺少明确的尺寸约束，加上flex:1在Image上无法正确触发适配逻辑，导致图片不显示。按你的需求，可通过以下方式修改：

方案一：给Image设置maxWidth和maxHeight，配合父容器约束 #

修改样式如下：

"view": {
  position: "relative",
  justifyContent: "center", 
  alignItems: "center",
  maxHeight: 400, 
  maxWidth: "90%"
},
"image": {
  resizeMode: "contain",
  maxWidth: "100%",
  maxHeight: "100%"
}

• 父容器的maxHeight和maxWidth会限制Image的最大范围
• Image的maxWidth:100%和maxHeight:100%会让图片根据自身宽高比，自动适配到父容器的最大可用空间：竖图时高度触达400，横图时宽度触达父容器的90%宽度

方案二：使用aspectRatio（需提前获取图片宽高比） #

如果能提前拿到图片的原始宽高比，可以直接设置aspectRatio，配合父容器约束实现精准适配：

// 假设已获取图片宽高比为 图片宽度/图片高度
"image": {
  resizeMode: "contain",
  maxWidth: "100%",
  maxHeight: 400,
  aspectRatio: 图片宽/图片高
}

这种方式能彻底避免图片拉伸变形，适配效果更稳定。

原代码失效原因 #

• React Native的Image组件默认需要明确的尺寸或父容器的强尺寸约束，仅flex:1无法让Image自动填充空间
• Image上的position:relative是多余的，父容器的定位已足够控制布局

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