如何让SVG在不同窗口尺寸下保持一致显示（React Native+Expo）

我用React Native、Expo和react-native-svg在Web应用里渲染了一个SVG波浪头部，但窗口尺寸变化时，SVG的显示效果没法保持一致。需求明确为：高度固定，宽度始终适配窗口宽度，高度不随屏幕尺寸变化。

相关代码 #

SvgComponent.js #

const SvgComponent = (props) => (
  <View  style={[styles.header,
    {
      transform: [{rotate: '180deg'}],
    },
  ]}>
  <Svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" {...props}>
    <Path
      fill="#09f"
      d="m0 128 80-10.7C160 107 320 85 480 96c160 11 320 53 480 64s320-11 400-21.3l80-10.7v192H0Z"
    />
  </Svg>
  </View>
)

App.js #

export default function App() {
  return (
    <View style={styles.container}>
        <Home/>
        <TopHeader/>
    </View>
  );
}

Home.js #

export default function Home() {
  return (
    <View style={styles.container}>
        <Text style={styles.title}>Home</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    height: height,
    width: width
  },
  title: {
    fontSize: 175, 
    color: 'white'
  }
});

TopHeader.js #

export default function TopHeader(props) {
  const {menuActivated, switchTabs, setMenuActivated, headerTriggerd, setHeaderTriggered} = props;
  const [FS, setFS] = useState({ "width": Math.min(window.innerWidth), "height": Math.min(window.innerHeight)})
    useEffect(() => {
      window.addEventListener('resize', changeTitleSize);
      return () => {
          window.removeEventListener('resize', changeTitleSize);
      }
    }, []);
    function changeTitleSize(){
      setFS({ "width": Math.min(window.innerWidth), "height": Math.min(window.innerHeight)})
    }
  return (
    <View style={styles.container}>
      <SvgComponent width={FS.width} height={FS.width / 4} />
      <WebsiteHeader />
    </View>
  );
}

解决方案 #

1. 固定SVG高度，动态适配宽度 #

当前TopHeader中用FS.width / 4计算高度会导致高度随宽度变化，直接设置固定高度值（比如120，可根据视觉需求调整），宽度取窗口实际宽度：

// 修改TopHeader.js中SvgComponent的调用
<SvgComponent width={windowWidth} height={120} />

2. 优化SVG的拉伸行为 #

给<Svg>标签添加preserveAspectRatio属性，确保SVG填充容器时保持波浪形态：

// 修改SvgComponent.js中的<Svg>标签
<Svg 
  xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 1440 320" 
  preserveAspectRatio="none" // 让SVG完全拉伸适配容器
  {...props}
>

• 若希望保留波浪比例，仅宽度适配，可改用preserveAspectRatio="xMaxYMin meet"

3. 简化窗口尺寸监听逻辑 #

去掉不必要的Math.min，直接监听窗口宽度变化：

// 修改TopHeader.js的状态与监听逻辑
const [windowWidth, setWindowWidth] = useState(window.innerWidth);

useEffect(() => {
  const handleResize = () => setWindowWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

4. 确保容器宽度占满 #

给SvgComponent外层的View设置宽度100%，避免留白：

// 在SvgComponent.js中添加样式
const styles = StyleSheet.create({
  header: {
    width: '100%',
    // 原有样式
  }
});

调整后，SVG高度固定，宽度随窗口实时适配，波浪形态也能保持一致。

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