Expo启动屏配置异常：Android端背景色与文本未生效

我正在为Expo应用配置指定背景色、居中显示文本的启动屏，但本地运行Android端时出现异常：默认模板图标替代文本显示在屏幕中央，且背景色未按设置变更。

package.json 配置 #

{
  "name": "lorem",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo-google-fonts/crimson-text": "^0.2.3",
    "@expo/vector-icons": "^14.0.2",
    "@react-navigation/bottom-tabs": "^7.2.0",
    "@react-navigation/native": "^7.0.14",
    "expo": "~52.0.25",
    "expo-blur": "~14.0.2",
    "expo-constants": "~17.0.4",
    "expo-font": "~13.0.3",
    "expo-haptics": "~14.0.1",
    "expo-linking": "~7.0.4",
    "expo-router": "~4.0.16",
    "expo-splash-screen": "~0.29.20",
    "expo-status-bar": "~2.0.1",
    "expo-symbols": "~0.2.1",
    "expo-system-ui": "~4.0.7",
    "expo-web-browser": "~14.0.2",
    "noho": "file:",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "0.76.6",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-reanimated": "~3.16.1",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "~4.4.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.5"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@types/jest": "^29.5.12",
    "@types/react": "~18.3.12",
    "@types/react-test-renderer": "^18.3.0",
    "jest": "^29.2.1",
    "jest-expo": "~52.0.3",
    "react-test-renderer": "18.3.1",
    "typescript": "^5.3.3"
  },
  "private": true
}

已做的配置操作（app.json） #

{
  "expo": {
    "name": "lorem",
    "slug": "lorem",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/nameDev.jpg",
    "scheme": "myapp",
    "userInterfaceStyle": "automatic",
    "newArchEnabled": true,
    "entryPoint": "./App.tsx",
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.anonymous.noho"
    },
    "web": {
      "bundler": "metro",
      "output": "static",
      "favicon": "./assets/images/favicon.png"
    },
    "plugins": [
      "expo-router",
      [
        "expo-splash-screen",
        {
          "backgroundColor": "#3cb371"
        }
      ],
      "expo-font"
    ],
    "experiments": {
      "typedRoutes": true
    }
  }
}

具体操作说明 #

• 按照文档更新expo-splash-screen插件配置来设置背景色；
• 添加entryPoint字段并创建App.tsx，在其中编写文本居中布局；
• 修改icon字段为自定义图片，确认启动屏中央显示的正是该图片，但并未在启动屏插件中配置过该图片。

App.tsx 代码 #

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App: React.FC = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        LOREM
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#80DAEB',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 48,
  },
});

export default App;

解决方案 #

1. 区分启动屏与App初始页面 #

你当前的App.tsx是应用的初始页面，并非启动屏。Expo的启动屏是原生层的静态资源，需要单独配置，而非通过React组件实现。

2. 正确配置expo-splash-screen插件 #

要实现自定义文本+指定背景色的启动屏，需要：

• 生成包含居中文本的启动屏图片（避免复用icon资源）；
• 在app.json的expo-splash-screen插件中完整配置：

[
  "expo-splash-screen",
  {
    "backgroundColor": "#3cb371",
    "image": "./assets/images/splash-screen.png", // 替换为你的启动屏图片路径
    "resizeMode": "contain"
  }
]

3. 清理缓存并重新构建 #

Android端容易缓存旧的启动屏资源，执行以下命令重置：

expo prebuild --clean
expo run:android

4. 处理entryPoint与expo-router冲突 #

你的package.json中main字段是expo-router/entry，同时app.json设置了entryPoint: "./App.tsx"，这会导致路由逻辑冲突。如果使用expo-router，需删除entryPoint字段，将初始页面放在app/(tabs)/index.tsx或app/index.tsx中。

5. 验证启动屏图片尺寸 #

确保启动屏图片符合Android分辨率要求：

• 竖屏建议最小尺寸：1242x2688像素
• 可使用Expo工具生成多适配尺寸的资源包

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