当前位置: 首页 > news >正文

React Native 环境配置(mac)

React Native 环境配置(mac)

  • 1.Homebrew
  • 2.Node.js、WatchMan
  • 3.Yarn
  • 4.Android环境配置
    • 1.安装JDK
    • 2.下载AndroidStudio
      • 1.国内配置 Http Proxy
      • 2.安装SDK
        • 1.首先配置sdk的路径
        • 2.SDK 下载
    • 3.创建模拟器
    • 4.配置 ANDROID_HOME 环境变量
  • 5.IOS环境
    • 1.升级ruby(ARM架构设备)
    • 2.安装cocoapods
      • 1.安装方式(选择其中一种)
        • 1.brew安装
        • 2.我们更换gem镜像地址
      • 2.安装cocoapods
      • 3.下载pod依赖
    • 3.下载Xcode
  • 6.开发工具

1.Homebrew

安装工具的工具brew ,如果是中国大陆, 请参考Homebrew国内源 , 如果网络足够好,可以尝试官网直接安装brew 官网。

在这里插入图片描述

2.Node.js、WatchMan

官方推荐使用Homebrew来安装 Node 和 Watchman。在命令行中执行下列命令安装(如安装较慢可以尝试阿里云的镜像源):

brew install node@16
brew install watchman

安装完 Node 后建议设置 npm 镜像(淘宝源)以加速后面的过程(或使用科学上网工具)。

npm config set registry https://registry.npmmirror.com/

注意:

1.强烈建议始终选择 Node 当前的 LTS (长期维护)版本,一般是偶数版本,不要选择偏实验性质的奇数版本。
2.不要使用 cnpm!cnpm 安装的模块路径比较奇怪,packager 不能正常识别!

3.Yarn

Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。

// 使用 npm 全局安装 yarn,报错的试试前面加sudo
npm install yarn -g// 检查版本是否安装成功
yarn -v 

4.Android环境配置

1.安装JDK

使用Homebrew来安装由 Azul 提供的 名为 Zulu 的 OpenJDK 发行版。此发行版同时为 Intel 和 M1 芯片提供支持。在 M1 芯片架构的 Mac 上相比其他 JDK 在编译时有明显的性能优势。

brew tap homebrew/cask-versions
brew install --cask zulu11

在命令行中输入 javac -version 查看当前jdk版本

2.下载AndroidStudio

官网 https://developer.android.google.cn/studio/

1.国内配置 Http Proxy

Android Studio是在谷歌的服务器上,初次安装Android Studio时下载SDK等必定失败,由于国际环境原因,大陆是无法正常访问谷歌的,所以我们在使用Android Studio时需要设置HTTP Proxy 也就是网络代理

2.打开后按下图,也就是选中“Auto-detect proxy settings”,勾选下方“Automatic proxy configuration URL”,填入国内的某个镜像站。点击check connection 现实successful就说明连接成功了
在这里插入图片描述
1.阿里云镜像站地址:
mirrors.aliyun.com 端口:80
2.清华大学镜像站地址:
mirrors.tuna.tsinghua.edu.cn 端口:80
3.北京外国语大学镜像站地址:
mirror.bfsu.edu.cn 端口:80
4.中国科学院开源协会镜像站地址:
IPV4/IPV6: mirrors.opencas.cn 端口:80
IPV4/IPV6: mirrors.opencas.org 端口:80
IPV4/IPV6: mirrors.opencas.ac.cn 端口:80
5.上海GDG镜像服务器地址:
sdk.gdgshanghai.com 端口:8000
6.北京化工大学镜像服务器地址:
IPv4: ubuntu.buct.edu.cn/ 端口:80
IPv4: ubuntu.buct.cn/ 端口:80
IPv6: ubuntu.buct6.edu.cn/ 端口:80
7.大连东软信息学院镜像服务器地址:
mirrors.neusoft.edu.cn 端口:80
8.腾讯Bugly 镜像:
android-mirror.bugly.qq.com 端口:8080

2.安装SDK

需要安装下面三个
Android SDK
Android SDK Platform
Android Virtual Device

1.首先配置sdk的路径

在这里插入图片描述在这里插入图片描述

2.SDK 下载

