React Native Expo中Lottie启动动画结束后闪屏问题求助

在我的React Native Expo项目中，应用启动时Lottie动画完成后会出现原生闪屏图片短暂闪烁的问题。我尝试过多种方法同步隐藏原生闪屏与Lottie动画的完成时机，但问题仍未解决。

补充说明 #

启动屏显示的内容与动画启动屏的第一帧一致，开头的过渡效果正常，仅在Lottie动画结束后出现问题。

当前实现代码 #

App.tsx #

import SignUp from "@views/auth/SignUp";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { useEffect, useState } from "react";
import LottieAnimation from "@components/LottieAnimation";
import Animated from "react-native-reanimated";
import * as SplashScreen from "expo-splash-screen";

export default function App() {
  const [appIsReady, setAppIsReady] = useState(false);
  const [splashAnimationFinished, setSplashAnimationFinished] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        // Pre-load fonts, make any API calls you need to do here
      } catch (e) {
        console.warn(e);
      } finally {
        // Tell the application to render
        setAppIsReady(true);
      }
    }

    prepare();
  }, []);

  if (!appIsReady || !splashAnimationFinished) {
    return (
      <LottieAnimation
        onAnimationFinish={(isCancelled) => {
          if (!isCancelled) {
            setSplashAnimationFinished(true);
          }
        }}
      />
    );
  }

  return (
    <Animated.View style={styles.container}>
      <SignUp />
      <StatusBar style="auto" />
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

LottieAnimation.tsx #

import { FC } from "react";
import { StyleSheet, View } from "react-native";
import LottieView from "lottie-react-native";
import colors from "@utils/colors";
import Animated, { FadeOut, ZoomOut } from "react-native-reanimated";

interface Props {
  onAnimationFinish?: (isCancelled: boolean) => void;
}

const AnimatedLottieView = Animated.createAnimatedComponent(LottieView);

const LottieAnimation: FC<Props> = ({ onAnimationFinish }) => {
  return (
    <Animated.View style={styles.animationContainer} exiting={FadeOut}>
      <AnimatedLottieView
        //exiting={ZoomOut}
        autoPlay
        onAnimationFinish={onAnimationFinish}
        loop={false}
        style={{
          width: "80%",
          height: "100%",
        }}
        source={require("@assets/LogoAnimation.json")}
      />
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  animationContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: colors.PRIMARY,
  },
});

export default LottieAnimation;

内容的提问来源于stack exchange，提问作者Michael ilkanayev