React Native <Image/>本地图片宽设100%时比例异常问题

问题现象 #

• 给<Image/>组件设置width: "100%"和正确的aspectRatio属性时，本地图片在Android和Web端会显示错误的宽高比例
• 在线图片无此问题，仅需给本地图片的样式添加height: "auto"，就能恢复正常比例显示

代码示例 #

const styles = StyleSheet.create({
  img: { width: "100%" }
})

// 显示异常：本地图片比例错误
<Image
  source={require("./local-img.webp")}
  style={{ ...styles.img, aspectRatio: 646 / 1064 }}
/>

// 显示正常：添加height: "auto"后恢复正确比例
<Image
  source={require("./local-img.webp")}
  style={{ ...styles.img, height: "auto", aspectRatio: 646 / 1064 }}
/>

// 显示正常：在线图片无需额外设置height
<Image
  source={{ uri: "https://online-img.webp" }}
  style={{ ...styles.img, aspectRatio: 646 / 1064 }}
/>

效果对比 #

预期效果

实际效果（未添加height: "auto"时）

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