Expo项目Web Bundling完成后显示空白页 控制台无报错

该问题无控制台报错是因为属于样式兼容、条件渲染、跨平台模块导入类问题，不会触发显式JS异常，按以下步骤逐一排查修复即可：

• 根容器高度缺失问题
  react-native-web默认不会给html、body、应用根节点设置100%高度，你在navigation/index.js中给SafeAreaView设置的flex:1会因为父容器高度为0失效，整个应用容器高度为0，视觉上表现为空白。
  修复操作：
  1. 若项目根目录无web/index.html文件则新建，添加全局全屏样式：

  <!DOCTYPE html>
  <html lang="zh-CN">
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.00001,viewport-fit=cover" />
      <style>
        html, body, #root {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
      </style>
    </head>
    <body>
      <div id="root"></div>
    </body>
  </html>
  

  2. 补全navigation/index.js中缺失的样式定义，当前代码引用了styles.container但未创建对应StyleSheet对象：

  import React from "react";
  import { SafeAreaView, StyleSheet } from "react-native";
  import { AuthProvider } from "./AuthProvider";
  import NavigationStack from "./NavigationStack";
  
  
  export default function Providers() {
    return (
      <AuthProvider>
        <SafeAreaView style={styles.container}>
          <NavigationStack />
        </SafeAreaView>
      </AuthProvider>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      width: '100%'
    }
  })
  

• 原生专属依赖未做Web端隔离
  依赖列表中的react-native-flipper、@react-native-firebase/app为React Native原生端专属包，Web环境不存在对应原生桥接，直接导入会导致JS线程静默挂起，不会抛出显式报错。
  修复操作：
  所有引用上述两个包的位置添加平台判断，仅在原生端导入执行：

  import { Platform } from 'react-native';
  if (Platform.OS !== 'web') {
    // 原生端专属逻辑、导入放在这里
    require('react-native-flipper');
    const firebaseApp = require('@react-native-firebase/app').default;
    // 原生端Firebase初始化逻辑
  } else {
    // Web端直接使用已安装的firebase依赖提供的Web SDK即可
  }
  

• 入口文件名大小写兼容问题
  当前入口文件为小写开头的app.tsx，Expo默认配置查找大写开头的App.tsx作为入口，在大小写敏感的文件系统（Linux、WSL2等）下会出现入口匹配异常，直接将文件重命名为App.tsx即可。
• AppLoading组件卡加载态问题
  expo-app-loading组件在Web端无自动隐藏逻辑，如果自定义的useCachedResources钩子在Web端因资源加载逻辑不兼容，永远返回false，页面会一直停留在空的加载状态。
  修复操作：
  给加载逻辑加超时兜底，避免无限加载：

  // App.tsx内
  const [isLoadingTimeout, setIsLoadingTimeout] = React.useState(false);
  React.useEffect(() => {
    // 最长等待3秒加载，超时直接渲染应用
    const timer = setTimeout(() => setIsLoadingTimeout(true), 3000);
    return () => clearTimeout(timer);
  }, [])
  
  if ((!isLoadingComplete || !loaded) && !isLoadingTimeout) {
    return <AppLoading />;
  } else {
    return <Providers />;
  }
  

• 冗余配置与依赖检查
  1. 删除App.tsx内重复的冗余导入：

  // 删掉以下两行重复导入
  // import NavigationStack from "./navigation/NavigationStack";
  // import AppNavigation from './navigation';
  

  2. 确认babel.config.js已添加react-native-reanimated插件（插件需放在plugins数组末尾），否则Web端导航动画会静默失效：

  module.exports = function(api) {
    api.cache(true);
    return {
      presets: ['babel-preset-expo'],
      plugins: ['react-native-reanimated/plugin'],
    };
  };
  

所有修改完成后执行以下命令清理缓存重启服务：

rm -rf node_modules/.cache .expo web-build
expo start:web --clear

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