Expo中SplashScreen警告及Token加载时显示问题求助

一、消除SplashScreen警告 #

警告核心原因是未在当前视图控制器上提前调用SplashScreen.show()，或是闪屏未完成注册就触发了页面切换。解决步骤：

• 启动App时立即调用SplashScreen.preventAutoHideAsync()，阻止闪屏自动隐藏
• 确保在隐藏闪屏前，当前视图上下文已完成闪屏注册，不要在初始化未完成时切换路由

二、获取Token期间保持闪屏，避免先显示Login页 #

当前问题出在Token获取逻辑滞后于路由渲染，导致先加载Login页再跳转。需调整为先完成Token校验，再决定渲染对应路由栈：

调整后的App.js核心逻辑示例 #

import { useState, useEffect } from 'react';
import { SplashScreen } from 'expo-splash-screen';
import * as SecureStore from 'expo-secure-store';
import { NavigationContainer } from '@react-navigation/native';
import LoginStack from './navigation/LoginStack';
import HomeStack from './navigation/HomeStack';

// 阻止闪屏自动隐藏
SplashScreen.preventAutoHideAsync();

export default function App() {
  const [hasToken, setHasToken] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const checkToken = async () => {
      try {
        const token = await SecureStore.getItemAsync('userToken');
        setHasToken(!!token);
      } catch (err) {
        console.error('获取Token失败:', err);
        setHasToken(false);
      } finally {
        setIsLoading(false);
        // 所有逻辑完成后再隐藏闪屏
        await SplashScreen.hideAsync();
      }
    };

    checkToken();
  }, []);

  // 加载过程中不渲染任何页面，保持闪屏显示
  if (isLoading) {
    return null;
  }

  return (
    <NavigationContainer>
      {hasToken ? <HomeStack /> : <LoginStack />}
    </NavigationContainer>
  );
}

关键要点 #

• 启动阶段调用SplashScreen.preventAutoHideAsync()，锁定闪屏状态
• 将Token校验逻辑放在useEffect中，在App初始化时同步执行
• 加载状态isLoading为true时，仅返回null，不渲染路由页面，此时闪屏持续显示
• 待Token获取完成（无论成功失败），再隐藏闪屏并渲染对应路由栈

额外注意事项 #

• 确保expo-splash-screen、expo-secure-store版本与当前Expo SDK兼容
• 检查app.json中splash配置是否正确，重点关注resizeMode和backgroundColor
• 不要在路由组件中重复调用SplashScreen.show()，避免触发重复注册警告

内容的提问来源于stack exchange，提问作者Ricky Donald