React Native Expo SDK 52 - 启动屏幕不会显示图像

Question

我对 SDK 52 中的启动画面不太满意。 我创建了一个空白项目。从字面上复制了文档代码 https://docs.expo.dev/versions/latest/sdk/splash-screen/ 在 Expo Go 中运行它。它（默认的初始屏幕）仅出现一次，然后每次刷新它都不会显示。 它只显示一个白屏，然后继续到索引文件。当我进行开发构建或生产构建（TestFlight）时也会发生这种情况。我只是看到一个白屏，然后呈现索引页面。如果有人可以提供帮助，我将不胜感激。

// _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';

// Keep the splash screen visible while we fetch resources
SplashScreen.preventAutoHideAsync();

// Set the animation options. This is optional.
SplashScreen.setOptions({
  duration: 1000,
  fade: true,
});


export default function RootLayout() {

  const [appIsReady, setAppIsReady] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        // Pre-load fonts, make any API calls you need to do here
        await Font.loadAsync(Entypo.font);
        // Artificially delay for two seconds to simulate a slow loading
        // experience. Remove this if you copy and paste the code!
        await new Promise(resolve => setTimeout(resolve, 10000));
      } catch (e) {
        console.warn(e);
      } finally {
        // Tell the application to render
        setAppIsReady(true);
      }
    }

    prepare();
  }, []);


  const onLayoutRootView = useCallback(() => {
    if (appIsReady) {
      // This tells the splash screen to hide immediately! If we call this after
      // `setAppIsReady`, then we may see a blank screen while the app is
      // loading its initial state and rendering its first pixels. So instead,
      // we hide the splash screen once we know the root view has already
      // performed layout.
      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 博览会重建

似乎解决了这个问题。但是，我不认为这是一个纯粹的解决方案，而是一种解决方法。正如他们的 doco 中所述，这应该是开箱即用的。我浪费了很多时间来解决这个错误。显然，Expo 团队在发布和设置 doco 时应该更加小心。另外，我认为使用插件文件夹有其缺点，因为您无法在开发过程中测试启动屏幕的外观和感觉。每次都必须构建应用程序才能看到启动屏幕的变化，这就像回到了黑暗时代。

Answer 1

• 将 expo-splash-screen 插件添加到开发构建插件列表

    {
      "expo": {
        "plugins": [
          [
            "expo-splash-screen",
            {
              "image": "./assets/images/splash-icon.png",
              "imageWidth": 200, // Adjust this value if needed
              "resizeMode": "contain", // contain is the default
              "backgroundColor": "#ffffff"
            }
          ]
        ]
      }
    }

• 如果您在删除之前进行了 expo.splash 配置，因为推荐使用 expo-splash-screen 插件方法来做同样的事情

清除构建和重建：运行以下命令来清除构建和重建：

expo prebuild --clean
# expo prebuild -p android --clean
# expo prebuild -p ios --clean

• 检查生成的闪屏图像是否出现在里面：

  android>应用程序> src>主>资源>drawable-hdpi

• 如果找到启动画面但显示空白屏幕，请尝试调整 imageWidth 值并进行干净的构建

• 运行应用程序查看启动画面是否呈现

    npx expo run:android
    npx expo run:ios

参考：https://docs.expo.dev/versions/latest/sdk/splash-screen/#example-appjson-with-config-plugin