复活的 SharedValue 更改时调用 React Native 代码

Question

我有一个reanimated ReadOnly<SharedValue<boolean>> 是从另一个SharedValue 派生的：

  const solidHeader = useDerivedValue(() => {
    return top.value <= -(height / 2);
  });

当solidHeader.value 发生变化时，我想调用一个 RN 函数（未恢复）。具体来说，我想更新我的react-navigation 的标题透明度：

// This doesn't get called when `solidHeader.value` is updated in reanimated's thread
useEffect(() => {
  navigation.setOptions({headerTransparent: !solidHeader.value});
}, [solidHeader.value]);

我尝试了以下“似乎”是正确的方法，但后来我得到了错误

Reanimated: Animated.call node args should be an array with elements of type AnimatedNode. One or more of them are not AnimatedNodes

    useCode(() => {
      return call([solidHeader], (solidHeader) => {
        console.warn(solidHeader);
        navigation.setOptions({
          headerTransparent: !solidHeader,
        });
      });
    }, [solidHeader]);

我正在实现的目标可能吗？

Answer 1

编辑：查看接受的答案。

所以这就是我最终做的 hack：我认为这是因为 Reanimated 故意避免通过 JS/Reanimated 线程进行通信，所以我必须在 JS 端“轮询”以“依赖” " 关于复活方面的变化：

  // top is a SharedValue
  const { top, height } = useHeaderMeasurements();
  const [headerTransparent, setHeaderTransparent] = useState(
    top.value >= -(height / 2)
  );

  useEffect(() => {
    // Poll 60FPS and update RN state
    const check = setInterval(() => {
      setHeaderTransparent(top.value >= -(height / 2));
    }, 1000 / 60);
    return () => clearInterval(check);
  }, [top]);

  useEffect(() => {
    navigation.setOptions({ headerTransparent });
  }, [navigation, headerTransparent]);

对于上下文：

• useHeaderMeasurements 来自 react-native-collapsible-tab-view，它在引擎盖下使用 Reanimated V2
• navigation.setOptions 来自react-navigation，当我们在Screen 中时，这要求我们在RN 端强制设置headerTransparent

Answer 2

我认为 useCode 是为 reanimated 1 而 useSharedValue 是 reanimated 2。 关注文档：Try useAnimatedReaction