React Native Reanimated：useDerivedValue无法触发组件DOM更新的问题

你遇到的核心问题是：React组件无法感知SharedValue的变化。虽然useDerivedValue已经正确更新了isShown的值，但TestC组件在render中直接读取isShown.value时，并没有建立对这个SharedValue的订阅——SharedValue的更新不会触发React组件的常规重渲染，所以组件不会自动刷新UI。

方案一：用useAnimatedReaction同步到React状态 #

通过useAnimatedReaction监听SharedValue的变化，将最新值同步到React本地状态，触发组件重渲染：

import { useAnimatedReaction } from 'react-native-reanimated';
import { useState } from 'react';

const TestC = ({ isShown }: { isShown: SharedValue<boolean> }) => {
  const [localIsShown, setLocalIsShown] = useState(isShown.value);

  useAnimatedReaction(
    // 追踪的SharedValue值
    () => isShown.value,
    // 值变化时执行的回调
    (newValue) => {
      setLocalIsShown(newValue);
      console.log('isS', newValue);
    },
    // 依赖数组
    [isShown]
  );

  return <Text>{localIsShown ? 'shown' : 'not shown'}</Text>;
};

方案二：用Animated组件+useAnimatedStyle直接驱动UI #

如果只是控制显示/隐藏，推荐用这种方式——不需要触发React重渲染，直接通过Reanimated的UI线程更新，性能更优：

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

const TestC = ({ isShown }: { isShown: SharedValue<boolean> }) => {
  const shownStyle = useAnimatedStyle(() => ({
    opacity: isShown.value ? 1 : 0,
    display: isShown.value ? 'flex' : 'none',
  }));

  const hiddenStyle = useAnimatedStyle(() => ({
    opacity: isShown.value ? 0 : 1,
    display: isShown.value ? 'none' : 'flex',
  }));

  return (
    <>
      <Animated.Text style={shownStyle}>shown</Animated.Text>
      <Animated.Text style={hiddenStyle}>not shown</Animated.Text>
    </>
  );
};

关键原理 #

Reanimated的SharedValue运行在UI线程，和React组件的JS线程是分离的：

• 直接在render中读取SharedValue.value只能获取当前快照，不会建立订阅
• 必须通过Reanimated提供的API（如useAnimatedReaction、useAnimatedStyle）才能监听SharedValue的变化，实现UI同步

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