如何基于上下文变量在测试中全局禁用react-native-reanimated动画？

你遇到的跨线程同步调用错误，根源在于在JS线程直接读取SharedValue的value属性来决定传入useAnimatedStyle的回调函数。因为useAnimatedStyle的回调运行在UI/worklet线程，当你在JS线程判断enabled.value并切换回调时，相当于把JS线程的同步逻辑强行注入到worklet线程，触发了Reanimated的线程安全校验。

方案一：修改封装钩子，将判断逻辑移到worklet内部 #

把动画启用的判断放到useAnimatedStyle的回调（worklet）内部执行，避免跨线程的同步值传递：

const useLibraryAnimatedStyle = <T extends AnimatedStyle>(
  updater: () => T,
  deps?: DependencyList | null,
) => {
  const { areAnimationsEnabled } = useLibraryGlobals();
  const enabled = useSharedValue(areAnimationsEnabled);

  // 同步上下文变量到SharedValue
  useEffect(() => {
    enabled.value = areAnimationsEnabled;
  }, [areAnimationsEnabled, enabled]);

  return useAnimatedStyle(() => {
    // 所有逻辑在worklet线程内部执行，安全访问SharedValue
    return enabled.value ? updater() : {};
  }, deps);
};

这样修改后，enabled.value的访问和判断都在worklet线程完成，Reanimated会自动处理线程间的通信，不会再触发跨线程调用错误。

方案二：全局配置Reanimated禁用测试环境动画 #

如果只是为了测试（尤其是UI快照），更简洁的方式是直接在测试全局配置中禁用所有Reanimated动画，不需要封装钩子：

在你的测试初始化文件（比如jest.setup.js或setupTests.js）中添加：

import Reanimated from 'react-native-reanimated';

// 全局禁用测试环境的Reanimated动画
Reanimated.setTestingDefaultConfig({
  disableAnimations: true,
});

这个配置会让Reanimated在测试环境跳过所有动画计算，直接返回最终状态的样式，从根源上避免快照因动画生命周期变化而不稳定。

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