如何禁用Expo默认启动屏 移除app.json的splash配置仍出现白屏怎么办

• 第一步：不要完全删除app.json中的splash配置，保留基础配置避免原生层默认加载空白屏，示例配置如下：

"splash": {
  "resizeMode": "contain",
  "backgroundColor": "#你的自定义启动屏同色系背景色"
}

• 第二步：安装expo-splash-screen依赖，用于主动控制启动屏的隐藏时机
• 第三步：在项目入口文件（如App.js、Expo Router的根_layout.js）最顶部添加逻辑，禁止启动屏自动隐藏：

import * as SplashScreen from 'expo-splash-screen';
// 放在所有初始化逻辑最前面，阻止原生启动屏自动隐藏
SplashScreen.preventAutoHideAsync();

• 第四步：在你的自定义启动屏组件完全渲染、或者项目所需的所有前置资源（字体、全局配置等）加载完成后，调用隐藏方法，替换原生启动屏：

// 可放在自定义启动屏的onLayout回调、或者资源加载完成的回调中执行
const hideNativeSplash = async () => {
  await SplashScreen.hideAsync();
  // 同步更新状态，隐藏你的自定义启动屏、切换到App主内容即可
}

白屏的核心原因是原生启动屏在JS bundle还没加载完成、自定义组件还没渲染的时候就自动隐藏了，中间的空白等待期就是你看到的白屏。主动控制原生启动屏的隐藏时机，等自定义组件完全准备好再隐藏，就可以做到无缝切换。

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