React Native Expo SDK52 Android启动屏仅显示小图，如何设置为全屏？

核心问题分析 #

你当前的配置中，启动屏的resizeMode设置为contain，这个模式会保持图片原有比例，仅在屏幕范围内显示完整图片，因此会出现小图居中的情况。同时expo-splash-screen插件配置里的resizemode是小写，属于配置项书写错误（Expo配置要求驼峰命名）。

修改后的app.json配置 #

将两处的resizeMode改为cover，并修正插件内的命名错误：

{
  "expo": {
    "name": "my-app",
    "slug": "my-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "userInterfaceStyle": "light",
    "newArchEnabled": true,
    "splash": {
      "image": "./assets/images/splash.png",
      "resizeMode": "cover",
      "backgroundColor": "#232323"
    },
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#232323"
      },
      "package": "com.rasyidialwee.my-app"
    },
    "web": {
      "favicon": "./assets/images/favicon.png",
      "bundler": "metro"
    },
    "plugins": [
      "expo-router",
      "expo-font",
      [
        "expo-splash-screen",
        {
          "backgroundColor": "#232323",
          "image": "./assets/images/splash.png",
          "dark": {
            "image": "./assets/images/splash.png",
            "backgroundColor": "#232323"
          },
          "resizeMode": "cover"
        }
      ]
    ]
  }
}

后续操作步骤 #

1. 保存修改后的app.json
2. 重新执行npx expo prebuild命令，重新生成原生项目文件
3. 在Android模拟器中重新运行应用，启动屏即可全屏显示

补充说明 #

• cover模式会拉伸图片以填满整个屏幕，同时保持图片比例，超出屏幕的部分会被裁剪
• 如果需要图片完全显示且无拉伸，可考虑调整图片尺寸适配主流屏幕比例，或使用native模式（依赖原生系统的缩放逻辑）

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