时间戳

首页 > 解决方案 > Reanimated 2 hooks 中依赖参数的更好用例是什么？

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

问题描述

我一直在阅读重新激活 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.

标签： reactjsreact-nativereact-hooksreact-native-reanimated-v2

解决方案

您需要使用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在手势结束时分配了一个共享值。为了在重新渲染时使用更新的状态，您需要将其放入挂钩依赖项中，否则工作集将仅捕获并使用第一个值：0在这种情况下。

推荐阅读