React Native iOS环境搭建

最新推荐文章于 2025-09-19 04:13:32 发布
原创 最新推荐文章于 2025-09-19 04:13:32 发布 · 1.3w 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#React

本文介绍了如何在Mac上搭建React Native的iOS开发环境，包括安装Homebrew、nvm、nodejs、watchman和flow，最后创建并运行一个iOS示例项目。

React Native iOS环境搭建

前段时间React Native for Android发布，感觉React Native会越来越多的公司开始研究、使用。所以周六也抽空搭建了iOS的开发环境，以便以后利用空闲的时间能够学习一下。

废话不多说了，下面简单的列出步骤吧。
1. 安装Homebrew
Homebrew主要用于安装后面需要安装的watchman、flow
打开MAC的终端，输入如下命令：

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. 安装nvm和nodejs
nvm是用于nodejs版本管理的工具，用于安装nodejs。
对于nvm应该可以使用brew直接安装，但是我没有用这个安装，读者可以自己使用如下命令试试：

brew install nvm

我使用的另一种方式，在终端中输入如下的命令：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.26.1/install.sh | bash

这个命令按照官方的说明，应该会自动配置好环境，能够在任何的终端中使用nvm命令，但是我安装完了事不可以的。需要做额外的工作，需要在~/.bashrc, ~/.profile, ~/.zshrc文件中（如果没有自己创建），添加如下的一行语句：

. ~/.nvm/nvm.sh

这样就能够在任意的终端中使用nvm命令了。
然后执行如下的命令：

nvm install node && nvm alias default node

这个用于安装nodejs

最低0.47元/天 解锁文章
React Native 基本知识及环境搭建
渡西湖
06-23 2059
草稿
最新！MacOS react-native 双平台开发环境配置（Android+ios）
像树的博客
03-20 379
前提： node（必备） watchman是由Facebook提供的监视文件系统变更的工具，安装此工具可以提高开发时的性能 没有Homebrew则先安装Homebrew brew install node brew install watchman yarn是Facebook提供的替代npm的工具，可以加速node模块的下载，安装yarn之后，就可以勇yarn来代替npm npm install...
在Windows系统上调试与发布react-native 开发的IOS系统的全过程
12-29
在Windows系统上调试与发布react-native 开发的IOS系统的全过程
React Native桌面端开发：使用React Native for Windows/macOS
最新发布
gitblog_00046的博客
09-19 817
你是否还在为构建跨平台应用而烦恼？既要维护iOS和Android两个平台的代码，又要兼顾Windows和macOS桌面端？现在，React Native为你提供了一站式解决方案。通过React Native for Windows和React Native for macOS扩展，开发者可以使用JavaScript和React的强大功能，构建同时运行在移动设备和桌面平台的原生应用。本文将详细介绍如...
React-Native入门指导之iOS篇 —— 一、准备工作
weixin_33853794的博客
12-07 630
React-Native 入门指导系列教程目录 一、准备工作 (已完成) 二、项目介绍与调试 三、CSS样式与Flex布局 四、常用UI控件的使用 五、JSX在React-Native中的应用 六、事件与数据调用 七、自定义组件 八、动手写实例 九、发布与真机调试   写在前面 1. 什么是React-Native？ 　　 　　React-Native是：Faceboo...
React Native iOS环境搭建（ios自学笔记）
wangyang6275的博客
11-27 1244
React Native iOS环境搭建 前段时间React Native for Android发布，感觉React Native会越来越多的公司开始研究、使用。所以周六也抽空搭建了iOS的开发环境，以便以后利用空闲的时间能够学习一下。 废话不多说了，下面简单的列出步骤吧。  1. 安装Homebrew  Homebrew主要用于安装后面需要安装的watchman、flow
react native windows 环境搭建
06-07
### React Native for Windows 开发环境搭建指南 #### 一、概述 React Native 是 Facebook 推出的一款用于构建原生移动应用的框架，它允许开发者使用 JavaScript 和 React 构建 iOS 和 Android 应用。本文档将详细...
React Native 环境搭建的教程
08-29
在本篇文章中，我们详细介绍了 React Native 环境搭建的教程，包括环境搭建、创建应用、package.json 文件、iOS 和 Android 目录、初次运行和启动过程。希望这篇文章能够对大家的学习有所帮助。
React Native开发环境搭建，VS Code运行项目步骤详解
Zh.快乐的程序猿的博客
03-23 2655
React Native开发环境搭建，VS Code运行项目步骤详解
React-Native环境搭建（IOS）
mapbar_front的博客
12-21 2986
React-Native开发环境的搭建，有相关的技术文档，里面详细的记录了环境搭建的方方面面。但是我个人觉得，还是有相当一部分，写的并不是很细节，比如安装某一个包，到底需要等待多长时间，有没有更好的替代方案，在官方文档中，依然介绍的不是很清楚。本文旨在针对官方文档的一些细节，进行补充，建议官方文档和本文章结合着阅读，可能效果会更好。
iOS-搭建 React Native 开发环境
MinggeQingchun的博客
06-13 1075
一、ReactNative简介ReactNative是移动端目前最热的框架之一, 着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。(Learn once, write anywhere)。Facebook 已经在多项产品中使用了React Native，并且将持续地投入建设React Native。React Native 可以通过更新远端JS，直接更新app, 用 JavaSc...
React Native 环境搭建——IOS环境
qq_58151324的博客
07-04 2040
React Native 环境搭建
《React Native》Mac IOS开发环境搭建
SemperChan的博客
07-31 719
  1、安装Xcode 在AppStore搜索安装Xcode，安装完成后打开Xcode自动初始化。   2、安装Nodejs 在node官网下载node，下载完后默认安装即可，点击前往下载node   3、安装Java 在Java官网下载Java，下载完后默认安装即可，点击前往下载Java 点击同意然后下载安装。   4、安装WebStorm 在WebStorm官网...
