【React Native】学习记录(一)——环境搭建

Expo是一套工具,库和服务,可让您通过编写JavaScript来构建原生iOS和Android应用程序。

一开始学习的时候直接使用的是expo。

  npx create-expo-app my-app
  cd my-app
  npm run start

接下来需要搭建安卓和IOS端(为此特意换成了苹果电脑),主要参考的是 这里。

先说说比较容易大家的苹果系统:(在此之前记得先安装node)

# 先安装brew,使用国内的地址
/usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)"

# 安装watchman(mac可以安装)
brew install watchman

# 在开发过程中会用到npm, 建议切换源
npx nrm use taobao

可以通过 App Store 或是到Apple 开发者官网上下载Xcode,下载完成之后启动 Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools

在这里插入图片描述

接下来你可以在Xcode中新建一个IOS项目:

在这里插入图片描述

CocoaPods是官方推荐安装的,可以理解为针对 iOS 的 npm

brew install cocoapods

到这里IOS安装完成,可以在项目中执行npm run ios

接下来是安卓的安装,这里强调需要确保上网自由!!!

# 名为 Zulu 的 OpenJDK 发行版。此发行版同时为 Intel 和 M1 芯片提供支持
brew tap homebrew/cask-versions
brew install --cask zulu11

# 查看jdk是否安装成功
javac -version

首先下载和安装 Android Studio,这里我直接采用了标准的安装模式。需要等很久~

安装成功之后,打开软件,在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure",然后就能看到"SDK Manager"。

在这里插入图片描述

在 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版本。你可以同时安装多个其他版本。

之后配置环境变量:

# 在终端中执行
vim ~/.zshrc

# 输入单字母i,表示进入输入模式insert
# 将下列内容进行粘贴:
export ANDROID_HOME=$HOME/Library/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
# 按esc
# 输入 :wq 注意是三个字符而不是两个

# 使环境变量设置立即生效
source ~/.zshrc

#检查此变量是否已正确设置
echo $ANDROID_HOME

新建安卓项目,点击运行,那么此时就会弹出一个模拟器了,确保了安卓项目是可以打开模拟器的。

建议到这一步,还是重启一下电脑,然后回到我们的react native项目中,测试一波:

npm run start
# 然后按下a打开安卓模拟器
# 打开之后再按下i,打开ios模拟器

在这里插入图片描述

到这里就安装完成了~

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

虹科案例|如何分析设备故障时间和次数,打破生产瓶颈?

虹科设备绩效管理系统 保障生产设备的稳定性和可靠性 生产设备的稳定性和可靠性是保证企业正常生产的重要条件之一,设备故障的频发严重影响企业的正常生产,那么如何分析设备故障时间和次数,查找设备故障原因,协助企业打破生产瓶…

【Spring Cloud】Gateway的配置与使用

文章目录 前言第一步,创建一个springboot工程第二步,添加依赖第三步,编写yml文件第四步,启动主启动类总结 前言 Gateway其实是springcloud 原生的东西,但是我还是想放在这里讲,因为我们使用nacos时&#x…

【腾讯云 Cloud Studio 实战训练营】CloudStudio体验真正的现代化开发方式,双手插兜不知道什么叫对手!

CloudStudio体验真正的现代化开发方式,双手插兜不知道什么叫对手! 文章目录 CloudStudio体验真正的现代化开发方式,双手插兜不知道什么叫对手!前言出现的背景一、CloudStudio 是什么?二、CloudStudio 的特点三、CloudS…

Mac 快速生成树形项目结构目录

我这里使用的是通过包管理 Homebrew安装形式。没有安装的话可以自行搜索 Homebrew 安装方式 brew install tree直接到项目的根目录执行 tree 命令 tree 效果如下: or : tree -CfL 3效果如下:

2023-07-27 LeetCode每日一题(删除每行中的最大值)

2023-07-27每日一题 一、题目编号 2500. 删除每行中的最大值二、题目链接 点击跳转到题目位置 三、题目描述 给你一个 m x n 大小的矩阵 grid ,由若干正整数组成。 执行下述操作,直到 grid 变为空矩阵: 从每一行删除值最大的元素。如果…

LeetCode130.Surrounded-Regions<被围绕的区域>

题目:被围绕的区域 思路: 好吧,这题不会。 bfs递归 dfs非递归 dfs并查集 - 被围绕的区域 - 力扣(LeetCode) 将问题转化为与边界O相连的O。有点像岛屿问题了。 代码是: //codeclass Solution { public:vo…

8.事件对象

