相关疑难解决方法(0)

我一直在尝试做一些看起来很简单的事情，但我已经尝试了几个小时，但找不到解决方案。

我有一个需要位于屏幕顶部的 SVG。它来自具有以下尺寸的设计师：

<Svg width="354px" height="190px" viewBox="0 0 354 190">...</Svg>

在React Native 中，这将进入容器内部，SVG 需要占据屏幕的整个宽度，我从中获取：

Dimensions.get("window").width

我的问题是，我还没有找到一种方法来缩放 SVG 以占据屏幕宽度的 100%，找出正确的高度（或自动设置它的方法），并保留纵横比。我已经尝试了一百万次，包括使用容器的aspectRatio样式及其高度（或根本不设置高度）。每当我发现一些有效的“比例”时，我都会尝试使用不同屏幕宽度的不同设备，但它看起来一点也不好看（裁剪过，小于屏幕宽度等）。

我觉得SVG (react-native-svg) 中的preserveAspectRatio属性在某种程度上与aspectRatio风格相冲突。我完全迷失了preserveAspectRatio，我还没有找到一种方法来使它缩放而不被裁剪。

有谁知道如何实现这一目标？

这是我的最终代码，它返回一个显示 SVG 的 HeatMap 组件，但尽管它具有正确的高度，但 SVG 的一部分从右侧超出了屏幕（看起来被裁剪，因为它太宽了）：

const windowWidth = Dimensions.get("window").width;

const getSVGRootProps = ({ width, height }) => ({
  width: "100%",
  height: "100%",
  viewBox: `0 0 ${width} ${height}`,
  preserveAspectRatio: "xMinYMin meet",
});

const FieldShape = () => {
  const width = 354; …