在 React Native 中旋转 SVG [英] Rotate an SVG in React Native

问题描述

我有一个在 React Native 中创建的 SVG，我只想以最有效的方式连续旋转 360 度.

I have an SVG that I've created in react native, and I'd simply like to rotate this 360 degrees continuously in the most efficient way possible.

谢谢.

推荐答案

只需将 SVG 包装在 View 组件中并使用动画 API.您的代码将是这样的:

Just wrap your SVG in a View component and make use of the Animated API. Your code would be something in the lines of this:

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

这篇关于在 React Native 中旋转 SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！