You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Expo项目中真实Android设备启动页(Splash Screen)卡住无法消失的问题求助

Expo项目中真实Android设备启动页(Splash Screen)卡住无法消失的问题求助

大家好,我现在碰到一个百思不得其解的问题,想请各位帮忙分析下:

我用Expo官方的expo-splash-screen组件实现App的启动页,相关逻辑都写在App.tsx里。目前测试下来,安卓模拟器和真实iOS设备上启动页都能正常显示后自动跳转到目标页面,但只有在真实安卓设备上,启动页会一直卡住,完全不会消失。

我的页面跳转流程是:

  • 首次安装启动:启动页 → 引导页(OnBoardingScreen) → WebView页
  • 非首次启动:启动页 → WebView页

我还用到了.env文件管理环境变量,一开始怀疑是不是环境变量读取异常导致卡住,但打日志确认后,所有变量都能正常读取,这个可能性已经排除了。

我翻了好长时间的代码,实在找不到问题出在哪,有没有大佬能帮我看看?下面是我的App.tsx完整代码:

import AsyncStorage from "@react-native-async-storage/async-storage";
import { getAnalytics, logScreenView } from "@react-native-firebase/analytics";
import { GoogleSignin } from "@react-native-google-signin/google-signin";
import { initializeKakaoSDK } from "@react-native-kakao/core";
import { NavigationContainer, useNavigationContainerRef, } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import * as SplashScreen from "expo-splash-screen";
import { useCallback, useEffect, useRef, useState } from "react";
import { View } from "react-native";
import AlbumScreen from "./src/screens/AlbumScreen";
import OnBoardingScreen from "./src/screens/OnBoardingScreen";
import WebViewScreen from "./src/screens/WebViewScreen";

SplashScreen.preventAutoHideAsync();
SplashScreen.setOptions({ duration: 1000, fade: true, });

const Stack = createStackNavigator<ROOT_NAVIGATION>();

export default function App() {
  // Logic
  const KAKAO_NATIVE_APP_KEY = process.env.EXPO_PUBLIC_KAKAO_NATIVE_APP_KEY;
  const GOOGLE_CLIENT_ID = process.env.EXPO_PUBLIC_GOOGLE_CLIENT_ID;
  const navigationRef = useNavigationContainerRef();
  const routeNameRef = useRef<string | null>(null);
  const [firstLaunch, setFirstLaunch] = useState<boolean | null>(null);
  const [appIsReady, setAppIsReady] = useState<boolean>(false);

  useEffect(() => {
    const init = async () => {
      try {
        initializeKakaoSDK(KAKAO_NATIVE_APP_KEY);
        GoogleSignin.configure({ iosClientId: GOOGLE_CLIENT_ID });
        await new Promise((resolve) => setTimeout(resolve, 2000));
      } catch (error) {
        console.warn(error);
      } finally {
        setAppIsReady(true);
      }
    };
    init();
  }, []);

  const onLayoutRootView = useCallback(() => {
    if (appIsReady) {
      SplashScreen.hide();
    }
  }, [appIsReady]);

  useEffect(() => {
    AsyncStorage.getItem("launched").then((value) => {
      if (value === null) {
        AsyncStorage.setItem("launched", "true");
        setFirstLaunch(true);
      } else {
        setFirstLaunch(false);
      }
    });
  }, []);

  if (!appIsReady || firstLaunch === null) {
    return null;
  }

  /* 어플 실행이 처음인 경우: Onboarding 어플 실행이 처음이 아닌 경우: WebView */
  // View
  return (
    <View style={{ flex: 1 }} onLayout={onLayoutRootView}>
      <NavigationContainer
        ref={navigationRef}
        onReady={() => {
          if (navigationRef.current) {
            routeNameRef.current = navigationRef.current.getCurrentRoute()?.name || "WebView";
          }
        }}
        onStateChange={async () => {
          if (!navigationRef.current) return;
          const previousRouteName = routeNameRef.current;
          const currentRoute = navigationRef.current.getCurrentRoute();
          if (!currentRoute || !currentRoute.name) return;
          const currentRouteName = currentRoute.name;
          if (previousRouteName !== currentRouteName) {
            const analytics = getAnalytics();
            await logScreenView(analytics, {
              screen_name: currentRouteName,
              screen_class: currentRouteName,
            });
          }
          routeNameRef.current = currentRouteName;
        }}
      >
        <Stack.Navigator
          initialRouteName={firstLaunch ? "OnBoarding" : "WebView"}
          screenOptions={{ headerShown: false }}
        >
          <Stack.Screen name="WebView" component={WebViewScreen} />
          <Stack.Screen name="Album" component={AlbumScreen} />
          <Stack.Screen name="OnBoarding" component={OnBoardingScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </View>
  );
}

麻烦各位帮忙看看问题可能出在哪,非常感谢!

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.08 08:33:05