React Native动画不一致并且无法正常工作

Question

因此，昨天一切都按预期进行，但现在却很滞后，几乎没有动画。我正在Android上进行测试。 顺便说一句，如果我使用的是useNativeDriver: true，那么动画序列的顺序是不正确的，但是性能更好并且动画可以工作

这可能是什么原因，我该如何解决？

谢谢。

class Wheel extends Component<Props, State> {
  state = defaultState;

  animatedValue = new Animated.Value(0);

  spinAnimation = (): void => {
    this.animatedValue.setValue(0);

    const { degree, screenName } = this.state;

    const { navigation } = this.props;

    const fakeSpinDuration = 400;
    const actualSpinDuration = degree > 180 ? 400 : 100;
    const maxAnimationIterations = 3;

    Animated.sequence([
      Animated.loop(
        Animated.timing(this.animatedValue, {
          toValue: 360,
          duration: fakeSpinDuration,
          easing: Easing.linear,
        }),
        {
          iterations: maxAnimationIterations,
        },
      ),
      Animated.timing(this.animatedValue, {
        toValue: 0,
        duration: 1,
        easing: Easing.linear,
      }),
      Animated.timing(this.animatedValue, {
        toValue: degree,
        duration: actualSpinDuration,
        easing: Easing.linear,
      }),
    ]).start((animCallback): void => {
      if (animCallback.finished) {
        setTimeout(() => {
          this.setState(
            {
              degree: 0,
              screenName: '',
              footerAd: true,
            },
            () => {
              if (screenName !== '') {
                this.animatedValue.setValue(0);
                navigation.navigate(screenName);
              }
            },
          );
        }, 2000);
      }
    });
  };

  spin = async (): Promise<void> => {
    const { navigation } = this.props;
    // set loading to true and reset animation
    await new Promise((resolve): void => {
      this.setState(
        {
          loading: true,
        },
        (): void => {
          resolve();
        },
      );
    });

    let indexOfDegreeObjectFromArray;
    let screenName;
    let degree;

    indexOfDegreeObjectFromArray = this.randomInRange(0, loses.length);
    degree = loses[indexOfDegreeObjectFromArray];
    screenName = 'Loss';

    console.log('DEGREE: ', degree);
    console.log('ScreenName: ', screenName);

    this.setState(
      {
        loading: false,
        degree,
        screenName,
      },
      (): void => {
        this.spinAnimation();
      },
    );
  };

  // returned is in interval such that it is more or equal to min, and less than max
  randomInRange = (min: number, max: number): number =>
    Math.floor(Math.random() * (max - min) + min);

  hideFooterAd = (): void => {
    this.setState({ footerAd: false });
  };

  render(): JSX.Element {
    const { loading, footerAd } = this.state;

    const { adSdkWheel } = this.props;

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

    const animatedStyles = {
      transform: [
        {
          rotate: spin,
        },
      ],
    };

    return (
      <LinearGradient
        colors={['#00b5e4', '#01d7f3']}
        style={[{ flex: 1 }, Styles.wheel.wrapper, { backgroundColor: 'red' }]}
      >
        <View style={{ flex: 1 }}>
          {loading ? <WheelGameLoadingBox /> : null}

          <Image
            style={Styles.wheel.bg}
            source={require('./images/wheelBg.png')}
          />

          <View style={Styles.wheel.spacer} />

          <View style={Styles.wheel.welcomeHeading}>
            <Text style={Styles.wheel.welcomeHeadingContent}>Spin to win!</Text>

            <View style={Styles.wheel.welcomeText}>
              <Text style={Styles.wheel.welcomeTextContent}>
                Land on the Lucky Coin and win
                <Text style={globalStyles.global.textYellow}> 50 </Text>
                COINS!
              </Text>
            </View>
          </View>

          <View style={{ flex: 3 }} />

          <View style={Styles.wheel.imagesWrapper}>
            <Image
              source={require('./images/wheel-arrow.png')}
              style={Styles.wheel.wheelArrowImage}
            />
            <Animated.Image
              source={require('./images/wheel-base.png')}
              style={[Styles.wheel.wheelBaseImage, animatedStyles]}
            />
          </View>

          <View style={Styles.wheel.buttonWrapper}>
            <Button
              large
              text="Spin the wheel!"
              onClick={loading ? (): void => {} : this.spin}
            />
          </View>

          <View style={{ flex: 6 }} />

          {footerAd ? (
            <View style={Styles.wheel.bottomFooter}>
              <FooterAd onCloseEffect={this.hideFooterAd} sdk={adSdkWheel} />
            </View>
          ) : null}
        </View>
      </LinearGradient>
    );
  }
}