Mac平台搭建React Native iOS开发环境

本文详细介绍了如何在Mac环境下从零开始搭建React Native开发环境,包括安装Node.js、React Native CLI、Xcode等必要工具,更换npm镜像,初始化及运行RN项目,以及常见问题的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、安装node.js

下载node.js安装包进行安装 https://nodejs.org/zh-cn/
命令行查看Node js版本:npm –v,出现版本号说明安装成功

2、 安装React Native命令行工具

命令行下输入:sudonpm install -g react-native-cli
安装成功后,可以通过react-native –h来查看帮助
在这里插入图片描述

3、 安装ios开发工具xcode

在AppStore搜索安装xcode

4、 更换npm镜像为淘宝镜像

查看镜像源
npmconfig get registry

更换为taobao源
npmconfig set registry https://registry.npm.taobao.org --global
npmconfig set disturl https://npm.taobao.org/dist --global

更换为官方镜像源
npmconfig set registry https://registry.npmjs.org/

5、 初始化rn项目

react-native init FirstApp
在这里插入图片描述

6、 运行rn项目

切换到项目根目录FirstApp下,输入react-native run-ios运行,会自动对项目进行编译,启动一个默认的ios模拟器,并启动一个包管理服务器(为了向rn应用来同步代码)。
在这里插入图片描述
附:指定项目运行的模拟器或真机
需要安装软件
sudo npm install -g ios-deploy
报错了,用下面命令
sudo npm install -g ios-deploy --unsafe-perm=true
运行到真机
react-native run-ios --device “6s test iphone”
运行到模拟器
react-native run-ios --simulator “6s test iphone”
报错No matching provisioning profiles found
还需要在xcode下设置登录信息
在这里插入图片描述
好了,真机下运行成功

7、 运行报错

Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module ./../react-transform-hmr/lib/index.js from /Users/sidashidai/Desktop/rn/FirstApp/App.js: The module ./../react-transform-hmr/lib/index.js could not be found from /Users/sidashidai/Desktop/rn/FirstApp/App.js. Indeed, none of these files exist:
在这里插入图片描述
在这里插入图片描述

解决参考http://www.imooc.com/qadetail/289035
关掉你的cmd窗口(其他的内置命令行同理)
mac 下操作
# Clean cache
rm -rf $TMPDIR/react-;
rm -rf $TMPDIR/haste-
;
rm -rf $TMPDIR/metro-*;
watchman watch-del-all(无效)
# Start Metro Bundler directly
react-native start
# 重新打开一个命令行窗口
react-native run-ios
window 下操作
# Clean cache
react-native start --reset-cache
# new cmd tab重新打开一个命令行窗口
react-native run-android
发现有其他坑的,建议去gayhub去找,还是那里最靠谱。

8、 运行成功,比window下环境搭建错误少

在这里插入图片描述

9、接下来,用xcode运行rn项目

进入项目根目录-ios-.xcodeproj,双击用Xcode打开
在这里插入图片描述
点击运行按钮,编译运行成功。
在这里插入图片描述

### 如何在iOS配置React Native开发环境 #### Homebrew安装 为了顺利搭建React NativeiOS开发环境,首先需要确认操作系统为Mac OS,并且拥有Xcode作为主要工具来编译和调试iOS应用。对于依赖管理以及一些必要的软件包安装,则可以通过Homebrew完成。通过终端输入特定命令可以实现Homebrew的安装: ```bash /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" ``` 此过程将会把Homebrew加入到系统的路径中以便后续调用[^1]。 #### 基础环境设置 基础环境中包含了几个重要的组件:Yarn、Node.js、Watchman 和 JDK。这些都可以借助于Homebrew来进行便捷地安装。具体操作如下所示: - Yarn 是 JavaScript 的包管理和构建工具; - Node.js 是运行时环境,用于执行服务器端JavaScript代码; - Watchman 可以监视文件系统变化并触发相应的动作,在大型项目里能提高效率; - Java Development Kit (JDK),虽然不是直接关联的技术栈成员,但在某些场景下可能是必需品。 ```bash brew install yarn brew install node brew install watchman brew tap AdoptOpenJDK/openjdk brew install --cask adoptopenjdk8 ``` 以上命令分别完成了上述提到的各项技术栈的基础环境部署工作[^3]。 #### 安装React Native CLI 全局范围内安装`react-native-cli`可以让开发者更方便地创建新项目或是处理现有项目的各种需求。这一步骤同样简单明了: ```bash npm install -g react-native-cli ``` 这条指令会让NPM(Node Package Manager)帮助我们在全球范围内安装最新版的CLI工具[^4]。 #### Xcode Command Line Tools验证 最后但同样重要的是确保已经安装了Xcode及其附带的命令行工具。如果尚未安装或更新至最新版本的话,可以在App Store下载它;而对于命令行工具部分来说,只需要打开终端并尝试任意一条涉及gcc或其他编译器相关联的操作就会自动提示是否同意安装它们了。也可以手动检查其状态: ```bash xcode-select --install ``` 当弹出窗口询问是否安装额外资源的时候,请点击“Install”。这样就完成了整个iOS平台下的React Native开发环境准备工作[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值