Mac怎么安装配置React Native_Mac如何搭建RN开发环境运行iOS和Android应用【教程】

星墨姑娘_7622

星墨姑娘_7622

2026-03-19

421人浏览

原创

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

mac怎么安装配置react native_mac如何搭建rn开发环境运行ios和android应用【教程】

如果您希望在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(或对应配置文件)使环境变量生效。

Seede AI
Seede AI

一款AI图像与设计工具,主要用于AI 驱动的设计工具,适合需要提升相关任务效率的用户。

下载

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)。

相关专题

更多
c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

2023.09.22

549

3

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

2024.03.01

1678

6

curl_exec
curl_exec

curl_exec函数是PHP cURL函数列表中的一种,它的功能是执行一个cURL会话。给大家总结了一下php curl_exec函数的一些用法实例,这个函数应该在初始化一个cURL会话并且全部的选项都被设置后被调用。他的返回值成功时返回TRUE, 或者在失败时返回FALSE。

2023.06.14

3583

6

linux常见下载安装工具
linux常见下载安装工具

linux常见下载安装工具有APT、YUM、DNF、Snapcraft、Flatpak、AppImage、Wget、Curl等。想了解更多linux常见下载安装工具相关内容,可以阅读本专题下面的文章。

2023.10.30

815

4

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

4276

8

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.07.28

1315

5

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1718

5

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

2023.08.17

9823

11

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

960

4

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
安装 Xdebug 并配置 phpstorm
安装 Xdebug 并配置 phpstorm

共1课时 | 185人学习

PostgreSQL 教程
PostgreSQL 教程

共48课时 | 20.5万人学习

好课诞生记
好课诞生记

共20课时 | 7.1万人学习