React Native iOS环境搭建

开发者福利!热门AI工具限时免费用 购周边即赠Coding Plan Lite,Claude Code、Cursor等20+工具畅享,效率翻倍! 阅读详情

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和npm。npm用于nodejs包依赖管理的工具。
3. 安装watchman
watchman是用于监听文件变化的工具,应该是用于监听文件变化,然后界面做出响应。执行如下命令:

brew install watchman

4. 安装flow
flow我个人理解的是用于静态分析js语法错误的工具,能够更早的js的语法错误。执行如下的命令:

brew install flow

到这里基本的环境就配置好了,下面创建一个iOS的例子,在终端中将目录切换到你保存工程的目录,然后执行如下的命令:

$ npm install -g react-native-cli   
$ react-native init AwesomeProject     
$ cd AwesomeProject/      

第二个命令第一次执行会执行很长时间,因为需要安装许多东西。然后再终端输入如下命令打开工程:

open ios/AwesomeProject.xcodeproj

这样就打开了iOS的工程,运行一下就能看到模拟器中的界面。
下面试着修改index.ios.js中的文本,然后在模拟器上按Cmd+R,这样能够看到修改马上就呈现到模拟器上了。

尝鲜就到此为止了,以后还得努力学习React Native,期待以后的文章吧。

React Native 环境搭建——IOS环境 React Native 环境搭建 阅读详情

相关推荐

新版React Native 混合开发(iOS篇)

React Native的应用场景中,有时候一个APP只有部分页面是由React Native实现的,比如:我们常用的携程App,它的首页下的很多模块都是由React Native实现的,这种开发模式被称为混合开发。 混合开发的一些其他应用场景: 在原有项目中加入RN页面,在RN项目中加入原生页面 原生页面中嵌入RN模块 RN页面中嵌入原生模块 Native UI Components 以上这些都属于React Native混合开发的范畴,那么如何进行React Native混合开发

大灰狼的小绵羊哥哥的博客 5573

一篇文章教会你如何在IOS真机上完美运行React Native

指导读者如何在iOS真机上运行React Native应用,并且包含您在这个过程中遇到的问题及其解决方案。

qq_45430571的博客 5844

React-Native环境搭建IOS

React-Native开发环境搭建,有相关的技术文档,里面详细的记录了环境搭建的方方面面。但是我个人觉得,还是有相当一部分,写的并不是很细节,比如安装某一个包,到底需要等待多长时间,有没有更好的替代方案,在官方文档中,依然介绍的不是很清楚。本文旨在针对官方文档的一些细节,进行补充,建议官方文档和本文章结合着阅读,可能效果会更好。

mapbar_front的博客 3341

React Native环境搭建ios环境搭建

按照React Native官网的环境搭建过程,我们启动项目后总会遇到很多奇奇怪怪的环境问题。通过几天的折腾,终于完美地将React Native项目给启动了起来。以下是我通过mac(catalina 10.15.7)搭建React Native环境的过程,m1的mac不作为参考。大家按照以下步骤进行搭建后可能会遇到不同的问题,可以通过评论留言,共同解决。 环境搭建分为两个部分,分别是ios环境搭建和android环境搭建,由于篇幅过长,所以分为了两个部分,以下是ios环境搭建过程。 1.安装cocoap

weixin_50096821的博客 3518

react-native ios2020开发环境搭建

自学react-native搭建ios环境踩了不少坑,仅供参考。。。 1.安装brew /bin/zsh -c “$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)” 2.安装node brew install node npx nrm use taobao (可选切换淘宝源,快) 3.安装yarn (高级版npm) npm install -g yarn 4.安装cocoapods (ios依赖库) brew

weixin_43903134的博客 333

React Native 搭建iOS与Android开发环境

