React Native transforms with pivot point

后端 未结 5 703
不思量自难忘°
不思量自难忘° 2021-01-02 03:02

I want to rotate a Text component with an angle of -90deg. The component should be rotated from the left corner instead of middle. I am using below

5条回答
  •  一生所求
    2021-01-02 03:18

    constructor(props) {
         super(props)
         this.state = {
              angle: 0
         }
    }
    
    componentDidMount() {
        this.progress()
    }
    
    progress(){
         intervalId = BackgroundTimer.setInterval(() => {      
             this.setState({angle: this.state.angle +1})   
         }, (1000); // 1000 milliseconds
    }
    
    
    
    render () {
            const dx = responsiveHeight(9.5);
            const dy = responsiveHeight(9.5);
    
            const position= {
                transform: [
                  {
                    translateX: Math.cos((360 - this.state.angle)  * Math.PI / 180) * dx - Math.sin((360 - this.state.angle) * Math.PI / 180) * dy
                  },
                  {
                    translateY:  Math.sin((360 - this.state.angle)  * Math.PI / 180) * dx + Math.cos((360 - this.state.angle) * Math.PI / 180) * dy
                  }
                ]
              };
    
            return(
                
                    Text move
                
    
            );
    }
    

    NOTE: responsiveHeight, responsiveWidth are introduced in react-native-responsive-dimensions
    BackgroundTimer please check here react-native-background-timer
    Import some libraries

提交回复
热议问题