React-Native环境搭建(IOS)

系列文章目录

  1. React-Native环境搭建(IOS)

目录

前言

React-Native开发环境的搭建,有相关的技术文档,里面详细的记录了环境搭建的方方面面。但是我个人觉得,还是有相当一部分,写的并不是很细节,比如安装某一个包,到底需要等待多长时间,有没有更好的替代方案,在官方文档中,依然介绍的不是很清楚。

本文旨在针对官方文档的一些细节,进行补充,建议官方文档和本文章结合着阅读,可能效果会更好。

一、IOS环境搭建前置说明

  1. 我们需要明白,react-native环境的搭建,ios和安卓,是完全不同的。针对ios,我们的环境是mac系统,也就是你必须是苹果电脑,才有可能搭建IOS的开发环境。
  2. 我们需要知道,ios环境的搭建,核心是围绕着xcode进行的,因为ios代码的调试,运行,都是在xcode上面进行的。
  3. 我们搭建ios环境,肯定是针对某一个版本的react-native进行的,不同版本的react-native,所需要的开发环境,是不一致的。本文的环境搭建,是以最新的react-native@0.72版本进行的。

二、环境搭建步骤

1.Homebrew安装

Homebrew是一款Mac OS的软件管理工具(就像app商店一样),用户可以安装,卸载,更新等功能。使用指令,就可以安装包,不用考虑各种依赖。
Homebrew是我们安装其他所需要的软件的基础工具,这个软件不安装好,其他的大多数依赖的东西,都没法下载。

Homebrew安装命令如下,但是我不建议直接安装,对于国内用户,会有一些问题。

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

问题1,国内用户必须要有翻墙工具,提供比较稳点的下载链接,才能真正的把HomeBrew安装好。

问题2,HomeBrew这个包,很大,他需要用户等待极长的时间,所以说,国内用户,最好不要用这个命令。

我们应该用阿里源,进行HomeBrew的安装。参考文档:https://developer.aliyun.com/mirror/homebrew

HomeBrew必须安装完成,如果安装一半报错,继续重新安装。这个阶段,如果网速慢,等待几个小时是很正常的。

2.安装Xcode

为什么我的文档在这里,先是安装Xcode呢?因为Xcode的安装,不依赖任何东西,你只需要在AppStore中,安安稳稳的下载就行。不过Xcode比较大,需要一点时间,耐心等待即可。

其实步骤1和步骤2,是可以同步进行的,因为他们之间,并没有什么联系。

3.Node

一般前端,本地就有node包,所以一般情况,不需要二次安装。但是请切记,node的版本,一定要大于16,这是react-native0.72 的版本,要求如此。

如果没有node,可以通过HomeBrew安装:

bash 复制代码
brew install node@16

tips:使用brew install下载包,可能会比较慢。甚至我们可以经常性的看到,某个包下载中断了。

原因:在使用brew install 和brew update非常慢的原因是软件源在国外,github本身在国内,是限流的。

解决方案参考:https://www.cnblogs.com/ALINGMAOMAO/p/14426689.html

4.watchman

bash 复制代码
brew install watchman

5.CocoaPods

bash 复制代码
brew install cocoapods

如果到这里,所有的包,都能按照所预期的装完,那么环境搭建的一半工作,已经完成了。

三、项目启动

1.初始化项目

bash 复制代码
npx react-native@latest init AwesomeProject

其中,AwesomeProject为项目名称。

2.项目启动

bash 复制代码
yarn ios

这一步,也是挺难受的,主要是如果第一次启动该项目,ios会在ios目录下,执行pod install,下载一些ios项目相关的一些依赖包,下载过程异常缓慢,需要极长的等待时间。

等ios项目启动之后,会展示如官网的以下页面。

总结

IOS环境搭建,个人认为,主要有三个节点比较恶心。

第一、安装HomeBrew,如果没有翻墙工具,会非常非常的慢,如果启用国内源,有些源也不一定能够安装成功,建议还是使用阿里的源。这一步需要等待很长时间,

第二、brew install 命令的执行问题,有可能会下载很慢,其实更改国内源,也很慢。可能也需要等待很长时间。

第三、初次启动IOS,Cocoapads内部会执行pod install,也是一个非常长的过程。

相关推荐
Rysxt_4 小时前
React vs Vue.js:2025年两大主流前端框架深度对比教程
vue.js·react.js·前端框架
by__csdn4 小时前
Vue vs React vs Angular:前端框架终极对决
前端·vue.js·react.js·前端框架·vue·react·angular
反正我还没长大4 小时前
Vue3响应式原理深度解析:揭秘现代前端框架的核心引擎
vue.js·前端框架·vue·proxy模式
炽3524 小时前
vue.js前端框架技术一课一得学习心得
前端框架
2501_926102864 小时前
深入浅出Vue.js前端框架设计:核心原理与实践指南
前端·vue.js·前端框架
STU学生网页设计4 小时前
大一学生作品《前端框架开发技术》 期末网页制作 HTML+CSS+JavaScript 个人主页网页设计实例
css·前端框架·html
烬羽11 小时前
上来就用 useState?你大概率用错了——useRef 的三种正确打开方式
react.js·前端框架·全栈
慧一居士12 小时前
Naive UI vs Element Plus全面对比
前端框架
光影少年13 小时前
RN的Fabric 渲染流程
运维·前端·javascript·react native·react.js·fabric
__zRainy__13 小时前
React开始:直接在网站中使用React.js
前端·react.js·前端框架