Expo React Native：字体加载完成后隐藏SplashScreen的实现问题

核心实现逻辑 #

利用expo-font的useFonts钩子返回的加载状态，结合React的useEffect和useRef，确保仅在字体完全加载后调用一次SplashScreen.hideAsync()：

1. 先调用SplashScreen.preventAutoHideAsync()阻止启动屏自动隐藏，避免字体未加载完成就提前消失
2. 通过useFonts加载字体，获取fontsLoaded状态值判断字体是否加载完成
3. 用useRef标记是否已执行过隐藏操作，确保hideAsync()只触发一次
4. 用useEffect监听fontsLoaded状态，满足条件时执行隐藏操作

完整代码示例 #

import React, { useEffect, useRef } from 'react';
import { Text, View } from 'react-native';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';

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

export default function App() {
  // 加载自定义字体
  const [fontsLoaded] = useFonts({
    'CustomFont-Regular': require('./assets/fonts/CustomFont-Regular.ttf'),
    'CustomFont-Bold': require('./assets/fonts/CustomFont-Bold.ttf'),
    // 按需添加更多字体
  });

  // 标记是否已隐藏过启动屏
  const hasHiddenSplash = useRef(false);

  useEffect(() => {
    async function handleSplashHide() {
      // 仅在字体加载完成且未执行过隐藏操作时触发
      if (fontsLoaded && !hasHiddenSplash.current) {
        await SplashScreen.hideAsync();
        hasHiddenSplash.current = true;
      }
    }
    handleSplashHide();
  }, [fontsLoaded]);

  // 字体未加载完成时，返回空视图（避免渲染依赖字体的内容）
  if (!fontsLoaded) {
    return null;
  }

  // 字体加载完成后渲染主内容
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontFamily: 'CustomFont-Regular', fontSize: 24 }}>字体加载完成！</Text>
      <Text style={{ fontFamily: 'CustomFont-Bold', fontSize: 20, marginTop: 10 }}>这是加粗字体</Text>
    </View>
  );
}

关键细节说明 #

• useFonts返回的fontsLoaded是布尔值，字体全部加载完成后会变为true，这是判断的核心依据
• useRef的hasHiddenSplash用来记录是否已经执行过隐藏操作，防止因组件重渲染导致hideAsync()重复调用
• 字体未加载完成时返回null，不要渲染依赖自定义字体的组件，避免出现字体闪烁或加载异常

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