Apple M1设备VSCode React Native调试问题及react-native doctor报错求助

基础依赖校验 #

• Rosetta 2：必须安装，部分依赖需通过Rosetta兼容，执行命令：softwareupdate --install-rosetta，终端可右键选择「使用Rosetta打开」运行特定命令
• Node.js：用nvm安装ARM64架构的LTS版本，命令：nvm install --lts --arch=arm64，验证版本：node -v，推荐16.x及以上
• Xcode：安装适配M1的最新稳定版，首次打开需完成协议同意与组件安装；安装Command Line Tools：xcode-select --install，确认路径：sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
• CocoaPods：先安装适配M1的ffi：sudo gem install ffi，再通过brew安装：brew install cocoapods；项目目录执行安装时若遇兼容问题，用arch -x86_64 pod install
• Watchman：brew安装ARM版本：brew install watchman，用于文件变更监听
• VSCode：安装ARM64版本，必备插件：React Native Tools、ESLint、Prettier

项目配置校验 #

• 项目根目录执行arch -x86_64 npm install或yarn install（解决部分依赖的x86兼容问题）
• 确认ios/Podfile顶部配置platform :ios, '14.0'（M1最低适配iOS版本），执行pod install
• 检查package.json中react-native版本，推荐0.68+（对M1支持更完善）

1. Xcode环境变量修复
   • 确认Xcode已完成初始化，执行xcodebuild -version验证是否能正常输出版本信息，报错则重新安装/修复Xcode
   • 执行xcode-select -p检查路径，若不正确执行sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
2. CLI版本升级
   • 全局升级CLI：npm install -g @react-native-community/cli
   • 或本地升级doctor模块：npm install @react-native-community/cli-doctor --save-dev，再重新执行npx react-native doctor
3. 缓存清理
   • 清除项目依赖与缓存：rm -rf node_modules && npm cache clean --force && npm install
   • 清除watchman缓存：watchman watch-del-all
4. Rosetta环境执行
   • 用「使用Rosetta打开」的终端执行npx react-native doctor，规避ARM/x86架构冲突

1. 插件与配置检查
   • 确保React Native Tools插件已安装并重启VSCode
   • 配置.vscode/launch.json（无则新建）：

     {
       "version": "0.2.0",
       "configurations": [
         {
           "name": "Debug iOS",
           "program": "${workspaceFolder}/.vscode/launchReactNative.js",
           "type": "reactnative",
           "request": "launch",
           "platform": "ios"
         },
         {
           "name": "Debug Android",
           "program": "${workspaceFolder}/.vscode/launchReactNative.js",
           "type": "reactnative",
           "request": "launch",
           "platform": "android"
         }
       ]
     }
     

2. 调试前置操作
   • iOS：先通过Xcode启动模拟器，或执行npx react-native run-ios启动项目后，再点击VSCode调试按钮
   • Android：确保模拟器/真机已连接，执行npx react-native run-android启动项目后再调试
3. 端口与缓存处理
   • 检查8081端口占用：lsof -i :8081，占用则杀死进程：kill -9 <PID>
   • 执行npx react-native start --reset-cache清除缓存后再启动调试
4. M1适配设置
   • VSCode设置中搜索「react-native.rosetta」，勾选「Use Rosetta for Node」，解决ARM环境下调试的兼容性问题

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