使用反应原生动画Animate Svg.G

Question

从this回答中获取灵感，我实现了以下内容来旋转Svg.G元素。基于setNativeProps来实现高性能动画，此方法适用于多边形和矩形等元素，但不适用于G元素。我得到的错误说明： 您将样式{ rotation: ... }设置为道具。您应该将其嵌套在样式对象中。例如。 { style: { rotation: ... } } 实现这个动画的正确方法是什么？

我还遇到了另一种在repository中设置Svg元素动画的方法。但是，这似乎过时了。

import { Animated } from 'react-native';
import Svg,{G} from 'react-native-svg';
const AnimatedG = Animated.createAnimatedComponent(G);

export default class RotatingControl extends Component {

    state = {
        animator: new Animated.Value(0),
    }

    componentDidMount() {
        Animated.timing(
            this.state.animator,
            {
                toValue: 100,
                duration: 10000,
            }
        ).start();

        this.state.animator.addListener( ({value}) => {
            this._animG.setNativeProps({rotation: value.toString()});
            });
    }
    
    render() {
      return (
      <Svg 
      height="200" 
      width="100"
      >
      <AnimatedG
      ref={ref => { this._animG = ref; }}
      rotation="30"
      origin="100, 100"
      >
      <Polygon
        points="40,110 40,90 20,100"
        stroke="blue"
        strokeWidth="1"
        fill="grey"
      />
    }
    </AnimatedG>
    </Svg>
    )}
}