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

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

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

相关文章

学校项目培训之Carla仿真平台之安装Carla

官网:http://carla.org/ 写在前面 由于安装都写了很多东西,所以我单独将安装弄出来记录一下。 如果你在安装9.12版本的时候遇到了很多问题,你可以考虑以下几点: - 楼梯可能不太行,需要更换,这是我实践得到的…

浅析Java责任链模式实现

一、概要 定义:责任链模式是一种行为设计模式, 允许你将请求沿着处理者链进行发送。收到请求后, 每个处理者均可对请求进行处理, 或将其传递给链上的下个处理者。 二、应用场景: 1.多条件流程判断:权限相关…

iOS开发之编译OpenSSL静态库

项目审查发现OpenSSL1.0.2d有漏洞,所以需要升级更新OpenSSL版本,借此机会,记录一下编译OpenSSL静态库的流程。 Xcode使用的是14.2,OpenSSL使用的是1.0.2u、1.1.1u,由于是对两个不同版本进行的编译操作,所以…

Linux服务器部署常用命令记录【持续更新】

介绍:最近服务器被人频繁攻击,留下一堆垃圾文件。重装后需要重新部署,才发现Linux的命令怎么这么碎。于是乎就产生了写这篇文章的想法。本文旨在记录常用的Linux部署需要使用的命令,另一篇关于Linux docker安装常用软件的文章&…

HTTP响应详解, HTTP请求构造及HTTPS详解

HTTP响应详解 认识 "状态码" (status code) 状态码表示访问一个页面的结果 . ( 是访问成功 , 还是失败 , 还是其他的一些情况 ...). 以下为常见的状态码 . 200 OK 这 是一个最常见的状态码, 表示访问成功 . 抓包抓到的大部分结果都是 200 例如访问搜狗…

C# byte[] 如何转换成byte*

目标:将byte[]转成byte*以方便使用memcpy [DllImport("kernel32.dll", EntryPoint "RtlCopyMemory", CharSet CharSet.Ansi)] public extern static long CopyMemory(IntPtr dest, IntPtr source, int size); private void butTemp_Click(object…

C语言实现通讯录 (附完整代码)

C语言实现通讯录 🍀实现一个通讯录:🍀通讯录的功能:🍀多文件实现💮设计结构体——保存人的信息💮初始通讯录💮封装通讯录💮define宏定义修改通讯录的最大容量初始化通讯录…

Gitlab仓库部署

Gitlab仓库部署 一、Gitlab的概述1、gitlab介绍2、gitlab主要功能3、gitlab和github的区别 二、部署环境1、安装依赖环境2、安装Postfix邮箱3、Gitlab优势4、Gitlab工作流程 三、Gitlab部署过程1、Yum安装Gitlab2、配置gitlab站点URL3、启动并访问Gitlab 四、Gitlab具体操作1、…

C++中的导入include,头文件,extern,main函数入口及相关编译流程

结论: 1:#include就是复制粘贴 2:C编译的时候,在链接之前,各个文件之间实际上没有联系,只有到了链接的阶段,系统才会到各个cpp文件中去找需要的文件; 一:include的作用…

详解混合类型文件(Polyglot文件)的应用生成与检测

1. 引入 混合类型文件(Polyglot文件),是指一个文件,既可以是合法的A类型,也可以是合法的B类型。 比如参考3中的文件,是一个html文件,可以用浏览器正常打开;它也是一个一个.jar文件&…

OpenCV之怀旧色、冰冻滤镜、熔铸滤镜

怀旧色 源码&#xff1a; void huaijiu(Mat& src,Mat& dst) {for (int h 0;h < src.rows;h ){uchar *d1 src.ptr<uchar>(h);uchar *d2 dst.ptr<uchar>(h);for (int w 0;w < src.cols;w ){int w3 3*w;int r d1[w3 2];int g d1[w3 1];int …

民用大中型无人直升机系统飞行性能飞行试验要求

声明 本文是学习GB-T 42856-2023 民用大中型无人直升机系统飞行性能飞行试验要求. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本文件规定了民用大中型无人直升机系统飞行性能飞行试验的内容、目的、条件、实施、数据处理和 结果评定等要…

linux相关知识以及有关指令3

在linux的世界中我们首先要有万物皆文件的概念&#xff0c;那么在系统中有那么多的文件&#xff0c;我们该怎么区分呢&#xff1f;文章目录 1. 文件分类2. 文件的权限1). 拥有者和所属组以及other2). 文件的权限3). 粘滞位4). 对于权限修改的拓展知识点a.修改权限b.修改拥有者所…

【MySQL进阶】SQL性能分析

一、SQL性能分析 1.SQL执行频率 MySQL 客户端连接成功后&#xff0c;通过 show [session|global] status 命令可以提供服务器状态信 息。通过如下指令&#xff0c;可以查看当前数据库的 INSERT 、 UPDATE 、 DELETE 、 SELECT 的访问频次&#xff1a; -- session 是查看当…

Linux学习之基础工具二

经过学习我们已经大致的学会了vim的使用&#xff0c;可以利用vim进行代码的编写了&#xff0c;在学习c语言的时候我们就知道&#xff0c;编译完成一个代码需要进行四个步骤&#xff1a; 1. 预处理&#xff08;进行宏替换) 2. 编译&#xff08;生成汇编) 3. 汇编&#xff08;生…

Java实现计算两个日期之间的工作日天数

需求&#xff1a; 需要在后端实现 计算当前日期与数据库内保存的日期数据之间相隔的工作日数目 实现 import java.time.DayOfWeek; import java.time.LocalDateTime;public class WorkdaysCalculator {public static void main(String[] args) {String givenDateTimeStr &q…

HTTPS Tomcat Servlet 博客系统 软件测试的概念 Linux

第 1 题&#xff08;多选题&#xff09; 题目名称&#xff1a; 以下关于http和https说法正确的是 题目内容&#xff1a; A .http是超文本传输协议 B .https是超文本传输安全协议 C .http是明文传输 D .https是加密传输 第 2 题&#xff08;单选题&#xff09; 题目名称…

【计算机视觉】Image Feature Extractors方法介绍合集(一)

文章目录 一、Convolution二、1x1 Convolution三、Depthwise Convolution四、Pointwise Convolution五、Depthwise Separable Convolution六、Grouped Convolution七、Dilated Convolution八、3D Convolution九、Non-Local Operation十、Deformable Convolution十一、Switchabl…

UI自动化测试神器Playwright(Java版)(保存登录cookie,解决免登录)

&#x1f3ad; Playwright在称为浏览器上下文的隔离环境中执行测试。该隔离模型提高了可重复性并防止相关联的测试脚本执行失败。测试可以加载现有的已验证状态&#xff0c;比如获取已登录的状态&#xff08;Cookie&#xff09;&#xff0c;在后续脚本中复用。这消除了在每个测…

【论文笔记】Perception, Planning, Control, and Coordination for Autonomous Vehicles

单纯作为阅读笔记&#xff0c;文章内容可能有些混乱。 文章目录 1. Introduction2. Perception3. Planning3.1. Autonomous Vehicle Planning Systems3.2. Mission Planning3.3. Behavioral Planning3.4. Motion Planning3.4.1. Combinatorial Planning3.4.2. Sampling-Based P…