模拟器无法连接 / 项目启动报错

环境常见问题排查

在 React Native 开发过程中，模拟器无法连接和项目启动报错是常见的问题。本节将介绍如何排查和解决这些问题。

1. 模拟器无法连接问题

症状

• 运行 npx expo start 后，按 i 或 a 键无法启动模拟器
• 模拟器启动后无法连接到开发服务器
• 应用在模拟器中显示 "Network request failed" 错误

解决方案

方法一：检查网络连接

1. 确保模拟器和开发服务器在同一网络

   • 模拟器应该使用与开发机器相同的网络连接
   • 检查防火墙设置，确保端口 8081（或你指定的端口）未被阻止

2. 重启 adb 服务

   • 运行以下命令：

     adb kill-server
     adb start-server

3. 检查模拟器网络设置

   • 在 Android 模拟器中，进入 "Settings" → "Network & internet" → 确保 Wi-Fi 已连接
   • 在 iOS 模拟器中，网络连接通常是自动配置的

方法二：使用 localhost 而非 IP 地址

1. 修改 Expo 配置

   • 运行 npx expo start --localhost
   • 这将使用 localhost 而非 IP 地址

2. 在模拟器中使用 localhost

   • 确保应用使用 http://localhost:8081 连接到开发服务器

方法三：重启模拟器和开发服务器

1. 关闭模拟器

   • 在 Android 模拟器中，点击 "..." → "Close"
   • 在 iOS 模拟器中，点击 "Simulator" → "Quit Simulator"

2. 停止开发服务器

   • 在终端中按 Ctrl + C 停止 Expo 开发服务器

3. 重新启动

   • 重新启动模拟器
   • 重新启动 Expo 开发服务器

2. 项目启动报错问题

症状

• 运行 npx expo start 时出现错误
• 应用启动后立即崩溃
• 出现 "Error: Unable to resolve module" 错误

解决方案

方法一：修复依赖问题

1. 运行 Expo 修复命令

   • 运行以下命令：

     npx expo install --fix

2. 重新安装依赖

   • 删除 node_modules 目录：

     rm -rf node_modules

   • 重新安装依赖：

     npm install

方法二：检查代码错误

1. 查看详细错误信息

   • 检查终端中的错误信息
   • 查看模拟器中的错误信息

2. 修复代码错误

   • 根据错误信息定位并修复代码问题
   • 常见错误包括：
     • 导入路径错误
     • 语法错误
     • 组件名称错误

方法三：清除缓存

1. 清除 Metro 缓存

   • 运行以下命令：

     npx expo start --clear

2. 清除 npm 缓存

   • 运行以下命令：

     npm cache clean --force

方法四：检查 Expo 版本

1. 更新 Expo CLI

   • 运行以下命令：

     npm install -g expo-cli

2. 更新 Expo SDK

   • 运行以下命令：

     npx expo install --fix --  --legacy-peer-deps && npx expo install react-native-web react-dom @expo/metro-runtime

3. 常见错误及其解决方案

错误 1："Error: Unable to resolve module ../Utilities/Platform"

解决方案：

• 运行 npx expo install --fix
• 确保 React Native 版本与 Expo SDK 版本兼容

错误 2："Error: Unable to resolve module ./wa-sqlite/wa-sqlite.wasm"

解决方案：

• 运行 npx expo install expo-sqlite
• 确保使用最新版本的 expo-sqlite

错误 3："Error: Unable to load script. Make sure you're either running a Metro server"

解决方案：

• 确保 Expo 开发服务器正在运行
• 检查网络连接
• 尝试使用 npx expo start --clear 清除缓存

错误 4："Error: Failed to install the app. Make sure you have the Android development environment set up"

解决方案：

• 确保 Android SDK 已正确安装
• 检查 ANDROID_HOME 环境变量是否正确设置
• 确保模拟器已正确配置

4. 总结

模拟器无法连接和项目启动报错是 React Native 开发中常见的问题。通过本文介绍的方法，你应该能够解决大多数启动问题。

如果以上方法都不起作用，你可以尝试：

1. 查看详细的错误信息，了解具体的问题原因
2. 搜索相关错误信息，寻找解决方案
3. 重新初始化项目
4. 咨询社区或寻求专业帮助

下一节，我们将介绍一键修复环境脚本，帮助你快速解决环境问题。