Reactnative 如何渲染一个 svg 以在不同的窗口大小下动态地看起来相同

我使用了REACT-Native、EXPO和REACT-Native-SVG在我的Web应用程序中呈现了一个SVG.不幸的是，在改变Web应用程序窗口大小的过程中，我很难让SVG保持相同的外观.

我们的目标是创造一个"波浪式"的头球.我已经包括了一个snack here that reproduces my exact issue以及下面的一些代码.如果您运行零食，请点击Web模拟器中的弹出箭头来更改窗口大小以查看问题.

How can I render an svg to look the same dynamically across different window sizes?个

EDIT 1::我意识到我正在寻找的答案要求高度是静态的.我希望宽度始终是窗口的宽度，而高度是恒定的，无论屏幕大小如何都不会改变.

感谢您的真知灼见！我比你想象的更感激.

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>
  );
}

家，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>
  );
}