Expo+React Native中expo-splash-screen调用报错问题求助

一、解决expo-splash-screen导入为undefined及调用报错问题 #

1. 确认安装方式与导入语法 #

• 用Expo官方命令安装依赖，适配SDK版本：

  expo install expo-splash-screen
  

  不要直接用npm install或yarn add，避免版本不匹配导致的异常。
• 必须使用命名空间导入，不能用默认导入：

  import * as SplashScreen from 'expo-splash-screen';
  

  该库采用命名空间导出，默认导入会得到undefined，这是核心原因之一。

2. 配置app.json/app.config.js #

在Expo配置文件中添加闪屏配置，确保手动控制显示时机：

"expo": {
  "splash": {
    "image": "./assets/splash.png",
    "resizeMode": "contain",
    "backgroundColor": "#ffffff",
    "hideAfterLoad": false
  }
}

hideAfterLoad设为false是关键，避免闪屏自动隐藏，让代码能接管显示逻辑。

3. 正确编写预加载逻辑 #

结合expo-font预加载字体时，要确保资源加载完成后再隐藏闪屏，示例代码：

import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';
import { useEffect, useState } from 'react';

// 启动时立即阻止闪屏自动隐藏
SplashScreen.preventAutoHideAsync();

export default function App() {
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    async function loadResources() {
      try {
        // 加载本地字体
        await Font.loadAsync({
          'CustomFont-Regular': require('./assets/fonts/CustomFont-Regular.ttf'),
          'CustomFont-Bold': require('./assets/fonts/CustomFont-Bold.ttf'),
        });
        // 可添加其他资源加载逻辑，比如图片、图标等
      } catch (error) {
        console.error('资源加载失败:', error);
      } finally {
        setIsReady(true);
        // 资源加载完成后隐藏闪屏
        await SplashScreen.hideAsync();
      }
    }

    loadResources();
  }, []);

  // 资源未加载完成时返回null，保持闪屏显示
  if (!isReady) {
    return null;
  }

  return (
    // 你的应用主组件
  );
}

二、解决Windows下npx pod-install报错问题 #

npx pod-install是专门用于macOS系统处理iOS项目CocoaPods依赖的命令，Windows系统本身不支持iOS开发相关的CocoaPods工具，因此无需执行该命令：

• 若你在Windows上开发Android应用：Expo会自动处理Android依赖，直接用expo run:android或Expo Go测试即可，无需额外操作。
• 若需要开发iOS应用：必须使用macOS环境（或借助Expo云构建服务eas build），在macOS上执行npx pod-install来处理iOS依赖。

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