反应原生旋转动画不起作用答案

【问题标题】：react native spin animation not working反应原生旋转动画不起作用
【发布时间】：2018-07-10 13:14:34
【问题描述】：

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;

【问题讨论】：

您找到解决方案了吗？我有相同的问题。会很有帮助的。

标签： react-native animation transform

【解决方案1】：

我在动画卡住的 Android 中也有类似的问题。我发现它只是滞后。

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

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

【讨论】：