React native reanimated useAnimatedStyle 不断向我吐出错误

Question

我正在尝试使用 React Native 重新激活图标实现一些淡入和淡出过渡。它的版本是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

我真的不知道为什么，但是传递给 useAnimatedStyle 挂钩的更新程序应该是匿名函数。所以这部分应该是这样的

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

希望这对遇到同样问题的人有所帮助。

Answer 2

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

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

最好让 hookUpdater 和 hookEffect 也使用 useCallback。

React native reanimated useAnimatedStyle 不断向我吐出错误

React native reanimated useAnimatedStyle keep spitting me the error

react-native

react-native-reanimated-v2