适用于mac配置环境。
需要提前准备好梯子。
使用国内镜像会带来不容易发现的坑。
| 版本 | |
|---|---|
| React Native | 0.72 |
| Node | 16+ |
| Homebrew | 4.1.10 |
| mac系统 | 13+ |
备注:mac 系统版本13+ 为了保证xCode的安装 以及一些环境依赖的安装 11+的版本不配置ios环境可不升级
Node
使用 nvm 或者 n 命令切换node到最新长期维护版本即可,React Native官方建议的是16+
Homebrew安装watchman
使用Homebrew来安装 Watchman。
(Homebrew版本过低报错,请升级 Homebrew)
brew install watchman
Android环境配置
备注:
必须安装的依赖有:Node、JDK 和 Android Studio。准备好梯子这是必要条件。
-
Java Development Kit
brew tap homebrew/cask-versions brew install --cask zulu11javac -version来查看你当前安装的 JDK 版本。 -
安装 Android Studio
下载和安装 Android Studio,国内用户可能无法打开官方链接。
请自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项,确保选中了以下几项:Android SDKAndroid SDK PlatformAndroid Virtual Device
然后点击"Next"来安装选中的组件。(注意:当前默认的版本是34 SDK,rn需要33。)
-
切换SDK版本
官网的图太久远,我附上一张新的位置 点击
More Actions可以看到操作选项

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是
Android 13 (Tiramisu)在 Android Studio 的 SDK Manager 中选择安装当前版本适应 SDK。
在
SDK Manager中选择SDK Platforms选项卡,然后在右下角勾选Show Package Details。展开Android 13 (Tiramisu)选项,确保勾选了下面这些组件(重申你必须使用稳定的代理软件,否则可能都看不到这个界面):Android SDK Platform 33Intel x86 Atom_64 System ImageGoogle APIs ARM 64 v8a System Image(针对 Apple Silicon 系列机型)
然后点击
SDK Tools选项卡,同样勾中右下角的Show Package Details。展开Android SDK Build-Tools选项,确保选中了 React Native 所必须的33.0.0版本。你可以同时安装多个其他版本。

点击Apply来下载和安装选中的这些组件。
创建完成后请为了清晰不出错删除34版

- 创建模拟器并删除默认安装的模拟器
点击Virtual Device Manager 进入

创建一个API 33的模拟器

5.配置环境变量 ANDROID_HOME
如果你安装android sutdio 过程中选择的是都是默认选项 那么
检查 shell 终端输入 echo $0
zsh 则配置文件为~/.zshrc
bash 则配置文件为~/.bash_profile
终端使用 vi ~/.bash_profile 或者 ~/.zshrc 打开编辑 复制下面的环境变量 黏贴
然后 按esc 输入:wq! 保存
(也可以去配置文件进行修改)
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
配置IOS
- 需要检查 ruby 是否为最新版本 或者直接时候升级命令(梯子)
注意:第二个命令是设置环境变量,
请根据个人情况切换变量位置
检查 shell 终端输入echo $0
zsh 则配置文件为~/.zshrc
bash 则配置文件为~/.bash_profile
brew install ruby
echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.bash_profile
source ~/.bash_profile
-
安装 Xcode
当前的Xcode 版本mac 13+可安装可官网安装,也可以直接
APP Store搜索Xcode安装
安装过程中选择对应设备即可 -
cocoapods
CocoaPods是用 Ruby 编写的包管理器(可以理解为针对 iOS 的 npm)。从 0.60 版本开始 react native 的 iOS 版本需要使用 CocoaPods 来管理依赖。你可以使用下面的命令来安装 CocoaPods。CocoaPods 的版本需要 1.10 以上。(梯子)
sudo gem install cocoapods不建议是用brew 有可能启动项目失败
创建项目
如果你之前全局安装过旧的
react-native-cli命令行工具,请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突:
npm uninstall -g react-native-cli @react-native-community/cli
使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装,可以直接用 node 自带的npx命令来使用(注意 init 命令默认会创建最新的版本):
npx react-native@latest init AwesomeProject
如果你安装了Android没有安装IOS相关环境 报了IOS xxxx 忽略它,因为环境缺失,不影响启动Android
当你Android 和 IOS 都安装了,项目初始化成功应该是这样的
启动Android (建议将Android模拟器打开 )
cd AwesomeProject
yarn android
启动中报错有些不会造致命错误,比如(模拟器启动太慢了它等不了):

启动IOS
cd AwesomeProject
yarn ios
完成!
本文详细指导如何在mac系统上配置ReactNative开发环境,涉及Node、Homebrew、JDK、AndroidStudio、Xcode和CocoaPods的安装与设置,以及模拟器和环境变量的配置。


被折叠的 条评论
为什么被折叠?



