0

我正在尝试为带有reanimated react native的图标实现一些淡入和淡出过渡。它的版本是2.1.0。我正在使用世博会的基本工作流程。代码看起来像这样

...
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，但没有用。我应该怎么做才能解决这个问题？

4

2 回答 2

1

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

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

希望这可以帮助那些在同样问题上苦苦挣扎的人。

于 2021-06-27T03:18:50.883 回答
0

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

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

最好让 hookUpdater 和 hookEffect 也使用 useCallback。

于 2021-06-28T06:20:46.437 回答