使用NavigationContainer后Expo启动屏消失后显示白屏问题

1. 确保 React Navigation 结构完整 #

白屏最常见的原因是 NavigationContainer 内部未正确配置导航器（如 StackNavigator）。你需要确保导航器已注册目标屏幕（比如你的 <Login/>）并设置初始路由。

示例正确结构：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Login from './screens/Login';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 同步启动屏隐藏与导航初始化时机 #

问题可能出在启动屏隐藏过早，此时 React Navigation 还未完成渲染。需要等待导航完全就绪后再隐藏启动屏。

可以通过 NavigationContainer 的 onReady 回调，结合 appIsReady 状态控制：

import { useState, useEffect } from 'react';
import { SplashScreen } from 'expo-splash-screen';

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

  useEffect(() => {
    async function prepare() {
      try {
        // 这里添加你的异步初始化逻辑（如加载用户数据、配置等）
        await new Promise(resolve => setTimeout(resolve, 2000)); // 模拟异步操作
      } catch (e) {
        console.warn(e);
      } finally {
        setAppIsReady(true);
      }
    }

    prepare();
  }, []);

  // 导航就绪且appIsReady为true时，隐藏启动屏
  const handleNavigationReady = async () => {
    if (appIsReady) {
      await SplashScreen.hideAsync();
    }
  };

  if (!appIsReady) {
    return null; // 保持启动屏显示
  }

  return (
    <NavigationContainer onReady={handleNavigationReady}>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" component={Login} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

3. 禁止启动屏自动隐藏 #

确保在 app.json 中配置启动屏不自动隐藏，避免提前触发隐藏：

{
  "expo": {
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff",
      "hideAfter": null // 禁止自动隐藏
    }
  }
}

也可以在代码中调用 SplashScreen.preventAutoHideAsync()：

useEffect(() => {
  async function prepare() {
    await SplashScreen.preventAutoHideAsync(); // 阻止自动隐藏
    // 其他初始化逻辑...
  }
  prepare();
}, []);

4. 检查异步初始化逻辑 #

如果 appIsReady 是在异步操作完成后设置的，确保这些操作没有抛出未捕获的错误，导致 setAppIsReady(true) 未执行。可以在 catch 块中添加日志排查问题。

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