Expo构建React Native应用真机卡在闪屏，模拟器运行正常

核心问题分析与修复 #

1. 修复SplashScreen逻辑错误 #

你的代码中onLayoutRootView的赋值方式存在严重问题——将useEffect的返回值（清理函数）传给了RootNav的onLayout属性，导致闪屏隐藏逻辑无法正确触发。同时初始化useEffect未监听fontsLoaded状态变化，可能在字体未加载完成时就标记应用就绪，引发生产环境下的加载异常。

修改后的App.js代码：

import React,{useState, useEffect} from 'react';
import * as SplashScreen from 'expo-splash-screen';
import { useFonts } from '@expo-google-fonts/inter';
import RootNav from "./src/Routes/RootNav";

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

export default function App() {
  const [appIsReady, setAppIsReady] = useState(false);
  
  const [fontsLoaded] = useFonts({
    'caviar-dreams-bold': require('./assets/fonts/CaviarDreams_Bold.ttf'),
    'caviar-dreams-bold-italic': require('./assets/fonts/CaviarDreams_BoldItalic.ttf'),
    'caviar-dreams-italic': require('./assets/fonts/CaviarDreams_Italic.ttf'),
    'caviar-dreams': require('./assets/fonts/CaviarDreams.ttf'),
  });

  useEffect(() => {
    async function prepare() {
      try {
        // 等待字体加载完成，替换硬编码延时为动态检查
        if (!fontsLoaded) {
          await new Promise(resolve => {
            const checkInterval = setInterval(() => {
              if (fontsLoaded) {
                clearInterval(checkInterval);
                resolve();
              }
            }, 100);
          });
        }
        // 可添加其他初始化逻辑（如数据预加载）
      } catch (e) {
        console.warn(e);
      } finally {
        setAppIsReady(true);
      }
    }

    prepare();
  }, [fontsLoaded]); // 依赖fontsLoaded，确保状态变化时重新执行

  useEffect(() => {
    async function hideSplash() {
      if (appIsReady) {
        await SplashScreen.hideAsync();
      }
    }
    hideSplash();
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }

  return <RootNav />;
}

2. 清理生产环境无关依赖 #

你的package.json包含多个仅用于开发的工具类依赖，这些依赖在生产构建中可能引发冲突或异常：

• 将expo-community-flipper、expo-dev-client、react-native-flipper移至devDependencies
• 移除react-native-splash-screen，避免与expo-splash-screen功能冲突

调整后的package.json依赖片段：

"dependencies": {
  "@expo-google-fonts/inter": "^0.2.2",
  "@react-navigation/native": "^6.0.16",
  "@react-navigation/native-stack": "^6.2.5",
  "axios": "^0.25.0",
  "expo": "^47.0.0",
  "expo-av": "~13.0.2",
  "expo-font": "~11.0.1",
  "expo-notifications": "~0.17.0",
  "expo-secure-store": "~12.0.0",
  "expo-splash-screen": "^0.17.5",
  "expo-status-bar": "~1.4.2",
  "expo-updates": "~0.15.6",
  "lottie-react-native": "5.1.4",
  "react": "18.1.0",
  "react-dom": "18.1.0",
  "react-native": "0.70.5",
  "react-native-dotenv": "^3.3.1",
  "react-native-reanimated": "~2.12.0",
  "react-native-searchable-dropdown": "^1.1.3",
  "react-native-select-dropdown": "^1.7.0",
  "react-native-web": "~0.18.7",
  "zustand": "^3.7.0"
},
"devDependencies": {
  "@babel/core": "^7.19.3",
  "expo-community-flipper": "^47.0.0",
  "expo-dev-client": "~2.0.1",
  "react-native-flipper": "^0.175.0"
}

3. 规范生产构建流程 #

• 使用eas build --platform android --profile production执行生产构建，避免使用开发模式构建包
• 检查app.json中的splash配置，确保闪屏资源路径正确、适配多屏幕尺寸
• 构建前执行expo prebuild --clean清理缓存，避免旧代码残留影响构建结果

额外排查步骤 #

• 用adb logcat *:E连接真机查看错误日志，定位生产环境下的具体异常（如字体缺失、权限问题、第三方库兼容错误）
• 对比本地生产构建APK与Play Store下载APK的表现，排除签名或分发环节的问题

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