React-Native环境搭建(IOS)

news/2024/7/20 21:12:43 标签: ios, react native, 前端框架

系列文章目录

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

目录

  • 系列文章目录
  • 前言
  • 一、IOS环境搭建前置说明
  • 二、环境搭建步骤
    • 1.Homebrew安装
    • 2.安装Xcode
    • 3.Node
    • 4.watchman
    • 5.CocoaPods
  • 三、项目启动
    • 1.初始化项目
    • 2.项目启动
  • 总结

前言

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安装命令如下,但是我不建议直接安装,对于国内用户,会有一些问题。

/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安装:

brew install node@16

tips:使用brew install下载包,可能会比较慢。甚至我们可以经常性的看到,某个包下载中断了。
原因:在使用brew install 和brew update非常慢的原因是软件源在国外,github本身在国内,是限流的。
解决方案参考:https://www.cnblogs.com/ALINGMAOMAO/p/14426689.html

4.watchman

brew install watchman

5.CocoaPods

brew install cocoapods

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

三、项目启动

1.初始化项目

npx react-native@latest init AwesomeProject

其中,AwesomeProject为项目名称。

2.项目启动

yarn ios

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

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

在这里插入图片描述

总结

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

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

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

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


http://www.niftyadmin.cn/n/5278851.html

相关文章

node-red:使用node-red-contrib-amqp节点,实现与RabbitMQ服务器(AMQP)的消息传递

node-red-contrib-amqp节点使用 一、简介1.1 什么是AMQP协议?1.2 什么是RabbitMQ? -> 开源的AMQP协议实现1.3 RabbitMQ的WEB管理界面介绍1.3 如何实现RabbitMQ的数据采集? -> node-red 二、node-red-contrib-amqp节点安装与使用教程2.1 节点安装2.2 节点使用2.2.1 amq…

案例125:基于微信小程序的个人健康数据管理系统的设计与实现

文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序…

腾讯云发布升级版金融音视频解决方案,提供全新架构、安全和特性

远程银行、视频尽调、全媒体客服、路演直播……近年来,音视频技术支撑下的非接触式金融服务,成为了金融机构数字化转型和探索服务创新的重要方向。 12月21日,腾讯云正式发布升级版金融级音视频解决方案。新方案在架构、安全和特性上进行全面…

Hive-基础介绍

文章目录 前言一、HiveQL介绍1. 概述2. 数据模型3. 数据定义语言(DDL)(1) 创建表(2) 创建分区表(3) 添加分区(4) 删除表 4. 数据操作语言(DML)(1) 插入数据(2) 查询数据(3) 更新数据(4) 删除数据 二、HiveQL函数1. 字符串函数1.1 …

web前端javaScript笔记——(5)原型对象和垃圾回收

原型对象 原型对象prototype 我们所创建的每一个函数,机械其都会向函数中添加一个属性prototype 这个属性对应着一个对象,这个对象就是我们所谓的原型对象 function Person(){} console.log(Person.prototype);//Object 如果函数作为普通函数调用pr…

【HTML5】HTML5 语音合成

一、前言 前一段时间在项目中需要用到播报文字语音。找到了 HTML 5 有这样的功能。 现在有时间进行总结下。 二、SpeechSynthesis SpeechSynthesis 接口是语音服务的控制接口。它可以用于获取设备上关于可用的合成声音的信息, 开始、暂停语音,或者别…

acwing linux 基础课第六讲 thrift

文章目录 1.thrift是什么? 2.thrift通信的3个步骤 3.本课作业 这节课讲解thrift thrift是什么? thrift是一个跨语言的RPC(Remote Procedure Call)框架,用于远程通信。 通常来说,一个应用系统&#xff…

2023 年人工智能研究与技术排名前 10 的国家

人工智能研究是一项全球性的工作。虽然美国和中国因其对人工智能的贡献而备受关注,但事实是,世界各国都在涉足这项技术,尝试新的突破,并吸引投资者的关注。 斯坦福大学的《2023年人工智能报告》估计,到 2022 年&#…