在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开Android 13 (Tiramisu)选项,确保勾选了下面这些组件(重申你必须使用稳定的代理软件,否则可能都看不到这个界面):Android SDK Platform 33
Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)或是Google APIs ARM 64 v8a System Image(针对 Apple Silicon 系列机型)
然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的33.0.0版本。你可以同时安装多个其他版本。
在这里插入图片描述

3.创建模拟器

如果你刚刚才安装 Android Studio,那么可能需要先创建一个虚拟设备。点击"Create Virtual Device…“,然后选择所需的设备类型并点击"Next”,然后选择Tiramisu API Level 33 image.
当然也可以使用usb 连接真机调试
在这里插入图片描述

在这里插入图片描述

4.配置 ANDROID_HOME 环境变量

1、打开 Mac 的 Terminal 终端,输入 cd ~/ 【进入当前用户的home目录】

2、输入 touch .bash_profile 【如果没有.bash_profile这个文件,则创建一个这个文件】

3、输入 open .bash_profile【打开我们创建的这个文件,此时应该弹出一个文本编辑框,如果是第一次配置环境,那么文本编辑框为空白】
4、在打开的文本编辑器中写入如下代码:

export ANDROID_HOME = Android SDK 路径
export PATH=${PATH}:${ANDROID_HOME}/emulator 
export PATH=${PATH}:${ANDROID_HOME}/tools 
export PATH=${PATH}:${ANDROID_HOME}/tools/bin 
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

注意 4 中的 ANDROID_HOME 应该根据自己的 sdk 路径来填写,其余可以直接复制。至于sdk路径,可以打开Android Studio,在preference(Windows的setting)中搜索sdk来查看。

5、在终端中输入 source .bash_profile 【使我们的改动生效】

6、输入 adb 【验证是否完成配置,如果不显示 adb: command not found,说明配置完成 】

5.IOS环境

1.升级ruby(ARM架构设备)

目前mac的默认ruby环境都是2.6.10,但是默认的cocoapods的版本支持已经升级到了3.2.2,所以我们要升级当前的ruby环境:
打开终端执行下面命令,等待安装完成即可。

brew install ruby

然后我们继续执行:

ruby -v

执行完命令后,其实还是原来的版本👌,这是因为环境变量没有配置。因此,还有一个步骤就是配置环境变量。

echo 'export PATH="/opt/homebrew/opt/ruby/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc
ruby -v

在这里插入图片描述
如果出现的结果为3.2.2及以上版本,就说明安装成功。

2.安装cocoapods

CocoaPods是用 Ruby 编写的包管理器(可以理解为针对 iOS 的 npm)。从 0.60 版本开始 react native 的 iOS 版本需要使用 CocoaPods 来管理依赖。你可以使用下面的命令来安装 CocoaPods。CocoaPods 的版本需要 1.10 以上。

1.安装方式(选择其中一种)

1.brew安装

brew install cocoapods

2.我们更换gem镜像地址

gem sources --remove https://rubygems.org/
gem sources -a https://gems.ruby-china.com/

如果正常则表示替换成功了,如果出现了下面的问题,则说明权限出了问题。
在这里插入图片描述
这个时候我们要给他指出的文件夹开放权限,终端执行:

sudo chmod -R 777 /Users/lee/.local

这个之后再执行上面的替换操作就会正常了。

2.安装cocoapods

sudo gem install -n /usr/local/bin cocoapods

这个时候会提示我们安装完成,但是没有完,我们这个时候我们继续执行下一步。

3.下载pod依赖

终端执行:

git clone https://github.com/CocoaPods/Specs.git ~/.cocoapods/repos/master

等待下载完成即可,此时cocoapods已经安装完成可以使用了
项目执行 pod install
发现依赖经常报错,类似于这种

Cloning into '/var/folders/7n/72jrkgcx71lgnyjsbyhlml1r0000gp/T/d20230912-44744-l9ibfb'...
fatal: unable to access 'https://github.com/lblasa/double-conversion.git/': HTTP/2 stream 1 was not closed cleanly before end of the underlying stream

我搜到的有效的解决方法,那就是在终端执行:

git config --global --unset http.proxy 
git config --global --unset https.proxy

3.下载Xcode

React Native 目前需要Xcode 12 或更高版本。你可以通过 App Store 或是到Apple 开发者官网上下载。这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。

6.开发工具

VScode 官网下载地址

新手记录一下

参考:
React Native 官网
最新cocoapods安装流程 https://blog.csdn.net/weixin_38201792/article/details/131599252
React Native实用开发指南

相关文章:

React Native 环境配置(mac)

React Native 环境配置(mac) 1.Homebrew2.Node.js、WatchMan3.Yarn4.Android环境配置1.安装JDK2.下载AndroidStudio1.国内配置 Http Proxy2.安装SDK1.首先配置sdk的路径2.SDK 下载 3.创建模拟器4.配置 ANDROID_HOME 环境变量 5.IOS环境1.升级ruby&#x…...

CAD for JS:VectorDraw web library 10.1004.1 Crack

VectorDraw web library经过几年的研究,通过互联网展示或工作的可能性并拒绝了各种项目,我们最终得出的结论是,在 javascript 的帮助下,我们将能够在 Microsoft IE 以外的互联网浏览器中通过网络演示矢量图形(支持 ocx…...

代码管理工具git1

ctrl 加滚轮 放大字体 在计算机任意位置单击右键,选择::Git Bash Here git version git清屏命令:ctrl L查看用户名和邮箱地址: $ git config user.name$ git config user.email修改用户名和邮箱地址:$ git…...

层次聚类分析

1、python语言 from scipy.cluster import hierarchy # 导入层次聚类算法 import matplotlib.pylab as plt import numpy as np# 生成示例数据 np.random.seed(0) data np.random.random((20,1))# 使用树状图找到最佳聚类数 Z hierarchy.linkage(data,methodweighted,metric…...

Jmeter性能实战之分布式压测

分布式执行原理 1、JMeter分布式测试时,选择其中一台作为调度机(master),其它机器作为执行机(slave)。 2、执行时,master会把脚本发送到每台slave上,slave 拿到脚本后就开始执行,slave执行时不需要启动GUI&#xff0…...

学信息系统项目管理师第4版系列08_管理科学基础

1. 科学管理的实质 1.1. 反对凭经验、直觉、主观判断进行管理 1.2. 主张用最好的方法、最少的时间和支出,达到最高的工作效率和最大的效果 2. 资金的时间价值与等值计算 2.1. 资金的时间价值是指不同时间发生的等额资金在价值上的差别 2.2. 把资金存入银行&…...

从2023蓝帽杯0解题heapSpary入门堆喷

关于堆喷 堆喷射(Heap Spraying)是一种计算机安全攻击技术,它旨在在进程的堆中创建多个包含恶意负载的内存块。这种技术允许攻击者避免需要知道负载确切的内存地址,因为通过广泛地“喷射”堆,攻击者可以提高恶意负载被…...

基于SSM的学生宿舍管理系统设计与实现

末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用JSP技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…...

jvm 内存模型介绍

一、类加载子系统 1、类加载的过程:装载、链接、初始化,其中,链接又分为验证、准备和解析 装载:加载class文件 验证:确保字节流中包含信息符合当前虚拟机要求 准备:分配内存,设置初始值 解析&a…...

用Jmeter进行压测详解

简介: 1.概述 一款工具,功能往往是很多的,细枝末节的地方也很多,实际的测试工作中,绝大多数场景会用到的也就是一些核心功能,根本不需要我们事无巨细的去掌握工具的所有功能。所以本文将用带价最小的方式讲…...

Mysql001:(库和表)操作SQL语句

目录: 》SQL通用规则说明 SQL分类: 》DDL(数据定义:用于操作数据库、表、字段) 》DML(数据编辑:用于对表中的数据进行增删改) 》DQL(数据查询:用于对表中的数…...

甲骨文全区登录地址

日本东部 东京 https://console.ap-tokyo-1.oraclecloud.com https://console.ap-tokyo-1.oraclecloud.com 日本中部 大阪 https://console.ap-osaka-1.oraclecloud.com https://console.ap-osaka-1.oraclecloud.com 韩国中部 首尔 https://console.ap-seoul-1.oraclecloud.c…...

Java面试题第八天

一、Java面试题第八天 1.如何实现对象克隆? 浅克隆 浅克隆就是我们可以通过实现Cloneable接口,重写clone,这种方式就叫浅克隆,浅克隆 引用类型的属性,是指向同一个内存地址,但是如果引用类型的属性也进行浅克隆就是深…...

什么是同步容器和并发容器的实现?

同步容器和并发容器都是用于在多线程环境中管理数据的容器,但它们在实现和用法上有很大的区别。 同步容器: 同步容器是使用传统的同步机制(如synchronized关键字或锁)来保护容器内部数据结构的线程安全容器。同步容器通常是单线…...

学Python的漫画漫步进阶 -- 第十六步

学Python的漫画漫步进阶 -- 第十六步 十六、多线程16.1 线程相关的知识16.1.1 进程16.1.2 线程16.1.3 主线程 16.2 线程模块——threading16.3 创建子线程16.3.1 自定义函数实现线程体16.3.2 自定义线程类实现线程体 16.4 线程管理16.4.1 等待线程结束16.4.2 线程停止 16.5 动动…...

MySQL 8.0 OCP (1Z0-908) 考点精析-架构考点5:数据字典(Data Dictionary)

文章目录 MySQL 8.0 OCP (1Z0-908) 考点精析-架构考点5:数据字典(Data Dictionary)File-based Metadata Storage (基于文件的元数据存储)Transactional Data Dictionary (事务数据字典)Serialized Dictionary Informat…...

7分钟了解ChatGPT是如何运作的

ChatGPT是现在最为热门的聊天助手应用,它使用了一个大型语言模型(LLM),即GPT-3.5。它通过大量的文本数据进行训练,以理解和生成人类语言。但是,你是否有了解过ChatGPT是如何运作的吗? 下面我们就一起通过这个视频来一起…...

蓝桥杯打卡Day8

文章目录 C翻转矩阵幂 一、C翻转IO链接 本题思路:本题需要找出顺时针旋转和逆时针旋转的规律,然后就可以解决该问题。 矩阵顺时针90旋转规律:列号变为行号,(n-行号-1)变为列号 规律:a[i][j]b[j][n-i1]; 矩阵逆时针90旋转规律:行号变为列号&#xff0…...

React 学习笔记目录

学习使用的开发工具 编译器 VSCode 开发语言工具 TypeScript /JavaScript 重要程度分类 一般 这个程度的知识点主要是达到熟练掌握即可,不用太深入研究和学习。 重要 这个程度的知识点主要是达到熟练掌握,并且内部的原理切要熟记,因为会关…...

一起Talk Android吧(第五百五十一回:如何自定义SplashScreen)

文章目录 概念介绍实现方法修改启动页中的内容修改启动页显示时间修改启动面消失时的页面各位看官们大家好,上一回中咱们说的例子是"如何适配SplashScreen",本章回中介绍的例子是" 如何自定义SplashScreen"。闲话休提,言归正转,让我们一起Talk Android…...

PYTHON-模拟练习题目集合

🌈write in front🌈 🧸大家好,我是Aileen🧸.希望你看完之后,能对你有所帮助,不足请指正!共同学习交流. 🆔本文由Aileen_0v0🧸 原创 CSDN首发🐒 如…...

UE5学习笔记(1)——从源码开始编译安装UE5

目录 0. 前期准备1. Git bash here2. 克隆官方源码。3. 选择安装分支4. 运行Setup.bat,下载依赖文件5. 运行GenerateProjectFiles.bat生成工程文件6. 生成完成,找到UE5.sln/UE4.sln7. 大功告成 0. 前期准备 0.1 在windows的话,建议装一个Git…...

DP读书:《openEuler操作系统》(二)操作系统的发展史

操作系统的发展历史 操作系统的发展历史手工操作时代批处理系统多道程序系统分时操作系统CTSSMULTICS的历史UNIX和Linux的历史Debian系列Red Hat系列 DOS和Windows的历史DOS的历史:Windows的历史: Android和iOS的历史Android:iOS:…...

SQL sever中相关查询

目录 一、简单查询 二、条件查询 三、别名查询 四、分组查询 五、排序查询 六、去重查询 七、分页查询 八、模糊查询 九、表连接查询 十、子查询 十一、嵌套查询 一、简单查询 简单查询是最基本的查询类型,用于从数据库中选择特定列或所有列的数据。 1…...

Java手写IO流和案例拓展

Java手写IO流和案例拓展 1. 手写IO流的必要性 在Java编程中,IO流是非常重要的概念。尽管Java已经提供了许多现成的IO类和方法,但是了解IO流的底层实现原理,能够手写IO流是非常有必要的。手写IO流可以帮助我们更深入地理解IO的工作原理&…...

Linux入门教程||Linux 文件与目录管理

我们知道Linux的目录结构为树状结构,最顶级的目录为根目录 /。 其他目录通过挂载可以将它们添加到树中,通过解除挂载可以移除它们。 在开始本教程前我们需要先知道什么是绝对路径与相对路径。 绝对路径: 路径的写法,由根目录 /…...

MyBatis获取参数值的两种方式#{}和${} 以及 获取参数值的各种情况

一、参数值的两种方式#{}和${} 在 MyBatis 中,可以使用两种方式来获取参数值:#{} 和 ${}。 1. #{}:这是 MyBatis 推荐使用的方式。在 SQL 语句中使用 #{},MyBatis 会自动将参数值进行预编译处理,防止 SQL 注入攻击&a…...

(手撕)数据结构--->堆

文章内容 目录 一:堆的相关概念与结构 二:堆的代码实现与重要接口代码讲解 让我们一起来学习:一种特殊的数据结构吧!!!! 一:堆的相关概念与结构 在前面我们已经简单的学习过了二叉树的链式存储结…...

[运维|数据库] MySQL 中的COLLATE在 PostgreSQL如何表示

在 PostgreSQL 中,字符集(collation)和排序规则(collation order)的概念与 MySQL 类似,但语法和用法略有不同。在 PostgreSQL 中,字符集和排序规则通常是数据库、表或列级别的设置,而…...

【Linux】tar 与 zip 命令

tar 命令 tar 本质上只是一个打包命令,可以将多个文件或者文件夹打包到一个 tar 文件中,结合其他的压缩程序再将打包后的档案文件压缩。 所以看到 .tar.gz, .tar.bz2, .tar.xz 等等文件其实是 tar 文件之后进行 Gzip, Bzip2, XZ 压缩之后的文件。 tar…...

mugeda做网站/百度搜索风云榜

实验十 团队作业6-团队项目系统设计改进与详细设计 项目内容这个作业属于哪个课程http://www.cnblogs.com/nwnu-daizh/这个作业的要求在哪里https://www.cnblogs.com/nwnu-daizh/p/10946673.html团队名称坐热板凳组作业学习目标①掌握面向对象软件设计方法;②完善系…...

杭州网站制作建设/百度竞价开户渠道

position: relative;是指元素 相对于未设置position:relative;状态下的位移;以content的左上角为坐标原点,黄色块在未position时,它的左上角相对于原点的坐标是(0,30) (你可以把两个色块的position:relative去掉看看);所以黄色在设置了position后&#x…...

时时彩网站开发代理代码/最新注册域名查询

android:divider"drawable/shape"<!--分割线图片-->android:showDividers"middle|beginning|end" <!--分割线位置-->分割线如果是图片那就直接使用图片就行&#xff0c;如果要使用颜色就必须使用shape来显示&#xff0c;直接使用颜色或Color是…...

软件网站是怎么做的/seo站内优化站外优化

教程地址 学习完毕&#xff0c;教程很好。...

漳州做网站建设/搜索引擎关键词排名优化

DB2查看VIEW定义的SQL文。 select VD.text as V_DLL from syscat.VIEWS as VD where VD.VIEWSCHEMA DB2ADMIN and VD.VIEWNAME V_DEPT; 字段V_DLL就是VIEW的DLL了。...

公司网站制作与维护/快手seo软件下载

之前写过一篇树莓派使用12864接口的2.3寸显示屏的文章&#xff0c;当时用的是并口&#xff0c;占用了太多的gpio资源&#xff0c;于是考虑使用spi接口的显示屏&#xff0c;最近的项目正好用到了spi接口的oled的显示屏&#xff0c;于是考虑把它用到树莓派上,先介绍下这款屏幕&am…...