Question

我有一个我用反应原生创建的SVG，我只想以最有效的方式连续旋转360度。

感谢。

Answer 1

只需将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();    
  }
}

Answer 2

只需使用转换。它完美运行。

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

在React Native中旋转SVG

2 个答案: