为测试全局禁用react-native-reanimated

yx2lnoni  于 2023-01-27  发布在  React
关注(0)|答案(1)|浏览(136)

我们希望在基于上下文变量的测试中禁用react-native-reanimated动画,尤其是在进行UI快照测试以避免碎片时。例如,如果有一个正在加载的微调器,我们不希望其旋转动画生命周期的变化被区分并被视为UI中的更改。
如果我们在测试环境中,我们尝试将useAnimatedStyle Package 在我们自己的钩子中,以便将updater作为()=>({})传递,但在从UI线程调用JS时存在各种问题:

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

  useEffect(() => {
    if (enabled.value !== areAnimationsEnabled) {
      enabled.value = areAnimationsEnabled;
    }
  }, [areAnimationsEnabled, enabled]);

  return useAnimatedStyle(enabled.value ? updater : () => ({}), deps);
};

**错误:**试图从其他线程同步调用匿名函数

将updater Package 为一个worklet似乎不起作用,因为useAnimatedStyle根据Reanimated文档无论如何都会这样做。

2ul0zpep

2ul0zpep1#

结果我不得不将"worklet"添加到我传递的更新程序中:

const animatedStyles = useLibraryAnimatedStyle(() => {
  "worker";

  return {
    transform: [{ rotateZ: "100deg" }],
  };
});

与通常传递给useAnimatedStyle的值相比

const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ rotateZ: "100deg" }],
});

相关问题