React Native中SVG图片无法在不同尺寸设备上正常自适应缩放

问题原因 #

• 硬编码了SVG 9:16的宽高比，仅匹配iPhone 8 Plus这类16:9比例的设备，iPad屏幕比例为4:3，和该比例不匹配，所以出现显示异常
• 没有显式设置SVG的preserveAspectRatio属性，不同设备的默认渲染规则不一致会导致缩放差异
• 使用静态的Dimensions.get获取屏幕尺寸，无法响应设备旋转、iPad分屏等尺寸变化场景，取值可能不准确

修复方案 #

根据你的显示需求选择对应配置即可：

1. 保持SVG原始比例，占满整个屏幕（超出部分裁切，无拉伸）：给SVG设置preserveAspectRatio="xMidYMid slice"，替换静态尺寸获取方式为动态的useWindowDimensions
2. 不需要保持SVG比例，强制拉伸占满整个屏幕宽高：给SVG设置preserveAspectRatio="none"
3. 完整显示SVG不裁切：给SVG设置preserveAspectRatio="xMidYMid meet"，多余区域会自动留空

修改后的参考代码如下：

import * as React from "react";
import Svg, { Defs, G, Path, Text, TSpan, Circle } from "react-native-svg";
/* SVGR has dropped some elements not supported by react-native-svg: style */

import { useWindowDimensions, View } from "react-native";

function SvgComponent(props) {
  // 动态获取当前屏幕宽高，支持响应尺寸变化
  const { width: windowWidth, height: windowHeight } = useWindowDimensions();

  return (
    // 外层容器直接占满全屏
    <View style={{ width: windowWidth, height: windowHeight }}>
      <Svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 1080 1920"
        width="100%"
        height="100%"
        {/* 按需求替换preserveAspectRatio的值即可 */}
        preserveAspectRatio="xMidYMid slice"
      >
        {/* 原有SVG内部代码无需修改 */}
        <Defs></Defs>
        <G id="prefix__Layer_2" data-name="Layer 2">
          <G id="prefix__Layer_1-2" data-name="Layer 1">
            <Path fill="#006837" d="M.5.5h1079v1919H.5z" />
            <Path d="M1079 1v1918H1V1h1078m1-1H0v1920h1080V0z" />
            <Text
              transform="matrix(1.5 0 0 1 13 148.09)"
              fontFamily="ArialMT,Arial"
              fill="#fff"
              fontSize={106}
            >
              <TSpan className="prefix__cls-3">{"T"}</TSpan>
              <TSpan x={62.83} y={0}>
                {"O"}
              </TSpan>
              <TSpan x={145.28} y={0} letterSpacing="-.02em">
                {"P"}
              </TSpan>
              <TSpan x={214.07} y={0} />
              <TSpan x={243.52} y={0} letterSpacing="-.07em">
                {"P"}
              </TSpan>
              <TSpan x={306.35} y={0} letterSpacing={0}>
                {"AGE"}
              </TSpan>
              <TSpan className="prefix__cls-3" x={530.21} y={0} />
              <TSpan x={557.74} y={0}>
                {"TS"}
              </TSpan>
            </Text>
            <Text
              transform="matrix(1.5 0 0 1 13 1888.09)"
              fontSize={79}
              fontFamily="ArialMT,Arial"
              fill="#fff"
            >
              {"BOT"}
              <TSpan className="prefix__cls-8" x={162.4} y={0}>
                {"T"}
              </TSpan>
              <TSpan x={209.23} y={0}>
                {"OM "}
              </TSpan>
              <TSpan x={358.43} y={0} letterSpacing="-.07em">
                {"P"}
              </TSpan>
              <TSpan x={405.26} y={0}>
                {"AGE"}
              </TSpan>
              <TSpan className="prefix__cls-8" x={572.09} y={0} />
              <TSpan x={592.62} y={0}>
                {"TS"}
              </TSpan>
            </Text>
            <Circle className="prefix__cls-10" cx={514.5} cy={396.5} r={129} />
            <Path d="M514.5 268a128.51 128.51 0 11-90.86 37.64A127.66 127.66 0 01514.5 268m0-1A129.5 129.5 0 10644 396.5 129.5 129.5 0 00514.5 267z" />
            <Circle className="prefix__cls-10" cx={179.5} cy={729.5} r={129} />
            <Path d="M179.5 601a128.51 128.51 0 11-90.86 37.64A127.66 127.66 0 01179.5 601m0-1A129.5 129.5 0 10309 729.5 129.5 129.5 0 00179.5 600z" />
            <Circle className="prefix__cls-10" cx={852.5} cy={748.5} r={129} />
            <Path d="M852.5 620a128.51 128.51 0 11-90.86 37.64A127.66 127.66 0 01852.5 620m0-1A129.5 129.5 0 10982 748.5 129.5 129.5 0 00852.5 619z" />
            <Circle className="prefix__cls-10" cx={514.5} cy={1007.5} r={129} />
            <Path d="M514.5 879a128.51 128.51 0 11-90.86 37.64A127.66 127.66 0 01514.5 879m0-1A129.5 129.5 0 10644 1007.5 129.5 129.5 0 00514.5 878z" />
            <Path
              className="prefix__cls-10"
              d="M36.99 1244.17l-28.95-91.2 64.51-70.67 93.46 20.53 28.95 91.2-64.51 70.67-93.46-20.53z"
            />
            <Path d="M72.72 1082.85l92.9 20.4 28.77 90.65-64.11 70.25-92.9-20.4-28.77-90.65 64.11-70.25m-.34-1.1l-64.9 71.1 29.12 91.75 94 20.65 64.9-71.1-29.1-91.75-94-20.65z" />
            <Path
              className="prefix__cls-10"
              d="M863.74 1280.56l-66.18-120.49 71.26-117.56 137.44 2.93 66.18 120.49-71.26 117.56-137.44-2.93z"
            />
            <Path d="M869.1 1043l136.86 2.92 65.9 120-71 117.07-136.86-2.92-65.9-120 71-117.07m-.56-1l-71.56 118 66.46 121 138 3 71.56-118-66.46-121-138-3z" />
            <Path
              className="prefix__cls-10"
              d="M293.27 1553.17l35.61-150.02 147.73-44.18 112.12 105.86-35.61 150.02-147.73 44.18-112.12-105.86z"
            />
            <Path d="M476.48 1359.53L588.18 1465l-35.48 149.46-147.18 44L293.82 1553l35.48-149.47 147.18-44m.26-1.12l-148.28 44.34-35.75 150.59 112.55 106.25 148.28-44.34 35.75-150.59-112.55-106.25z" />
            <Path
              className="prefix__cls-10"
              d="M708.09 1692.49a21.08 21.08 0 01-20.4-26l54.77-230.76a21 21 0 0120.54-16.16 20.61 20.61 0 0114 5.37l185.77 166a21.07 21.07 0 01-8.55 36l-240.55 64.78a21.15 21.15 0 01-5.58.77z"
            />
            <Path d="M763 1419.07v1a20.16 20.16 0 0113.61 5.24l185.77 166a20.55 20.55 0 01-8.35 35.18l-240.55 64.79a21 21 0 01-5.43.73 20.58 20.58 0 01-19.92-25.33L743 1435.9a20.54 20.54 0 0120-15.83v-1m0 0a21.53 21.53 0 00-21 16.59l-54.8 230.76a21.49 21.49 0 0026.58 25.8l240.55-64.78a21.56 21.56 0 008.76-36.9l-185.77-166a21.27 21.27 0 00-14.29-5.5z" />
          </G>
        </G>
      </Svg>
    </View>
  );
}

export default SvgComponent;

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