如何在useDerivedValue中调用setState？跨线程报错及性能优化问题

你遇到的问题本质是Reanimated工作线程与React JS线程的通信限制：直接在工作线程的回调（比如useDerivedValue）里调用React的状态更新函数会触发跨线程同步调用错误，而频繁用runOnJS在手势活跃阶段调用又会因为线程切换开销导致卡顿。

正规解决方案：使用useAnimatedReaction #

Reanimated提供了useAnimatedReaction钩子，专门用于监听SharedValue的变化，并安全地在JS线程执行副作用操作，同时能避免过度频繁的线程切换。

修改你的代码如下：

import { useSharedValue, useAnimatedGestureHandler, runOnJS, useAnimatedReaction } from 'react-native-reanimated';

// ... 其他代码

const setShow = promps.setShow;
const setXPos = promps.setXPos;

const translateX = useSharedValue(0);

// 替换原来的useDerivedValue
useAnimatedReaction(
  // 定义要监听的SharedValue
  () => translateX.value,
  // 值变化时的回调
  (currentX, previousX) => {
    // 可选：添加阈值过滤微小变化，减少不必要的父组件重渲染
    if (Math.abs(currentX - previousX) > 1) {
      runOnJS(setXPos)(currentX);
    }
  },
  []
);

const swipeGestureHandler = useAnimatedGestureHandler<
  PanGestureHandlerGestureEvent,
  ContexType
>({
  onStart: (event, context) => {
    context.translateX = translateX.value;
    runOnJS(setShow)(true);
  },
  onActive: (event, context) => {
    translateX.value = event.translationX + context.translateX;
  },
  onEnd: (event, context) => {
    runOnJS(setShow)(false);
    if (Math.abs(translateX.value) <= windowWidth / 3) {
      translateX.value = 0;
    } else if (translateX.value < 0) {
      translateX.value = -windowWidth;
      runOnJS(reaction)("reject");
    } else if (translateX.value > 0) {
      translateX.value = windowWidth;
      runOnJS(reaction)("accept");
    }
  },
});

方案说明 #

1. 避免跨线程错误：useAnimatedReaction的回调运行在Reanimated工作线程，但通过runOnJS异步调度状态更新到JS线程，不会触发同步跨线程调用的报错。
2. 解决卡顿问题：相比在onActive里每次手势移动都调用runOnJS，useAnimatedReaction只会在translateX.value实际变化时执行回调，且可选的阈值过滤能减少不必要的线程切换和父组件重渲染。
3. 替代临时定时器：这是Reanimated官方推荐的状态同步方式，完全不需要依赖定时器这类hack方案。

内容的提问来源于stack exchange，提问作者PrzepalonyDecybel