Expo 53.0.9版本启动屏自定义问题咨询

嗨，我刚好研究过Expo 53的启动屏配置，其实核心逻辑和之前差不多，只是因为项目换成了app目录的路由结构、没有了传统的App.tsx，所以配置入口变了，我给你梳理下具体操作步骤：

一、静态启动屏配置（基础自定义） #

如果只是想替换启动屏的图片、背景色，直接在项目根目录的app.json或app.config.ts里修改expo.splash字段即可，不需要写额外代码：

{
  "expo": {
    "splash": {
      "image": "./assets/splash.png", // 你的启动屏图片路径，建议用3000x3000的透明PNG
      "resizeMode": "contain", // 图片缩放模式，可选contain/cover/none
      "backgroundColor": "#212121", // 启动屏背景色
      "dark": { // 暗黑模式下的可选配置
        "image": "./assets/splash-dark.png",
        "backgroundColor": "#121212"
      }
    }
  }
}

修改后重启Expo开发服务就能看到效果啦。

二、动态控制启动屏（等待初始化完成再隐藏） #

如果需要等应用加载完字体、数据等资源后再隐藏启动屏，就得在根布局组件里处理——也就是app/_layout.tsx，这是现在Expo项目的根入口组件：

1. 首先确保依赖安装完整（默认项目已包含，保险起见可以再执行一次）：

npx expo install expo-splash-screen

2. 在app/_layout.tsx里编写控制逻辑：

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

// 先阻止启动屏自动隐藏，这行要放在组件定义之外
SplashScreen.preventAutoHideAsync();

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

  useEffect(() => {
    async function prepareApp() {
      try {
        // 这里放你的应用初始化逻辑，比如加载自定义字体、请求初始数据
        // 示例：await Font.loadAsync({ Roboto: require('../assets/fonts/Roboto.ttf') });
      } catch (error) {
        console.warn('初始化过程出现问题:', error);
      } finally {
        // 初始化完成后，手动隐藏启动屏
        await SplashScreen.hideAsync();
        setAppIsReady(true);
      }
    }

    prepareApp();
  }, []);

  // 准备完成前不渲染任何内容，启动屏会保持显示
  if (!appIsReady) {
    return null;
  }

  return (
    <Stack>
      <Stack.Screen name="index" options={{ headerShown: false }} />
      {/* 这里添加你的其他路由页面 */}
    </Stack>
  );
}

注意事项 #

• 启动屏图片要符合Expo的尺寸建议，避免在不同设备上拉伸变形；
• 如果修改了app.json里的配置，记得重启Expo开发服务，不然可能不生效；
• 如果是Web端项目，还可以在app/_+html.tsx里调整Web端的启动屏样式，但移动端的核心配置还是上面的步骤。

内容来源于stack exchange