8.1获取事件对象 ●事件对象是什么 也是个对象,这个对象里有事件触发时的相关信息 例如:鼠标点击事件中,事件对象就存了鼠标点在哪个位置等信息 ●使用场景 可以判断用户按下哪个键,比如按下回车键可以发布新闻 可以判断鼠标点击…

绝绝子,这所211无歧视!极其保护一志愿!专硕爆冷全部录取!

一、学校及专业介绍 大连海事大学(Dalian Maritime University),简称海大,位于辽宁省大连市,是中华人民共和国交通运输部所属的全国重点大学,位列国家“双一流”、“211工程”重点建设高校。 1.1 招生情况…

SQL-每日一题【1070. 产品销售分析 III】

题目 销售表 Sales: 产品表 Product: 编写一个 SQL 查询,选出每个销售产品 第一年 销售的 产品 id、年份、数量 和 价格。 结果表中的条目可以按 任意顺序 排列。 查询结果格式如下例所示: 示例 1: 解题思路 前置知…

适配器模式与装饰器模式对比分析:优雅解决软件设计中的复杂性

适配器模式与装饰器模式对比分析:优雅解决软件设计中的复杂性 在软件设计中,我们常常面临着需要将不同接口或类协调工作的情况,同时还要满足灵活性和可扩展性的需求。为了应对这些挑战,适配器模式和装饰器模式应运而生&#xff0c…

一文速览ICML 2023测试时自适应/在线学习相关论文

现实场景中,模型不仅仅局限于单次训练,在部署之后是依然可以利用在线的数据流对模型进行一些调整,本文总结了和 Test time adaptation, online learning 场景下 ICML 2023 的相关文章。 01 / ICML 2023 / 论文标题: Uncovering Ad…

抄袭可耻,尊重原创

抄袭者的博客主页链接:MISAYAONE_OD机试 Py/Java/JS合集(A卷B卷),华为OD机试(JAVA)真题(A卷B卷),华为OD机试(Python)真题(A卷B卷)-CSDN博客 这个博…

el-select 无限下拉滚动加载数据

<template> <div> <el-form ref"saveParameter" :model"saveParameter" inline inline-message style"margin:10px" > <el-form-item label"供应商" prop"lngcustomerid"> <el-select v-model&q…

2023-07-31力扣每日一题

链接&#xff1a; 143. 重排链表 题意&#xff1a; 将链表L0 → L1 → … → Ln - 1 → Ln变成L0 → Ln → L1 → Ln - 1 → L2 → Ln - 2 → … 解&#xff1a; 线性表法还是好写的 这边搞一下翻转法&#xff0c;快慢指针求翻转点&#xff08;翻转后面一半然后双指针合并…

AD21 PCB设计的高级应用(三)PCB多板互连装配设计

&#xff08;三&#xff09;PCB多板互连装配设计 一旦模块在多板原理图上相互连接,就可以验证板到板的连接。这将检测网络到引脚分配错误和引脚到引脚的互连布线错误。可以解决这些错误并将修改信息更新到对应的 PCB 中,或者重新更新到源系统原理图。 印制电路板不是孤立存在的…

2023届浙江大学MPA提面A资格经验总结分享

本人是去年报考的浙大MPA项目&#xff0c;并通过提面获得了A资格&#xff0c;新一年浙大MPA项目提前批面试已经开始了&#xff0c;受达立易考周老师邀请来分享下我的提面经验&#xff0c;希望我的经验能对还在迷茫中的小伙伴有所帮助。 点开提面通知&#xff0c;首先看到…

LeetCode刷题总结 - 面试经典 150 题 -持续更新

LeetCode刷题总结 - 面试经典 150 题 - 持续更新 其他系列数组 / 字符串88. 合并两个有序数组27. 移除元素26. 删除有序数组中的重复项80. 删除有序数组中的重复项 II169. 多数元素189. 轮转数组121. 买卖股票的最佳时机122. 买卖股票的最佳时机 II55. 跳跃游戏274. H 指数380.…

角色权限的设置

1.先在登录页把角色存起来 2.然后分成普通管理员路由和超级管理员路由的动态路由 3.在导航栏这边接收循环路由以及文字等 4.给路由加属性看是否展示在导航栏ismenu 5.在templat标签上面循环 <template><div class"asders"><el-aside width"200…

PHP8的数据类型转换-PHP8知识详解

什么是数据类型转换&#xff1f; 答&#xff1a;数据从一个类型转换成另外一个类型&#xff0c;就是数据类型转换。 在PHP8中&#xff0c;变量的类型就是由赋值决定的&#xff0c;也就是说&#xff0c;如果 string 赋值给 $var&#xff0c;然后 $var 的类型就是 string。之后…
最新文章