Macbook m4 配置ReactNative开发环境

120 阅读2分钟

以下是针对你的 Mac(Apple Silicon 芯片,默认 zsh)从 0 到配置完成 React Native 开发环境并运行模拟器的完整指南,整合了之前的所有操作和解决方案:

一、基础工具安装

1. 安装 Homebrew(包管理器)


# 安装Homebrew /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" # 配置Homebrew环境变量(安装后提示的命令) echo >> /Users/edwarelee/.zprofile echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/edwarelee/.zprofile eval "$(/opt/homebrew/bin/brew shellenv)" # 验证安装 brew -v # 显示版本号即成功

2. 安装 Node.js 和 Watchman


brew install node watchman # 验证 node -v # 需≥18.x watchman -v # 有版本输出即可

二、iOS 开发环境(可选,需 Xcode)

1. 安装 Xcode

  • 从 App Store 下载并安装 Xcode(你的 macOS 15.7.2 支持 Xcode 16+)。
  • 首次打开 Xcode,同意协议并等待组件安装完成。

2. 配置 Xcode 命令行工具


# 安装命令行工具 xcode-select --install # 绑定Xcode路径 sudo xcode-select -s /Applications/Xcode.app/Contents/Developer # 验证Xcode xcodebuild -version # 显示Xcode版本即成功

3. 安装 CocoaPods(iOS 依赖管理)

# 用Homebrew安装(更稳定) brew install cocoapods # 配置Ruby路径(若pod命令找不到) echo 'export PATH="/opt/homebrew/opt/ruby/bin:$PATH"' >> ~/.zshrc source ~/.zshrc # 验证 pod --version # 显示版本号即成功

三、Android 开发环境(不使用 Android Studio)

1. 安装 JDK 17


# 安装temurin@17(适配React Native) brew install --cask temurin@17 # 配置JDK环境变量 echo 'export PATH="/opt/homebrew/opt/temurin@17/bin:$PATH"' >> ~/.zshrc echo 'export JAVA_HOME="/opt/homebrew/opt/temurin@17/libexec/openjdk.jdk/Contents/Home"' >> ~/.zshrc source ~/.zshrc # 验证 java -version # 显示17.x.x版本即成功

2. 下载并配置 Android SDK


# 创建SDK目录 mkdir -p ~/Library/Android/sdk # 假设下载的压缩包在「下载」文件夹,解压并改名 unzip ~/Downloads/commandlinetools-mac-*.zip -d ~/Library/Android/sdk/cmdline-tools mv ~/Library/Android/sdk/cmdline-tools/cmdline-tools ~/Library/Android/sdk/cmdline-tools/latest

3. 配置 Android 环境变量(zsh)


# 打开配置文件 nano ~/.zshrc # 添加以下内容(复制粘贴) export ANDROID_HOME=~/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin export PATH=$PATH:$ANDROID_HOME/platform-tools export PATH=$PATH:$ANDROID_HOME/emulator # 保存并生效(Ctrl+O → 回车 → Ctrl+X) source ~/.zshrc

4. 安装 Android 组件(适配 M 芯片)


# 安装Android 33核心组件(API 33) sdkmanager "platforms;android-33" "build-tools;33.0.0" "platform-tools" "emulator" # 安装M芯片兼容的ARM64系统镜像(关键!避免架构不兼容) sdkmanager "system-images;android-33;google_apis;arm64-v8a"

5. 创建并启动 Android 模拟器


# 创建模拟器(名称MyEmulator,设备型号pixel_5) avdmanager create avd -n MyEmulator -k "system-images;android-33;google_apis;arm64-v8a" -d pixel_5 # 启动模拟器 emulator @Myemulator

四、创建并运行 React Native 项目

1. 创建项目


# 使用TypeScript模板 npx @react-native-community/cli init MyRNApp --template react-native-template-typescript cd MMyRNApp

2. 运行 iOS(需 Xcode 和模拟器)


npx @react-native-community/cli init MyProject --template react-native-template-typescript

3. 运行 Android(需已启动的 Android 模拟器)


npx react-native run-android # 自动安装应用到Android模拟器

五、VS Code 配置(推荐)

安装以下插件提升开发效率:

  • React Native Tools(调试支持)
  • ESLint(代码检查)
  • Prettier(代码格式化)

关键注意事项

  1. Apple Silicon 芯片(M 系列)必须使用arm64-v8a架构的 Android 系统镜像,否则模拟器无法启动。
  2. 环境变量配置后若未生效,执行source ~/.zshrc刷新。
  3. 首次运行项目会下载依赖(如 Gradle、CocoaPods),耗时较长,耐心等待。

按以上步骤操作,即可完成从环境配置到模拟器运行的全流程。遇到问题可对照步骤排查,或提供具体报错信息进一步解决。