React Native Reanimated共享值更新无关状态时出现异常行为求助

这不是预期行为，问题出在你直接将Reanimated的sharedValue作为静态style的属性值使用，没有遵循Reanimated的动画样式定义规范。

原因分析 #

当组件因内部state（a）更新而重渲染时，直接写在style中的top: sharedValue会被React Native当作普通JavaScript值处理，而非Reanimated的动画属性。此时父容器的justifyContent: center会对绝对定位的Animated.Text产生影响（因为动画属性未被正确识别，元素布局逻辑 fallback 到flex容器的默认对齐规则），导致文本被居中显示，看起来像是top属性被忽略。而borderWidth是静态样式属性，不受这个问题影响。

解决方案 #

使用Reanimated提供的useAnimatedStyle钩子来定义包含共享值的动画样式，将静态样式和动画样式分开后合并传入组件：

修改后的Content组件代码：

function Content({ toggleScreen }: { toggleScreen: () => void }) {
  const [a, setA] = useState(0);
  const sharedValue = useSharedValue(0);

  // 用useAnimatedStyle定义动画相关样式
  const animatedStyle = useAnimatedStyle(() => {
    return {
      top: sharedValue.value,
    };
  });

  return (
    <View style={{ flexGrow: 1, paddingTop: 50 }}>
      <View style={{ flexDirection: "row" }}>
        <Button title="back" onPress={toggleScreen} />
        <Button
          title={`update state ${a}`}
          onPress={() => setA((p) => p + 1)}
        />
      </View>
      <View style={{ flexGrow: 1, justifyContent: "center" }}>
        <Animated.Text
          // 合并静态样式和动画样式
          style={[{ position: "absolute", borderWidth: 1 }, animatedStyle]}
        >
          {`using shared value (${sharedValue.value})`}
        </Animated.Text>
        <Animated.Text style={{ position: "absolute", top: 0 }}>
          using absolute number
        </Animated.Text>
      </View>
    </View>
  );
}

关键说明 #

• useAnimatedStyle会创建一个由Reanimated管理的样式对象，确保共享值的变化和组件重渲染时，动画属性都能被正确识别和处理。
• 静态样式（如position、borderWidth）和动画样式分开定义，再通过数组形式合并，避免样式冲突和逻辑混乱。

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