尝试动态设置 viewBox 宽度/高度

Question

我正在尝试使用 React Native Animated 以编程方式放大 SVG。目前我正在测试代码，证明一些事情。我似乎无法传递使用 React.useState(new Animated.Value(0)

设置的 viewBox 大小

我得到一个错误：无效 viewBox prop:0 0 [object Object][object Object]

以下是我的部分代码：

const AnimatedSVG = Animated.createAnimatedComponent(Svg);

const [widthValue, setWidthValue] = React.useState(new Animated.Value(1920));

const [heightValue, setHeightValue] = React.useState(new Animated.Value(1080));

const segmentClick = (event, someParameter) => {
      Animated.timing(widthValue, {
        toValue: 3000,
        duration: 1000,
        useNativeDriver: true,
        easing: Easing.linear,
      }).start();
  };

如前所述，我得到的错误是：无效 viewBox prop:0 0 [object Object][object Object] widthValue 和 widthHeight 似乎是对象。但是如果我 console.log 他们我可以看到他们打印出来 1920 / 1080

我怀疑我遗漏了一些非常简单的东西，但无法在网上找到答案。

Answer 1

您可以尝试创建一个动画值的侦听器，并更新状态：

const [widthValue, setWidthValue] = React.useState(1920);
const widthAnimated = React.useRef(new Animated.Value(1920)).current;

const segmentClick = (event, someParameter) => {
      widthAnimated.addListener((e) => setWidthValue(e.value)) // Add listener
      Animated.timing(widthAnimated, {
        toValue: 3000,
        duration: 1000,
        useNativeDriver: true,
        easing: Easing.linear,
      }).start();
};

在 SVG 中：

<AnimatedSVG x="0px" y="0px" viewBox={`0 0 ${widthValue} ${heightValue}`} style="enable-background:new 0 0 1920 1080; ">

对身高做同样的事情。

尝试动态设置 viewBox 宽度/高度

Trying to set viewBox width / height dynamically

react-native

react-animated