肥仔教程网

SEO 优化与 Web 开发技术学习分享平台

expo 中怎么去掉默认的欢迎页面(excel怎么取消页面显示)

这个欢迎页面是 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 控制启动屏的显示和隐藏(高级用法)。
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言