React-Native Expo：加载字体时仅显示 SplashScreen

Question

在等待加载字体和其他异步任务时，如何仅显示 SplashScreen 而不是空视图？我目前面临的问题（在 Android 和 iOS 上）是，当未加载字体时，会显示带有标题的白色空视图，这非常烦人。

这是我当前的代码：

import { SplashScreen, Stack } from "expo-router";
import { useFonts } from "expo-font"
import { useEffect } from "react";

SplashScreen.preventAutoHideAsync();

export default function App() {
  const [fontsLoaded, fontError] = useFonts({
    "Poppins-Black": require("../assets/fonts/Poppins-Black.ttf"),
    "Poppins-Bold": require("../assets/fonts/Poppins-Bold.ttf"),
    ...
  })

  useEffect(() => {
    if (fontError) throw fontError;
    if (fontsLoaded) SplashScreen.hideAsync();
  }, [fontsLoaded, fontError])

  if (!fontsLoaded && !fontError) {
    return null;
  }

  return (
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      </Stack>
  );
}

我还尝试返回已弃用的组件，但也不起作用

Answer 1

我通过将另一个 Stack.Screen 添加到我的根 _layout.jsx 文件中解决了这个问题，如下所示：

<Stack.Screen name="index" options={{ headerShown: false }} />

之后我可以使用图像组件轻松地显示启动画面。