【React Native】ios开发的基础环境搭建 - 踩坑记录
qq_54255845的博客
04-08 459
解决方法：一般这种报错是会给出本地路径下的某个文件，按照路径删除指定文件即可，由于系统文件的目录大部分是隐藏的（如User/Library），可以通过如下方法打开：Finder - go - go to folder…下载最新版本以外的其他版本，我就是这么做，然后ios simulator跑不起来。安装rbenv - 在安装ruby之前，需要先安装它的包管理工具，我选择的是rbenv。，有网络问题报错，可以先将git文件在chrome中打开，再次执行。查看版本，如果能查到的话，就是安装成功了。
React Native环境搭建：ios环境搭建
weixin_50096821的博客
03-09 3442
按照React Native官网的环境搭建过程，我们启动项目后总会遇到很多奇奇怪怪的环境问题。通过几天的折腾，终于完美地将React Native项目给启动了起来。以下是我通过mac（catalina 10.15.7）搭建React Native环境的过程，m1的mac不作为参考。大家按照以下步骤进行搭建后可能会遇到不同的问题，可以通过评论留言，共同解决。 环境搭建分为两个部分，分别是ios环境搭建和android环境搭建，由于篇幅过长，所以分为了两个部分，以下是ios环境搭建过程。 1.安装cocoap
React Native iOS 开发环境搭建
Spencer Yang的博客
01-21 976
一、React Native基础环境搭建1、安装Homebrew打开终端输入：ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"2、安装nvm方法通过脚本安装方式，在终端执行：curl -o- https://raw.githubusercontent.com/creati
React-Native环境搭建-Mac
whyguoguo
08-05 524
Node安装 首先，作为前端开发者，Node 环境肯定都是已经安装好了的。建议使用nvm管理，并且设置淘宝镜像，建议使用 v8.0以上版本。哈哈，废话不多说。 NVM下载：https://github.com/coreybutler/nvm-windows/releases Watchman brew install watchman React-Native环境搭建 Yarn、Rea...
Mac系统下React Native环境搭建
weixin_30376323的博客
12-21 490
　　这里记录一下在Mac系统下搭建React Native开发环境的过程： 　　1. 安装HomeBrew: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 　　安装完后如下所示： 　　\ 　　可使用命令：”brew -v“查...
react native ios怎么搭建
08-01
### React Native 在 iOS 平台上的开发环境搭建 要在 iOS 平台上搭建 React Native 的开发环境，需要完成一系列步骤，包括安装必要的工具链和依赖项，确保开发环境能够支持 iOS 应用的构建和调试。 #### 安装 Homebrew Homebrew 是 macOS 上的包管理工具，可以简化其他工具的安装过程。通过终端执行以下命令来安装 Homebrew： ```bash /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" ``` 安装完成后，可以通过 `brew --version` 命令验证安装是否成功[^2]。 #### 安装 Xcode Xcode 是苹果官方提供的集成开发环境（IDE），用于开发 iOS 和 macOS 应用。通过 Mac App Store 下载并安装 Xcode，安装完成后还需要安装 Xcode 命令行工具： ```bash xcode-select --install ``` 此外，确保 Xcode 已经接受许可协议，并且命令行工具路径正确设置： ```bash sudo xcodebuild -license sudo xcode-select -s /Applications/Xcode.app ``` 这些步骤确保了 Xcode 能够正常运行，并为后续的构建过程提供支持[^2]。 #### 安装 Node.js Node.js 是运行 React Native 开发工具的基础。推荐使用 Node.js 的版本管理工具 `nvm`（Node Version Manager）来安装 Node.js： ```bash curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash ``` 安装完成后，重新加载终端配置文件，并安装 Node.js： ```bash export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" nvm install node ``` 验证 Node.js 是否安装成功： ```bash node -v ``` Node.js 的安装为后续的 React Native CLI 工具提供了运行环境。 #### 安装 Watchman Watchman 是由 Facebook 开发的文件监视工具，React Native 使用它来监控文件系统的变化。使用 Homebrew 安装 Watchman： ```bash brew install watchman ``` 验证安装是否成功： ```bash watchman --version ``` Watchman 的安装确保了 React Native 能够实时监控文件变化，并在需要时重新编译应用。 #### 安装 CocoaPods CocoaPods 是 iOS 平台上的依赖管理工具，React Native 的 iOS 项目依赖于它来管理第三方库。使用 Ruby 安装 CocoaPods： ```bash sudo gem install cocoapods ``` 验证安装是否成功： ```bash pod --version ``` 安装完成后，进入 React Native 项目的 `ios` 目录并运行以下命令来安装依赖： ```bash cd ios pod install cd .. ``` CocoaPods 的安装和使用确保了 React Native 项目的 iOS 部分能够正确集成所需的第三方库[^2]。 #### 初始化项目 使用 React Native CLI 工具初始化项目： ```bash npx react-native init MyProject ``` 进入项目目录并启动开发服务器： ```bash cd MyProject npx react-native start ``` 在另一个终端窗口中运行以下命令来启动 iOS 模拟器并运行应用： ```bash npx react-native run-ios ``` 这些步骤完成了 React Native 项目的初始化，并确保应用能够在 iOS 模拟器上运行。 ###
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值