React Native 环境配置(mac)

news2024/11/25 12:47:30

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已经安装完成可以使用了

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实用开发指南

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1005525.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SQL8 查找某个年龄段的用户信息

描述 题目:现在运营想要针对20岁及以上且23岁及以下的用户开展分析,请你取出满足条件的设备ID、性别、年龄。 用户信息表:user_profile iddevice_idgenderageuniversityprovince12138male21北京大学Beijing23214male复旦大学Shanghai36543…

神经网络 06(优化方法)

一、优化方法 网络搭建好,损失函数设计好之后, 根据损失函数更新参数(权重,偏移)。参数更新过程就是一个神经网络优化过程。 二、梯度下降方法 梯度下降法简单来说就是一种寻找使损失函数最小化的方法。从数学上的角度来看,梯度…

仿东郊到家app系统及功能介绍

类似东郊到家app系统开发,预约sap东郊到家软件定制开发,东郊到家小程序APP开发,东郊到家模式系统定制开发 一、东郊到家软件介绍 1、东郊到家app是一家以推拿为主项,个人定制型的o2o平台,东郊到家app平台提供、正规、安…

计算即时订单比例-首单使用开窗函数row_number()

1 需求 即时订单和计划订单 订单配送中,如果期望配送日期和下单日期相同,称为即时订单,如果期望配送日期和下单日期不同,称为计划订单。 请从配送信息表(delivery_info)中求出每个用户的首单(用…

langchain主要模块(一):模型输入输出

langchain2之模型输入输出 langchain1.概念2.主要模块模型输入/输出 (Model I/O)数据连接 (Data connection)链式组装 (Chains)代理 (Agents)内存 (Memory)回调 (Callbacks) 3.模型输入/输出 (Model I/O)提示提示模板示例选择器 模型LLMsChatModels 输出解释器 langchain 1.概…

计算机竞赛 多目标跟踪算法 实时检测 - opencv 深度学习 机器视觉

文章目录 0 前言2 先上成果3 多目标跟踪的两种方法3.1 方法13.2 方法2 4 Tracking By Detecting的跟踪过程4.1 存在的问题4.2 基于轨迹预测的跟踪方式 5 训练代码6 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 深度学习多目标跟踪 …

opencv(python)视频按帧切片/cv2.VideoCapture()用法

一、介绍 cv2.VideoCapture是OpenCV中一个用于捕捉视频的类。它可以访问计算机的摄像头,或从视频文件中读取图像。通过cv2.VideoCapture,用户可以轻松地捕捉、保存、编辑和传输视频流数据。 使用cv2.VideoCapture可以实现以下功能: 1. 打开…

基于微信小程序的自习室系统设计与实现,可作为毕业设计

博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 文章目录 1 简介2 技术栈3 需求分析3.1用户需求分析3.1.1 学生用户3.1.3 管理员用户 4 数据库设计4.4.1 E…

linux————ansible

一、认识自动化运维 自动化运维: 将日常IT运维中大量的重复性工作,小到简单的日常检查、配置变更和软件安装,大到整个变更流程的组织调度,由过去的手工执行转为自动化操作,从而减少乃至消除运维中的延迟,实现“零延时”…

Could not find artifact com.mysql:mysql-connector-j:pom:unknown

在 <dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope> </dependency> 添加版本号 这里用的是8.0.33版本&#xff0c;输入5.0的版本依然会报错 我自身用的是5.0…

做期权卖方有资金限制吗?

做期权卖方一般是有经济实力的自然人或机构做的&#xff0c;而且必须开立保证金账户&#xff0c;万一买方要行权就会有较高的风险&#xff0c;当然&#xff0c;做期权卖方在交易方面对经验和行情的预判是有一定要求的&#xff0c;下文介绍做期权卖方有资金限制吗&#xff1f; 一…

TCP服务器使用多路复用

启用复用的作用&#xff1f; 解决linux系统中的io阻塞问题&#xff0c;让多个阻塞io接口可以一起执行。无需开启线程&#xff0c;节省系统资源。 linux系统中的阻塞io有哪些&#xff1f; scanf、read管道、eadTcp套接字、acppet接收连接请求 有以下两种方式实现多路复用&am…

广州xx策划公司MongoDB恢复-2023.09.09

2023.09.08用户的MongoDB数据库被勒索病毒攻击&#xff0c;数据全部被清空。 提示&#xff1a; mongoDB的默认端口为27017&#xff0c;黑客通常通过全网段扫描27017是否开放判断是否是MongoDB服务器。一旦发现27017开放&#xff0c;黑客就会用空密码、弱密码尝试连接数据库。黑…

总结987

考研倒计时102天 时间记录&#xff1a; 6:20起床 7:00~7:40早读&#xff0c;13年tex2 7:50~8:20实验室 8:30~8:34列日计划 8:40~11:18进步本回顾&#xff0c;记录 11&#xff1a;20~12:20计算机网络网课 2:10~3:05计网20道选择题 3:07~4:42政治1000题25道选择题纠错 …

idea纯java工程使用gradle指定生成jar的Main-Class,idea生成jar

build.gradle核心代码如下&#xff1a; jar {manifest {attributes "Main-Class": "com.example.sample.Application"}from {configurations.compile.collect { it.isDirectory() ? it : zipTree(it) }} } 完整代码如下: group com.example.sample ver…

蚂蚁金融大模型

9月8日&#xff0c;蚂蚁集团在上海外滩大会发布的蚂蚁金融大模型基于蚂蚁基础大模型&#xff0c;针对金融产业深度定制。蚂蚁基础大模型平台具备万卡异构集群&#xff0c;其中千卡规模训练 MFU 可达到40%&#xff0c;集群有效训练时长占比90&#xff05;以上&#xff0c; RLHF …

前端面试题JS篇(6)

ES6 Module 和 CommonJS 模块的区别&#xff1a; CommonJS 是对模块的浅拷⻉&#xff0c;ES6 Module 是对模块的引⽤&#xff0c;即 ES6 Module 只存只读&#xff0c;不能改变其值&#xff0c;也就是指针指向不能变&#xff0c;类似 const&#xff1b; import 的接⼝是 read-o…

计算机网络第四节 数据链路层

一&#xff0c;引入数据链路层的目的 1.目的意义 数据链路层是体系结构中的第二层&#xff1b; 从发送端来讲&#xff0c;物理层可以将数据链路层交付下来的数据&#xff0c;装换成光&#xff0c;电信号发送到传输介质上了 从接收端来讲&#xff0c;物理层能将传输介质的光&…

ARM接口编程—RTC(exynos 4412平台)

RTC简介 RTC(Real Time Clock)即实时时钟&#xff0c;它是一个可以为系统提供精确的时间基准的元器件&#xff0c;RTC一般采用精度较高的晶振作为时钟源&#xff0c;有些RTC为了在主电源掉电时还可以工作&#xff0c;需要外加电池供电。 RTC内部原理 RTC寄存器 RTC控制寄存器 …

Leetcode 504.七进制数

给定一个整数 num&#xff0c;将其转化为 7 进制&#xff0c;并以字符串形式输出。 示例 1: 输入: num 100 输出: "202"示例 2: 输入: num -7 输出: "-10" 我的答案&#xff1a; 一、信息 1.目的实现十进制向其他进制的转换。 2.原理&#xff1a;公…