Reanimated中useSharedValue在useEffect里更新没反应？

迷人的焕玲提问于 2026-03-25 05:42:23 阅读 14

移动

我在React Native里用Reanimated的useSharedValue，想在useEffect里根据某个状态更新它的值，但发现UI根本没变化。是不是不能在useEffect里直接赋值？

我试过这样写：

const progress = useSharedValue(0);

useEffect(() => {
  if (isLoading) {
    progress.value = 1;
  }
}, [isLoading]);

但动画完全不动，控制台也没报错，就是没效果，到底哪里出问题了？

组件设计

我来解答赞 4 收藏

反馈

1 条解答

打工人瑞丽 Lv1

问题应该出在Reanimated的动画更新机制上。Reanimated的动画更新通常是异步的，并且直接在useEffect里更新shared value可能不会触发重新渲染或者动画更新。

你可以尝试使用Reanimated提供的runOnJS或者runOnUI来确保动画能够正确更新。不过对于你的情况，直接更新shared value应该可以生效，所以问题可能在于动画配置或者其他地方。

先确认一下你的progress是否被正确地关联到了动画上。如果动画配置没问题，试试在useEffect里添加一个requestAnimationFrame来延迟更新，看是否有帮助。

这里有个简单的例子，假设你有一个动画组件关联了progress：

import React, { useEffect } from 'react';

import { View, Text } from 'react-native';

import Animated, { useSharedValue, withSpring, useAnimatedStyle } from 'react-native-reanimated';



const MyComponent = ({ isLoading }) => {

  const progress = useSharedValue(0);



  const animatedStyle = useAnimatedStyle(() => ({

    transform: [{ scale: progress.value }],

  }));



  useEffect(() => {

    if (isLoading) {

      progress.value = withSpring(1);

    } else {

      progress.value = withSpring(0);

    }

  }, [isLoading]);



  return (

    <Animated.View style={animatedStyle}>

      <Text>Loading...</Text>

    </Animated.View>

  );

};



export default MyComponent;

注意这里用了withSpring来确保动画效果。如果只是直接赋值，动画可能不会平滑过渡。检查一下你的动画配置，确保所有部分都正确连接。

2026-03-25 06:00