Question

import React,{Component} from 'react';
import {Text,View,Button,Animated,Easing,Image} from 'react-native';

class ToggleText extends Component{

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

spin () {
    this.spinValue.setValue(0)
    Animated.timing(
      this.spinValue,
      {
        toValue: 1,
        duration: 4000,
        easing: Easing.linear,

      }
    ).start(() => this.spin())
  }

componentDidMount () {
    this.spin();
  }

render(){
    const spin = this.spinValue.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg']
      })

    return(
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
        <Animated.Image
        style={{
          width: 227,
          height: 200,
          transform: [{rotate: spin}] }}
          source={{uri: 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png'}}
      />
      </View>    
    );
}
}

export default ToggleText;

Answer 1

我在Android中也遇到了类似的问题，动画被卡住了。我发现它只是落后。

我通过使用本机驱动程序解决了它。通过添加此useNativeDriver: true,

Animated.timing(
  this.spinValue,
  {
    toValue: 1,
    duration: 4000,
    easing: Easing.linear,
    useNativeDriver: true, //<---Add this
  }

反应本机旋转动画不起作用

1 个答案: