React原生重现的useAnimatedStyle不断向我吐槽错误

Question

我正在尝试实现一些淡入和淡出转换的图标与反应原生复活。它的版本是2.1.0。我使用的是expo的简单工作流程。代码看起来像这样

...
const IconWrapper: React.FC<IconWrapperProps> = ({
  wrapperStyle,
  children
}) => {

  const [opacity, setOpacity] = useState<number>(0);
  const animatedOpacity = useSharedValue(opacity);
    
  const hookUpdater = () => {
    return {
      opacity: withTiming(animatedOpacity.value , {
        duration: 100,
        easing: Easing.linear
      })
    };
  };

  const animationStyle = useAnimatedStyle(hookUpdater, [opacity]);

  const hookEffect = () => {
    setOpacity(1);
    const cleaner = () => setOpacity(0);
    return cleaner;
  };
  
  useEffect(hookEffect, []);

  return (
    <Animated.View
      style={[wrapperStyle, animationStyle]}
    >
      {children}
    </Animated.View>
  );
};

export default IconWrapper;

对我来说，似乎没有问题，因为我实际上做了与文档中相同的事情。但它一直向我抛出这样的错误

TypeError: Object.values requires that input parameter not be null or undefined

我尝试过用expo start -c重置缓存，但没有起作用。我应该怎么做才能解决这个问题？

Answer 1

问题是，您正在创建一个不同的函数hookUpdater和hookEffect，但没有传递animationStyle和useEffect中依赖项列表中的那些函数，因为它们也是依赖项。因此，添加这些将会起作用。

  const animationStyle = useAnimatedStyle(hookUpdater, [hookUpdater]);
  ...
  useEffect(hookEffect, [hookEffect]);

最好让hookUpdater和hookEffect也使用useCallback。

Answer 2

我真的不知道为什么，但是传入useAnimatedStyle钩子的更新程序应该是匿名函数。所以这部分应该看起来像

  const animationStyle = useAnimatedStyle(
    () => {
      return {
        opacity: withTiming(animatedOpacity.value, {
          duration: 100,
          easing: Easing.linear
        })
      };
    },
    [opacity]
  );

希望这能对正在与同样的问题作斗争的人有所帮助。