配置React Native开发环境(Mac) 核心步骤: 安装Xcode和Android Studio(优先进行,耗时较长) 通过Homebrew安装必要工具链: Node.js(建议v20.19.2) Watchman(文件监控) Ruby/CocoaPods(iOS依赖管理) JDK(Android编译环境环境配置要点: 切换Homebrew国内源加速下载 配置Ruby和CocoaPods路径 更新Git版本并设置SSH 常见问题处理: Xcode路径指向修正 iOS模拟器创建 网络卡顿解决方案

鹤渺的星球 1544

在 mac 上搭建 react native ios 环境

参考 react-native 的开发环境搭建 其中有几点需要注意 如果安装 watchman 时报错,则按报错提示进行处理然后重新 brew install watchman 即可 如果有翻墙则无需对 npm 映射到 cnpm 操作。 yarn 只是 Facebook 对 npm 的一个替代工具,自行考虑是否安装使用 Xcode 可直接在 App Store 或者官网上下载安装 使用 r...

iceberg_Yao's Blog 338

react native环境搭建for iOS

React Native iOS环境搭建 前段时间React Native for Android发布,感觉React Native会越来越多的公司开始研究、使用。所以周六也抽空搭建iOS的开发环境,以便以后利用空闲的时间能够学习一下。 废话不多说了,下面简单的列出步骤吧。  1. 安装Homebrew  Homebrew主要用于安装后面需要安装的watchman、flow 

柯木琴子 868

iOS React Native 环境搭建

react native 的官网:http://reactnative.cn/docs/0.47/getting-started.html#content --iOS如何搭建mac版的环境 1.配置环境要求 OSX:目前只有OSX中能够安装使用iOS的开发环境,并且Xcode也只能运行在Mac上 推荐你用 Homebrew来安装node、watchman和flow 1...

weixin_30807779的博客 67

react-native mac-ios环境搭建

react-native 环境搭建踩坑

qq_38652603的博客 459

React Native iOS环境搭建 高级版

React Native iOS环境搭建 前段时间React Native for Android发布,感觉React Native会越来越多的公司开始研究、使用。所以也抽空搭建iOS的开发环境,以便以后利用空闲的时间能够学习一下。  废话不多说了,下面简单的列出步骤吧。  1. 安装Homebrew  Homebrew主要用于安装后面需要安装的watchman、flow  打

iOS学堂 965

React Native iOS 环境搭建

RN 要进行 iOS 应用开发,只能在 Mac 环境(Windows 不行)。所以,以下安装步骤,都是在 Mac 中进行的。 watchman Watchman 是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)。 brew install watchman 没有 brew 的同学,可以先安装 brew XcodeReact Native 目前需要Xcode 10 或更高版本。你可以通过 App St

weixin_50983325的博客 583

React Native跨平台开发:如何快速搭建iOS和Android开发环境

React Native是Facebook推出的跨平台移动应用开发框架,它允许开发者使用JavaScript和React来构建原生移动应用。本文将为你提供完整的React Native开发环境搭建指南,帮助你在MacOS系统上快速配置iOS和Android开发环境,开启移动应用开发之旅。 ## 🚀 为什么选择React NativeReact Native让开发者能够使用相同的代码库为i

gitblog_00918的博客 1090

在 Windows 上搭建 React Native IOS 开发环境

在 windows 上开发 React Native IOS App 一定需要 Mac OS X 操作系统吗?答案几乎是肯定的,下面这是 2016 年的答案,时隔两年过去了依然没有什么好的解决方案。 create-react-native-app + Expo 倒是可以不需要 OS X 操作系统,但是需要一个 iPhone,我依然没有。即使有,这种方式也不适合用来开发。 所以,在 Windows ...

weixin_33749242的博客 2083

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

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开发工具x...

小小T的专栏 575

MacOS下搭建开发环境React Native 目标平台ios

官网: https://reactnative.cn/docs/getting-started 开发平台: macOS 目标平台: iOS 安装依赖 必须安装的依赖有:Node、Watchman、Xcode和CocoaPods。 虽然你可以使用任何编辑器来开发应用(编写 js 代码),但你仍然必须安装 Xcode 来获得编译 iOS 应用所需的工具和环境 推荐使用Homebrew来安装 Node和...

十二的博客 492
上一篇: 关于Alamofire Manager单例的思考
下一篇: Hexo结合Github-Pages搭建静态博客
孟祥月
博客等级 码龄16年 645粉丝 239原创
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值