reactjs - Reanimated 2 Hook 中依赖参数的更好用例是什么？

Question

我一直在阅读重新激活 2 个 Hooks 的文档，并在整个互联网上搜索更好解释的博客或任何代码，但找不到任何一个，任何人都可以解释并给出源代码示例。作为示例

const App = () => {
  const [state, setState] = useState(0);
  const sv = useSharedValue(0);

  const handler = useAnimatedGestureHandler(
    {
      onEnd: (_) => {
        sv.value = state;
      },
    },
    dependencies
  );
  //...
  return <></>;
};

但是当我尝试时

const [test, setTest ] = useState(true);

const gestureHandler = useAnimatedGestureHandler({
        onStart : (event,context)=>{
            console.log("onstart");
            setTest(true);
            context.startX = X.value;
        },
        onActive : (event,context)=>{
            console.log("onactive");   
            X.value = context.startX + event.translationX;
        },
        onEnd : (event,context)=>{
            console.log("onEnd");
            setTest(false);
        }
        
    },
    [test]
    )

我得到的错误是

Tried to Synchronously call function (bound dispatchAction)
 from different thread.

Answer 1

您需要使用 runOnJS由于您没有调用工作集，因此请尝试:

const gestureHandler = useAnimatedGestureHandler(
  {
    onStart: (event, context) => {
      console.log('onstart');
      runOnJS(setTest)(true);
      context.startX = X.value;
    },
    onActive: (event, context) => {
      console.log('onactive');
      X.value = context.startX + event.translationX;
    },
    onEnd: (event, context) => {
      console.log('onEnd');
      runOnJS(setTest)(false);
    },
  },
  // [test], you don't need dependencies in this case
);

当你想在重新渲染时更新一个工作集使用的值时，你需要使用依赖关系。在您的第一个示例中，您将 state 分配给手势结束时的共享值。为了在重新渲染时使用更新后的状态，您需要将其放在钩子(Hook)依赖项中，否则工作集将仅捕获并使用第一个值:在本例中为 0。