React Native中react-native-svg实现的SVG图标如何保持宽高比填充父容器

步骤1：调整SVG组件核心属性 #

你需要找到定义IconClose组件的位置，给它根节点<Svg>添加以下两个属性：

• 设置width="100%"、height="100%"，让SVG尺寸默认跟随父容器
• 设置preserveAspectRatio="xMidYMid meet"，这个属性会让SVG保持原有宽高比，自动缩放至完全适配父容器且不裁切，内容居中展示

如果你需要让SVG缩放至完全铺满父容器（允许裁切超出部分），可以把preserveAspectRatio的值换成xMidYMid slice

如果你的IconClose是通过svgr等工具自动生成、或者是第三方引入的组件，也可以直接在调用时透传属性：

<IconClose 
  style={styles.closeIcon} 
  width="100%" 
  height="100%" 
  preserveAspectRatio="xMidYMid meet" 
/>

步骤2：调整样式配置 #

你现有样式可以保留，只需要给closeIcon补充aspectRatio属性，值对应你SVG图标的原始宽高比即可。比如图标原始是2424的正方形，就设为1，如果是3216的长方形就设为2，示例如下：

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  closeContainer: {
    paddingHorizontal: 26,
    // 补充flex: 1确保容器占满分配的空间
    flex: 1,
  },
  closeIcon: {
    flex: 1,
    // 按你的SVG原始宽高比调整，示例为正方形
    aspectRatio: 1,
  },
})

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