React新手求助：iOS/Android模拟器无法加载Expo项目及Metro Bundler问题

版本环境 #

当前使用的 Node、Yarn、NPM 及 Expo 版本（附截图）

问题1：Metro Bundler 无法在浏览器自动打开 #

解决步骤 #

• 手动访问 Metro 默认地址：直接在浏览器输入 http://localhost:8081，如果端口被占用，查看终端输出的实际端口号替换后访问。
• 修复 Expo-CLI 依赖问题：
  1. 清除 Yarn 缓存：yarn cache clean
  2. 删除项目根目录的 node_modules 和 yarn.lock
  3. 重新安装依赖：yarn install
  4. 若依赖冲突仍存在，降级 Expo-CLI 到稳定版本（比如适配你项目 SDK 的版本）：yarn global add expo-cli@4.12.10
• 启动时强制触发浏览器打开：执行 expo start --web 先启动 Web 端，Metro 会自动打开浏览器，之后再切换到模拟器；或者添加 --open 参数：expo start ios --open

问题2：iOS/Android 模拟器启动报错 #

1. justifyContent 错误 #

• 检查所有使用 justifyContent 的样式，确保仅在Flex 容器（如 React Native 的 View 组件，或设置了 display: flex 的元素）中使用。
• 验证属性值合法性：必须是 flex-start、flex-end、center、space-between、space-around、space-evenly 中的一种，排查拼写错误。
• 排查是否在非 Flex 容器组件（如 Text、Image）上误用该属性。

2. Main 未注册错误 #

• 检查项目入口文件（通常是 App.js 或 index.js）的注册逻辑：
  Expo 项目需确保：

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

  裸 React Native 项目需确保：

  import { AppRegistry } from 'react-native';
  import App from './App';
  import { name as appName } from './app.json';
  
  AppRegistry.registerComponent(appName, () => App);
  

• 清除 Metro 缓存：执行 expo r -c（或 expo start --clear）后重启项目。
• 匹配 SDK 版本：打开 app.json 中的 expo.sdkVersion，确保与本地 Expo-CLI 对应的 SDK 版本一致，不一致则升级项目 SDK 或降级本地 Expo-CLI。

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