Expo SDK 52启动页图片无法正常显示问题求助及反馈

问题详情 #

• 环境：Expo SDK 52
• 复现操作：创建空白项目，完全照搬官方启动页文档代码实现
• 异常表现：
  • Expo Go中首次运行能显示配置的启动页，之后每次刷新仅出现白屏，直接跳转至index页面
  • dev build或TestFlight生产构建环境下，同样是白屏后直接渲染首页，启动页图片完全不展示
• 配置说明：已在app.json中通过expo-splash-screen插件配置启动页图片、尺寸、背景色等参数

相关代码 #

_layout.tsx #

import React, { useState, useEffect, useCallback } from 'react';
import { Stack } from "expo-router";
import { Text, View, StyleSheet } from 'react-native';
import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';
import Entypo from '@expo/vector-icons/Entypo';

// 阻止启动页自动隐藏
SplashScreen.preventAutoHideAsync();

// 设置启动页动画选项
SplashScreen.setOptions({
  duration: 1000,
  fade: true,
});

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

  useEffect(() => {
    async function prepare() {
      try {
        // 预加载字体
        await Font.loadAsync(Entypo.font);
        // 模拟慢加载延迟（测试用）
        await new Promise(resolve => setTimeout(resolve, 10000));
      } catch (e) {
        console.warn(e);
      } finally {
        setAppIsReady(true);
      }
    }

    prepare();
  }, []);

  const onLayoutRootView = useCallback(() => {
    if (appIsReady) {
      // 根视图布局完成后隐藏启动页
      SplashScreen.hide();
    }
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }

  return (
    <View onLayout={onLayoutRootView} style={styles.container} >
      <Stack >
        <Stack.Screen name="index"/>
      </Stack>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

index.tsx #

import { Text, View } from "react-native";

export default function Index() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text>Edit app/index.tsx to edit this screen.</Text>
    </View>
  );
}

app.json（插件配置部分） #

"plugins": [
  "expo-router",
  [
    "expo-splash-screen",
    {
      "image": "./assets/images/splash-icon.png",
      "imageWidth": 200,
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    }
  ]
]

临时解决方法 #

运行命令 npx expo rebuild 后，启动页图片能正常显示，但这只是临时 workaround，不符合官方文档宣称的「开箱即用」特性。

问题反馈 #

1. 官方在版本发布和文档编写上不够严谨，导致开发者花费大量时间排查本可避免的问题
2. 通过插件配置启动页存在明显弊端：开发阶段无法实时预览启动页效果，每次修改都需要重新构建应用，开发体验大幅倒退

内容的提问来源于stack exchange，提问作者nobby nob