Expo Web访问localhost:19006显示空白页 React Native问题排查

按以下优先级逐步排查，90%以上的同类型问题都可以解决：

• 第一步：补全Web端必需依赖
  手机端能正常运行仅Web端白屏，最常见原因是初始化项目时未安装Web适配依赖，在项目根目录执行命令补装：
  npx expo install react-dom react-native-web @expo/webpack-config
  如果你使用的是Expo SDK 50及以上版本，额外执行npx expo install @expo/metro-config确保Web端打包工具配置完整。
• 第二步：修正入口注册逻辑
  检查项目根目录下的index.js/index.ts文件，不要使用React Native原生的AppRegistry单独注册组件，必须使用Expo提供的跨端注册方法，标准写法如下：

  import { registerRootComponent } from 'expo';
  import App from './App';
  
  registerRootComponent(App);
  

  自定义原生端注册逻辑会导致Web端找不到DOM挂载节点，直接触发白屏。

• 第三步：排查不兼容代码与组件
  1. 先把App入口内的第三方组件、自定义业务组件逐段注释，每注释一部分就刷新Web页面，定位到不兼容Web端的组件后，替换为跨端支持的版本，或使用平台判断单独给Web端写兼容逻辑
  2. 给根容器View添加flex:1样式，Web端根元素默认高度自适应，不写该样式会导致内容高度为0视觉上呈现白屏
  3. 打开浏览器开发者工具的Console面板，查看是否有红色运行时报错，根据报错信息定位具体代码问题，常见触发点包括：直接在全局作用域调用原生端专属API、未做平台判断就使用window/document等Web专属对象、样式属性值传了Web不支持的类型
• 第四步：清除缓存重启服务
  缓存异常会导致Web端打包产物缺失，停掉当前运行的Expo服务后，执行带清缓存参数的启动命令：
  expo start -c --web
  启动后强制刷新浏览器（Ctrl+F5/Command+Shift+R）跳过浏览器本地缓存加载页面。
• 第五步：排查端口与浏览器拦截问题
  1. 检查19006端口是否被其他进程占用，若存在端口占用，可指定其他端口启动Web服务：expo start --web --port 19008
  2. 关闭浏览器的广告拦截、脚本类插件，不要使用无痕模式访问开发服务，这类插件/模式会拦截Expo开发环境的热更新脚本，导致页面无法正常渲染。
  3. 如果你使用Expo Router做路由，确认app目录下存在index.js/index.tsx首页文件，Web端访问根路径时找不到匹配路由也会返回空白页面。

内容的提问来源于stack exchange，提问作者גיא בוהדנה