如何修复React Native Reanimated中React Logo旋转回退的无限循环问题？

问题原因 #

你的代码里withRepeat的第三个参数设为了true，这会开启反向动画：动画先从0°转到360°，然后再反向转回0°，循环往复，所以看起来像是转半圈就回退。另外useEffect没有依赖数组，会导致组件每次渲染都重新触发动画，可能引发不必要的重复执行。

修复方案 #

有两种简单的修复方式，选其一即可：

方案1：关闭反向动画，循环执行0→360°

修改useEffect中的动画逻辑，移除withRepeat的第三个参数（默认值为false，不开启反向），同时给useEffect加上空依赖数组，确保只在组件挂载时启动一次动画：

React.useEffect(() => {
  spin.value = withRepeat(withTiming(360, { duration: 5000 }), -1);
}, []);

原理：360°和0°在视觉上是同一个角度，所以每次从0→360°的循环会看起来是连续的无限旋转，没有回退感。

方案2：让角度持续累加，实现无断点旋转

如果希望spin的值持续增加（比如360→720→1080...），可以每次动画都基于当前值累加360°，同样关闭反向并添加依赖数组：

React.useEffect(() => {
  spin.value = withRepeat(withTiming(spin.value + 360, { duration: 5000 }), -1);
}, []);

原理：每次动画都会让旋转角度在原有基础上增加一圈，视觉上是完全连续的旋转，不会有任何断点。

完整修复后的代码 #

import { StyleSheet, View } from "react-native";
import React from "react";
import { FontAwesome5 } from "@expo/vector-icons";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from "react-native-reanimated";

const ReactLogo = () => {
  const spin = useSharedValue(0);
  
  React.useEffect(() => {
    // 可替换为方案2的代码
    spin.value = withRepeat(withTiming(360, { duration: 5000 }), -1);
  }, []);

  const stylez = useAnimatedStyle(() => {
    return {
      position: "absolute",
      top: 100,
      transform: [
        {
          rotateZ: `${spin.value}deg`,
        },
      ],
    };
  });

  return (
    <Animated.View style={stylez}>
      <FontAwesome5 name="react" size={64} color="black" />
    </Animated.View>
  );
};

export default ReactLogo;

const styles = StyleSheet.create({});

注：去掉了多余的Text组件嵌套，直接渲染图标以简化结构。

内容的提问来源于stack exchange，提问作者Mathew