2024年最新MacOS下ReactNative环境搭建

安卓平台

一.基础环境搭建

node安装： brew install node@18

yarn安装： npm install -g yarn

Java Development Kit安装： brew install --cask zulu@17
执行javac -version查看jdk版本，验证是否安装成功

低于 0.73 版本的 React Native 需要 JDK 11 版本，而低于 0.67 的需要 JDK 8 版本。

二.Android 开发环境搭建

安装 Android Studio
developer.android.google.cn/studio/

安装 Android SDK

点击“More Actions”,在下拉列表当中选择“SDK Manager”

选择存放SDK的地址，点击“Next”,过程中会安装勾选的SDK,等待安装完成，点击“Finish”,SDK的选择先忽略

配置 ANDROID_HOME 环境变量 在终端执行echo $0命令查看你所使用的 shell，如果你的 shell 是 zsh，则配置文件为~/.zshrc，如果是 bash 则为~/.bash_profile 在终端执行 vi ~/.zshrc或者vi ~/.bash_profile，把下面的命令加入到 shell 的配置文件中
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

使用source $HOME/.zshrc命令来使环境变量设置立即生效

创建新项目

终端执行npx react-native@latest init AwesomeProject

注意：从 RN 0.73 起，npx react-native init 的代码已完全挪到 @react-native-community/cli 里， 可以执行npx @react-native-community/cli init

打开项目找到 build.gradle 文件

在Android Studio 重新安装适配的Sdk

点击“More Actions”,在下拉列表当中选择“SDK Manager”

如图勾选‘Show Package Details’,再选择34版本

再选择对应版本的‘34.0.0’ 的SDK Tools，点击“ok”进行安装

使用 Android 模拟器

点击“More Actions”,在下拉列表当中选择“Virtual Device Manager”,进入之后选择新建一个虚拟设备，选择完设备之后，下载选择与“34”版本的镜像

最后完成虚拟设备的创建

为了解决Gradle下载过慢的问题，我们可以利用国内优秀的镜像站点来加速下载

找到gradle-wrapper.properties文件，修改为国内源 官网地址：services.gradle.org/distributio…

腾讯云镜像 Gradle下载地址：mirrors.cloud.tencent.com/gradle/

阿里云镜像 Gradle下载地址：mirrors.aliyun.com/macports/di…

阿里云镜像 Gradle下载地址：mirrors.aliyun.com/gradle/

最后运行 yarn android，这时候去喝个咖啡，经过漫长的等待，安卓环境就完美的跑起来了

注意：从 React Native 0.73（2023-12 发布） 开始，官方模板默认不再自动启动 Metro，
必须 先手动 npm start（或 yarn start） 把 Metro 跑起来，再开另一个终端执行 yarn android / yarn ios，否则 CLI 会报错

IOS平台

一.基础环境搭建

使用Homebrew来安装 Node 和 Watchman brew install node@22
brew install watchman

Watchman是由 Facebook 提供的监视文件系统变更的工具

二.Xcode React Native 目前需要Xcode 14.1 或更高版本（建议选择尽量新的版本）。你可以通过 App Store 或是到Apple 开发者官网上下载。这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。

Xcode 的命令行工具

启动 Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode 的命令行工具中包含一些必须的工具，比如git等。

在 Xcode 中安装 iOS 模拟器

安装模拟器只需打开 Xcode > Preferences...  菜单，然后选择 Components 选项，即可看到各种可供安装的不同的 iOS 版本的模拟器。

CocoaPods

CocoaPods是用 Ruby 编写的包管理器（可以理解为针对 iOS 的 npm）。从 0.60 版本开始 react native 的 iOS 版本需要使用 CocoaPods 来管理依赖。你可以使用下面的命令来安装 CocoaPods。CocoaPods 的版本需要 1.10 以上。

brew install cocoapods

最后运行 npm start,另起终端运行 yarn android

可能出现的问题：

一、 xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer

解决方案：

指定命令行工具路径

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer

把“终端里所有 Xcode 命令工具”的查找路径，从旧的 CommandLineTools 切到完整 Xcode，让 xcodebuild、simctl、swift 等都能被 RN（或 CocoaPods、fastlane）找到。

背景细节

1. macOS 可以共存多套开发者工具

   • /Library/Developer/CommandLineTools（仅编译器，无 iOS SDK、模拟器）
   • /Applications/Xcode.app（完整 IDE + iOS SDK + 模拟器 + 命令行工具）

2. 系统变量 DEVELOPER_DIR 决定当前用哪一套
   sudo xcode-select -s <path> 就是改写这个变量，全局生效。

二、“Unable to open base configuration reference file … Pods-livepilotMobile.debug.xcconfig”
→ iOS 工程里找不到 CocoaPods 生成的配置文件，也就是 Pod 安装不完整 / 被中断 / 路径损坏。

1. 清掉旧的 Pods 产物

   cd ios
   rm -rf Pods Podfile.lock build
   

2. 重新安装依赖（确保网络能访问 GitHub & CDN）

   pod install          # 如果机器上 pod 命令找不到，用：
                        # bundle exec pod install （Ruby 环境）
   

   看到 "Pod installation complete!" 且无红色 error 再继续。

三、CDN: trunk URL couldn't be downloaded: 这条错误说明 CocoaPods 默认使用的 CDN trunk 源（cdn.jsdelivr.net）访问超时，根本原因是 国内网络对 jsDelivr 线路不稳定或被限。解决思路就是：换掉 trunk，用能访问的 Git 镜像源。下面给出零失败的 3 步操作。

---

3 步修复

1. 在 Podfile 顶部显式指定镜像源
   打开 ios/Podfile，第一行加入

   source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'
   

   清华镜像与 GitHub 实时同步，国内速度最快；也可换成 https://github.com/CocoaPods/Specs.git 如果你能直连 GitHub。

2. 移除默认的 trunk 源

   pod repo remove trunk
   

3. 重新安装依赖

   cd ios
   pod install --repo-update
   

   看到 “Pod installation complete!” 且无红色 error 即成功。