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
相关产品推荐
相关产品推荐

