RN环境搭建

Hyinglin
54 阅读2分钟

1、安装0dcloud软件

后面安装各种软件包可能需要魔法，没有魔法的话连接github容易超，安装软件就会失败。

安装0dcloud成功之后，可以访问youtu看看是否可以正常访问，如果可以，下面就可以开始安装homebrew了。

2、安装homebrew

2.1 打开mac的终端,输入以下命令：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

提示Installation successful，说明homebrew安装成功！但是这时输入brew --version或者which brew会提示command not found，因为还有一步没有做（如上图第二个红色框框显示），就是Homebrew的路径还没有被正确添加到你的 $PATH 环境变量中！

image.png

2.2 将homebrew路径添加到$PATH环境变量中

echo >> /Users/heyinglin/.zprofile 
echo 'eval "$(/opt/homebrew/bin/brew shellenv zsh)"' >> /Users/heyinglin/.zprofile 
eval "$(/opt/homebrew/bin/brew shellenv zsh)"`

image.png

查看homebrew版本

brew -v #【5.0.12】

3、安装node

brew install node #安装成功之后，输入node -v,查看node版本 【25.4.0】

4、安装watchman

brew install watchman #安装成功之后，输入watchman -v,查看watchman版本【2026.01.12.00】

5、安装xcode

安装的时候会提示，要勾选哪些选项，怎么选择呢？看下面：

在安装 Xcode 时，你需要根据你的开发需求来选择要安装的组件。以下是对你提供的截图中各选项的说明和建议：

✅ macOS 26.2（已勾选）

  • 说明：这是 Xcode 自带的 macOS 开发支持，用于开发 macOS 应用。
  • 是否必选？  ✅ 是
    如果你打算开发 macOS 应用，这个必须勾选。而且它默认是“Built-in”（内置），表示它是基础组件。

📱 iOS 26.2（10.47 GB）

  • 说明：用于开发 iOS 应用（iPhone/iPad）。
  • 是否必选？
    ✅ 如果你开发 iOS 应用，强烈建议勾选
    大多数开发者都会需要它。

⌚ watchOS 26.2（3.89 GB）

  • 说明：用于开发 Apple Watch 应用。
  • 是否必选？
    ❌ 仅当你开发 watchOS 应用时才需要勾选
    否则可以不勾选以节省空间。

📺 tvOS 26.2（4.9 GB）

  • 说明：用于开发 Apple TV 应用。
  • 是否必选？
    ❌ 仅当你开发 tvOS 应用时才需要勾选

🕶️ visionOS 26.2（7.18 GB）

  • 说明：用于开发 Vision Pro（苹果头显）应用。
  • 是否必选？
    ❌ 仅当你开发 visionOS 应用时才需要勾选

🔧 建议勾选方案

✅ 通用开发者（Mac + iOS）
  • ✅ macOS 26.2
  • ✅ iOS 26.2

这是最常见的情况，适合大多数 App 开发者。

✅ 全平台开发者（含手表、电视、Vision Pro）
  • ✅ macOS 26.2
  • ✅ iOS 26.2
  • ✅ watchOS 26.2
  • ✅ tvOS 26.2
  • ✅ visionOS 26.2

适用于希望覆盖所有苹果设备的开发者。

✅ 仅 Mac 桌面应用开发者
  • ✅ macOS 26.2
    （其他可不勾选）

💡 小贴士：

  • 安装后，你可以通过 Xcode → Preferences → Components 来后续添加或移除这些组件。
  • 所有组件都比较大，建议预留至少 30GB 的磁盘空间。
  • “Required system components will also be installed.” 表示会自动安装必要的系统依赖项。

✅ 总结：推荐勾选

✅ macOS 26.2 + ✅ iOS 26.2
其他根据具体项目需求决定。

如果你只是开始学习开发，建议先只勾选这两个，之后再按需添加。

image.png

6. 安装xcode命令行工具

image.png

7.安装CocoaPods

由于CocoaPods使用Ruby语言写的,所以首先确保mac电脑上已经安装了Ruby。通常情况下，mac已经预装了ruby，下面验证一下，打开终端，输入ruby -v

image.png

如图所示，mac已经预装了ruby，但是版本比较低，下面我们来用homebrew去下载一个新版本的ruby

brew install ruby

让Homebrew安装的Ruby成为主版本（macOS自带了一个 Ruby（通常在 /usr/bin/ruby），为了避免冲突，Homebrew 不自动覆盖它。所以你现在装的是“独立版”Ruby，不会影响系统自带的那个。这是安全设计，避免破坏系统。但你要手动设置才能优先使用 Homebrew 版本）

运行以下命令，优先使用我们自己安装的ruby

echo 'export PATH="/opt/homebrew/opt/ruby/bin:$PATH"' >> ~/.zshrc

重新加载配置

source ~/.zshrc

验证是否成功

which ruby # 应该返回: /opt/homebrew/opt/ruby/bin/ruby

image.png

验证是否成功安装gem

gem -v

image.png

安装cocoapods

gem install cocoapods

安装完之后，输入pod -v提示comomand not found，这时需要先找到cocoapods的可执行路径

输入gem environment,这会列出ruby的gem环境，包括安装路径、缓存路径等信息。

image.png

上面的输出中，特别需要留意的是EXECUTABLE DIRECTORY(可执行文件路径): /opt/homebrew/lib/ruby/gems/4.0.0/bin

接下来要做的就是把这个cocoapods的可执行文件路径加入到环境变量PATH中,就可以在终端中全局使用pod命令了。

步骤 1: 打开你的终端配置文件

如果你使用的是 Zsh（macOS Catalina 及更高版本默认使用 Zsh）：

nano ~/.zshrc 【我的mac proM5系列用的是这个】

如果你使用的是 Bash（较旧版本的 macOS 默认使用 Bash）：

nano ~/.bash_profile

步骤 2: 添加路径到 PATH 环境变量

在配置文件的末尾，添加以下内容：

export PATH="/opt/homebrew/lib/ruby/gems/4.0.0/bin:$PATH"

这个命令会将 CocoaPods 的安装目录添加到 PATH 中，并确保你的系统可以找到 pod 命令。

步骤 3: 保存并退出编辑器

在 nano 编辑器中，按下以下键保存并退出：

  • 按 Ctrl + O 保存文件
  • 按 Enter 确认保存
  • 按 Ctrl + X 退出编辑器

步骤 4: 重新加载配置文件

在终端中输入以下命令重新加载配置文件，使改动生效：

  • 对于 Zsh：

source ~/.zshrc 【我的mac proM5系列用的是这个】

  • 对于 Bash：

source ~/.bash_profile

步骤 5: 确认 pod 命令是否可用

执行以下命令来确认 pod 是否已经可以正常使用：

pod --version

如果一切正常，应该能够看到 CocoaPods 的版本信息，表示 pod 命令已经在 PATH 中，可以正常使用了。

image.png

安装JDK,使用JDK17的版本

在mac命令行中输入以下命令：

brew install --cask zulu@17

image.png

安装jdk成功之后，查找安装路径，输入以下命令：

brew info --cask zulu@17

image.png

打开jdk所在的目录

open /opt/homebrew/Caskroom/zulu@17/17.0.18,17.64.15

双击jdk安装包，安装即可！ image.png

查看jdk版本

image.png

安装android studio

image.png

image.png

进入安装向导

步骤一：

image.png

步骤二：

image.png

步骤三： 接受所有带星号的许可证（带红星的都要点击接受才行，否则无法点击next）

image.png

第一次安装android sdk的时候失败了，解决方法是配置国内镜像代理

img_v3_02ug_a7ee2c90-f246-41f7-a561-582f79012bdg.jpg

以下镜像选一个即可，我用的是华为镜像

华为镜像：developer.huawei.com/repo/

豆瓣镜像：mirrors.douban.com/android/sdk…

腾讯： mirrors.cloud.tencent.com/AndroidSDK/

阿里： mirrors.aliyun.com/android.goo…

打开android studio的settings，具体配置路径页面如下： image.png

镜像配置测试连接成功之后，就可以重新下载android sdk了，只需要退出android studio，再重新打开，它就会自动下载sdk，注意new project的时候可能还是会报错

配置android sdk的环境变量

打开mac终端，输入命令：

vim ~/.zshrc

在最底下加上

# Android SDK
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

重新加载配置

source ~/.zshrc

输入以下命令，若有东西出来，则android sdk已经安装好了

adb --version

创建安卓模拟器

img_v3_02ue_c83d1b99-eabb-4e1a-a6f8-8d0eccf2694g.jpg

img_v3_02ue_6eac6a98-b0cf-4dc9-834c-48c16a31041g.jpg

img_v3_02ue_84c4b4a1-0633-4d0d-85ef-6437af9c010g.jpg

点击finish，下载安卓模拟器的过程中报错了 img_v3_02ue_2de4ccbb-a2d0-4c4a-9e89-fdf5e869b20g.jpg

报错多半都是因为网络的原因，如果此时直接重新下载是不能成功的，因为文件在下载过程中已经损坏,应该要先删除当前下载的文件,然后再重新从SDK管理器中下载Google Play Intelx86_64 Atom System Image。以下是操作截图:

img_v3_02ug_ad4384e2-1823-4c30-8b7a-09994f93311g.jpg

删除了之前下载的损坏文件之后，再来重新下载，就会成功创建好android模拟器了

img_v3_02ug_19dbced1-49dd-4859-ab02-93af1ab43edg.jpg

点击启动android模拟器的图标

img_v3_02ug_8bff8f5a-fa04-4a31-a623-e99c9953353g.jpg

android模拟器就启动了

img_v3_02ug_eb84ba36-a888-4bb9-b96a-2a7f34fe787g.jpg

命令行里，运行：

adb devices

可以看到android模拟器已经被检测到了：

img_v3_02ug_88d7fdeb-746b-4ae1-b97e-c1814fec857g.jpg

创建项目

创建项目之前，先在/Users/heyinglin/目录下新建projects文件夹，下面放我们的项目

mkdir projects

创建RN项目

npm create-expo-app@latest

进入项目根目录

cd rn-demo

启动项目

npx expo start

按下i键，启动IOS模拟器（启动过程中，会安装一个expo go在模拟器上）

按下a键，启动android模拟器（启动过程中，会安装一个expo go在模拟器上）

avatar
文章
阅读
粉丝