3

我有一个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]);

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

4

2 回答 2

0

我认为 useCode 用于 reanimated 1，而 useSharedValue 用于 reanimated 2。请按照文档：尝试 useAnimatedReaction

于 2021-09-05T05:33:19.767 回答
0

编辑：查看接受的答案。

所以这就是我最终做的黑客：我认为这是因为 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.setOptionsis from react-navigation，headerTransparent当我们在 aScreen
于 2021-09-06T18:14:56.793 回答