需安装xcode、android studio、node.js、watchman、jdk及react native cli或expo cli,并完成ios(含cocoapods、模拟器配置)和android(含sdk、环境变量、jdk 17)平台配置。

如果您希望在Mac上开始React Native开发,并能够同时运行iOS和Android应用,则需要正确安装Xcode、Android Studio、Node.js、Watchman、JDK以及React Native CLI或Expo CLI,并完成对应平台的环境配置。以下是具体操作步骤:
一、安装Homebrew与基础依赖
Homebrew是macOS上最常用的包管理器,用于简化后续工具链的安装过程。通过它可快速获取Node.js、Watchman等必需组件。
1、打开终端(Terminal),执行以下命令安装Homebrew:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
2、安装完成后,运行brew --version确认是否成功。
3、使用Homebrew安装Node.js和Watchman:
brew install node watchman
4、验证Node.js版本,确保为v18.x或v20.x(React Native 0.73+推荐Node.js v18.19+):
node -v
二、配置iOS开发环境
Xcode及其命令行工具是构建和运行React Native iOS应用的必要条件,同时需配置模拟器与证书相关支持。
1、前往Mac App Store下载并安装Xcode(建议版本15.0或更高)。
2、打开Xcode,进入Preferences → Locations,在Command Line Tools下拉菜单中选择已安装的Xcode版本。
3、在终端中执行以下命令安装iOS模拟器运行时依赖:
sudo xcode-select --install
4、运行以下命令接受Xcode许可证:
sudo xcodebuild -license accept
5、安装CocoaPods(用于管理iOS原生依赖):
sudo gem install cocoapods
三、配置Android开发环境
Android Studio提供SDK、模拟器和构建工具,是运行React Native Android应用的基础。需手动配置JAVA_HOME与ANDROID_HOME环境变量。
1、从Android Studio官网下载并安装最新稳定版(推荐Flamingo或Giraffe)。
2、启动Android Studio,通过SDK Manager安装以下组件:
Android SDK Build-Tools 34.0.0
Android SDK Platform-Tools
Android SDK Platforms for API Level 34
3、在终端中编辑Shell配置文件(如~/.zshrc或~/.bash_profile),添加以下内容:
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
4、运行source ~/.zshrc(或对应配置文件)使环境变量生效。
5、安装JDK 17(Android Gradle Plugin 8.0+要求JDK 17):
brew install openjdk@17
6、设置JAVA_HOME指向JDK 17:
export JAVA_HOME=$(/opt/homebrew/opt/openjdk@17/bin/java -XshowSettings:properties -version 2>&1 > /dev/null | grep "java.home" | cut -d "=" -f2 | tr -d " ")
四、安装React Native CLI并创建项目
React Native CLI提供原生集成能力,支持对iOS和Android工程进行深度定制与调试。
1、全局安装React Native CLI:
npm install -g react-native-cli
2、创建新项目(项目名不能含大写字母或特殊符号):
npx react-native init MyRNApp
3、进入项目目录:
cd MyRNApp
4、启动Metro服务器:
npx react-native start
5、在另一终端窗口中运行iOS应用:
npx react-native run-ios
6、运行Android应用(需提前启动Android模拟器或连接真机):
npx react-native run-android
五、使用Expo CLI快速启动(替代方案)
Expo CLI屏蔽了原生配置复杂性,适合初学者快速预览React Native界面,但限制直接访问原生API及自定义原生模块。
1、全局安装Expo CLI:
npm install -g expo-cli
2、初始化Expo项目:
npx create-expo-app MyExpoApp
3、进入项目目录:
cd MyExpoApp
4、启动开发服务器:
npx expo start
5、按提示在终端中输入i启动iOS模拟器,或输入a启动Android模拟器。
6、也可扫描QR码,在Expo Go应用中实时预览(需iOS App Store或Google Play安装Expo Go)。











