这个欢迎页面是 Expo 在启动时默认显示的“Welcome to Expo”启动屏(Splash Screen),它通常在你的应用加载之前短暂显示。
如何去掉或自定义 Expo 的欢迎闪烁页面?
1. 自定义 Splash Screen
Expo 默认会显示一个启动屏,如果你想去掉“欢迎”文字或者自定义启动画面,可以通过修改 app.json(或 app.config.js)中的 splash 配置来实现。
{
"expo": {
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#000000"
}
}
}
- image:启动屏图片路径
- resizeMode:图片缩放模式,常用 contain 或 cover
- backgroundColor:启动屏背景色
2. 关闭自动显示 Splash Screen
如果你希望完全不显示启动屏,可以尝试在代码中控制 Splash Screen 的显示时长:
import { SplashScreen } from 'expo-router';
// 禁止自动隐藏启动屏,手动控制
SplashScreen.preventAutoHideAsync();
// 你的初始化逻辑完成后,手动隐藏启动屏
SplashScreen.hideAsync();
注意:expo-router 里可能自带欢迎页面逻辑,具体控制方式请参考 expo-router 文档。
3.删除app/index.tsx文件
从截图看,提示你创建 app/index.tsx 文件。这个文件是你的应用入口文件。
如果你没有创建这个文件,Expo Router 会默认显示这个欢迎页面。
解决方案:
- 在 app 目录下创建 index.tsx,写入你自己的页面内容,替换默认欢迎页面。
import React from 'react';
import { Text, View } from 'react-native';
export default function Home() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Hello Expo Router!</Text>
</View>
);
}
总结
- 创建 app/index.tsx 文件,写入你自己的首页内容,避免显示默认欢迎页面。
- 自定义或替换 app.json 中的 splash 配置,控制启动屏的显示效果。
- 使用 SplashScreen API 控制启动屏的显示和隐藏(高级用法)。