在React Native中旋转SVG

Question

我有一个在react native中创建的SVG，我只是想尽可能以最有效的方式连续旋转360度。

谢谢。

Answer 1

只需使用变换即可。它工作完美。

<YourSvg
    height={20}
    width={20}
    style={{ transform: [{ rotateY: '180deg' }] }}
/>

Answer 2

只需将SVG包装在View组件中，然后使用Animated API。您的代码将如下所示：

class YourComponent extends React.Component {

  constructor(props) {
    super(props);
    this.animation = new Animated.Value(0);
  }

  render() {

    const rotation = this.animation.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg']
    });

    return (
      <Animated.View
        style={{transform: [{rotate: rotation}] }}
      >
        <YourSVG />
      </Animated.View>
    );


  componentDidMount() {

    Animated.loop(
      Animated.timing(this.animation, {toValue: 1, duration: 2000})
    ).start();    
  }
}