react-native - Reanimated v3 - 布局动画 - React-native 中的淡入和淡出

Question

我在有条件地淡入和淡出内容时遇到一些麻烦，因此它不会“弹出”。

这是我到目前为止所得到的，但似乎不起作用。我可能会错过什么？

我使用的是重新启动的 v3，其中 AnimatedLayout 已被删除。

const MyComponent = () => {

  const [didLoad, setDidLoad] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => {
      setDidLoad(prev => !prev);
    }, 3000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <>
      {didLoad ? (
          <Animated.View
            entering={FadeIn}
            exiting={FadeOut}
            layout={Layout.duration(200).delay(200)}
          >
            <SkeletonPlaceholder borderRadius={4}>
              <SkeletonPlaceholder.Item alignItems="center" flexDirection="row">
                <SkeletonPlaceholder.Item
                  borderRadius={50}
                  height={20}
                  width={20}
                />

                <SkeletonPlaceholder.Item marginLeft={20}>
                  <SkeletonPlaceholder.Item height={25} width={120} />

                  <SkeletonPlaceholder.Item
                    height={25}
                    marginTop={6}
                    width={80}
                  />
                </SkeletonPlaceholder.Item>
              </SkeletonPlaceholder.Item>
            </SkeletonPlaceholder>
          </Animated.View>
        ) : (
          <Animated.View
            entering={FadeIn}
            exiting={FadeOut}
            layout={Layout.duration(200).delay(200)}
          >
            <View style={tw`flex-row items-center gap-2`}>
              <Icon name="chevron-right" />

              <Icon name="chevron-left" />

              <Icon name="map" />

              <Icon name="home" />
            </View>
          </Animated.View>
        )}
    </>
  )
}

Answer 1

您必须向动画 View 添加关键点，请参阅this小吃，我已经按照您在问题中提到的相同方式添加了动画，并且它正在工作。

       <Animated.View
            key="fede3"  // add this
            entering={FadeIn}
            exiting={FadeOut}
            layout={Layout.duration(2000).delay(200)}
          >
           <View 
              key="view1"  // add this
              style={styles.view1}>
           </View>
       </Animated.View>

here github repo 上有类似问题可供引用。

P.S.我注意到，当调试器处于“打开”状态时，进入/退出动画不起作用。