当重新激活的 SharedValue 发生变化时调用 React Native 代码

Question

我有一个 reanimated ReadOnly<SharedValue<boolean>> 派生自另一个 SharedValue:

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

我想在 solidHeader.value 更改时调用 RN 函数 (non-reanimated)。具体来说，我想更新 react-navigation 的 header 透明度：

// 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

我认为 useCode 用于复活 1，useSharedValue 用于复活 2。按照文档：Try useAnimatedReaction

Answer 2

编辑：查看已接受的答案。

所以这就是我最终做的黑客攻击：我认为这如此糟糕的原因是因为 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

headerTransparent

当重新激活的 SharedValue 发生变化时调用 React Native 代码

Call React Native code when reanimated SharedValue changes

react-native

react-native-reanimated

react-native-reanimated-v2