Expo Web构建后无报错但仅显示空白白屏的问题排查求助

大家好，我正在开发一个React Native Expo项目，尝试用npx expo start或npx expo start --clear启动Web构建。项目编译全程无报错，终端和浏览器控制台都没出现任何错误提示，但打开localhost后页面始终是一片空白。

以下是我的最小化项目配置：

App.tsx #

import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

RootNavigator.tsx #

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './src/screens/main/HomeScreen';

const Stack = createNativeStackNavigator();

export default function RootNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'MyDosug' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

package.json #

{
  "name": "mydosug",
  "version": "1.0.0",
  "main": "App.tsx",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-navigation/native": "^7.1.17",
    "@react-navigation/native-stack": "^7.3.25",
    "expo": "~53.0.20",
    "expo-status-bar": "~2.2.3",
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "react-native": "0.79.5",
    "react-native-safe-area-context": "5.4.0",
    "react-native-screens": "~4.11.1",
    "react-native-web": "^0.20.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@types/react": "~19.0.10",
    "@types/react-native": "^0.72.8",
    "typescript": "~5.8.3"
  }
}

app.json #

{
  "expo": {
    "name": "MyDosug",
    "slug": "MyDosug",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash-icon.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png",
      "bundler": "metro"
    }
  }
}

babel.config.js #

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

tsconfig.json #

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true
  }
}

我已经尝试了这些排查手段，但问题依然存在：

• 运行npx expo start和npx expo start --clear重启项目
• 检查浏览器控制台，无任何报错信息
• 检查终端输出，构建过程完全正常
• 简化导航配置，只保留单个基础页面
• 清除Metro缓存，重新打包
• 完全删除node_modules和package-lock.json后重新安装依赖
• 运行npx tsc --noEmit修复所有TypeScript语法问题
• 更换Chrome、Firefox、Edge多个浏览器测试
• 使用浏览器隐身模式排除扩展干扰
• 更换端口号启动项目
• 设置EXPO_NO_TYPESCRIPT_SETUP=true避免Expo修改tsconfig
• 在app.json中指定Web打包器为metro

问题核心 #

项目构建和运行阶段均无错误提示，但Web页面始终显示空白。Expo CLI提示Web服务正常运行在http://localhost:8081，但页面没有任何内容渲染。

想请教大家，这个无报错白屏的问题可能是什么原因导致的？还有哪些可以尝试的排查方向？

内容来源于stack exchange