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

react native在windows环境搭建并使用脚手架新建工程

截止到2024-1-11,使用的主要软件的版本如下:

软件实体版本
react-native0.77.0
react18.3.1
react-native-community/cli15.0.1
Android Studio2022.3.1 Patch3
Android SDKAndroid SDK Platform 34 35
Android SDKAndroid SDK Tools 34 35
Android SDKIntel x86 Atom_64 System Image
Android SDKGoogle APIs Intel x86 Atom System Image
node18.18.2
yarn1.22.22
npm9.8.1
jdk17.0.8

1. 搭建流程(基于windows10)

最新版本请参考官网

Node.js环境安装

安装node稳定版,访问如下网址
Node.js官网

yarn的安装

使用管理员打开cmd,并使用如下命令安装yarn

npm install -g yarn
react-native脚手架安装
npm install -g react-native-cli
安装JDK

安装jdk,本次使用的版本为17.0.8

添加系统和用户环境变量JAVA_HOME,其值为

D:\Develop\jdk-17

%JAVA_HOME%\bin添加到系统环境变量path

使用java -version验证是否成功

安装Android Studio

Android Studio官网下载地址 安装包也可以通过360软件管家下载
安装Android Studio,其步骤没有特殊的,不需要设置代理,按照提示一直走完安装流程。

选择安装的组件

选择安装位置

打开Android Studio

如果本地有设置文件,选择Config or installation folder

如果本地没有设置文件,选择Do not import settings

点击OK,跳转到Data Sharing界面,根据自己用途选择,我这里选择Don’t send,如图:

点击Don’t send,弹出找不到SDK的界面,如图:

点击cancel--然后点击next

注意选中custom

选择主题

点击Next,跳转的安装SDK界面,默认选择,选择安装的路径,如图:

点击Next,跳转内存分配界面,默认就好,内存主要看你自己电脑内存,每个人的电脑内存是不一样的,如图:

点击Next,确认安装配置界面,如图:

接受协议然后点击finish

打开时下载组件,这个过程会很漫长 耐心等待

点击finish

创建一个新项目

安装成功

配置SDK

按照下图,安装

Android SDK Platform 33 34

Android SDK Tools 33 34

Intel x86 Atom_64 System Image

Google APIs Intel x86 Atom System Image

配置Android Studio环境变量

按照如下图的操作,将Android SDK Location的值作为系统环境变量ANDROID_HOME的值

除此以外,将如下的值作为path的环境变量追加值

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

2. 使用npx创建demo工程并运行工程

创建工程

首先使用npx创建名称为helloRN工程

npx @react-native-community/cli init helloRN
工程配置文件修改
gradle-wrapper.properties文件修改

报错:

react native Exception in thread "main" java.io.IOException: Downloading from https://services.gradle.org/distributions/gradle-8.10.2-all.zip failed: timeout (10000ms)

原因:https://services.gradle.org/distributions/gradle-8.10.2-all.zip 文件获取不到

解决办法

打开helloRN\android\wrapper\gradle-wrapper.properties文件

修改distributionUrl的url前缀值为https\://mirrors.cloud.tencent.com/gradle/

build.gradle文件修改

将其内容修改为:

buildscript {ext {buildToolsVersion = "35.0.0"minSdkVersion = 24compileSdkVersion = 35targetSdkVersion = 34ndkVersion = "27.1.12297006"kotlinVersion = "2.0.21"}repositories {maven { url 'https://maven.aliyun.com/repository/google'}//重点关注这一行maven { url 'https://dl.google.com/dl/android/maven2/' }mavenCentral()}dependencies {classpath("com.android.tools.build:gradle") // 不指定版本号classpath("com.facebook.react:react-native-gradle-plugin:0.77.0") // 版本号和react-native一样}
}
allprojects {repositories {maven{ url 'https://maven.aliyun.com/repository/google'} //重点关注这一行google()jcenter()}
}apply plugin: "com.facebook.react.rootproject"
运行helloRN工程

首先需要开启两个终端,使用终端1在工程目录下执行如下命令:

yarn start

使用终端2在工程目录下执行如下命令

yarn android

此时工程自动下载依赖文件...
如果出现下载react-android-0.73.1-debug.aarhermes-android-0.73.1-debug.aar文件超时的情况,请使用迅雷等工具,将完整下载链接复制到工具内下载,下载完成后,按如下表放置:

文件路径
react-android-0.73.1-debug.aarC:\Users\Think.gradle\caches\modules-2\files-2.1\com.facebook.react\react-android\0.73.1\路径下包含.pom文件的文件夹
hermes-android-0.73.1-debug.aarC:\Users\Think.gradle\caches\modules-2\files-2.1\com.facebook.react\hermes-android\0.73.1路径下包含.pom文件的文件夹

若未出现报错,则会出现BUILD SUCCESSFUL的提示,并在手机模拟器出现如下界面

虚拟机的使用

始终置顶

CTRL + M 打开调试框

相关文章:

react native在windows环境搭建并使用脚手架新建工程

截止到2024-1-11,使用的主要软件的版本如下: 软件实体版本react-native0.77.0react18.3.1react-native-community/cli15.0.1Android Studio2022.3.1 Patch3Android SDKAndroid SDK Platform 34 35Android SDKAndroid SDK Tools 34 35Android SDKIntel x…...

vulnhub DC-1靶机 walkthrough

描述 DC-1 是专门为获得渗透测试经验而建造的易受攻击实验室。 它旨在成为初学者的挑战,但其难易程度取决于您的技能和知识以及学习能力。 要成功完成此挑战,您需要具备 Linux 技能、熟悉 Linux 命令行以及使用基本渗透测试工具的经验,例如 …...

计算机网络 (58)无线局域网WLAN

前言 无线局域网WLAN(Wireless Local Area Network)是一种利用无线通信技术将计算机设备互联起来,构成可以互相通信和实现资源共享的网络体系。 一、定义与特点 定义: WLAN通过无线信道代替有线传输介质连接两个或多个设备形成一个…...

基于物联网的风机故障检测装置的设计与实现

1 系统总体设计方案 通过对风机故障检测装置的设计与实现的需求、可行性进行分析,本设计风机故障检测装置的设计与实现的系统总体架构设计如图2-1所示,系统风机故障检测装置采用STM32F103单片机作为控制器,并通过DS18B20温度传感器、ACS712电…...

【AI日记】25.01.25

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】【读书与思考】 AI kaggle 比赛:Forecasting Sticker Sales 读书 书名:法治的细节 律己 AI:8 小时,良作息:00:30-8:30, 良短视频&…...

Sourcetree:一款高效便捷的Git版本控制客户端

Sourcetree:一款高效便捷的Git版本控制客户端 引言 在软件开发领域,版本控制是确保代码质量和项目进度的关键工具。Git作为当前最流行的版本控制系统,已经广泛应用于各类项目中。而Sourcetree作为Git的图形化界面客户端,凭借其易…...

图像处理算法研究的程序框架

目录 1 程序框架简介 2 C#图像读取、显示、保存模块 3 C动态库图像算法模块 4 C#调用C动态库 5 演示Demo 5.1 开发环境 5.2 功能介绍 5.3 下载地址 参考 1 程序框架简介 一个图像处理算法研究的常用程序逻辑框架,如下图所示 在该框架中,将图像处…...

GitLab配置免密登录和常用命令

SSH 免密登录 Windows免密登录 删除现有Key 访问目录:C:\Users\Administrator\ .ssh,删除公钥:id_rsa.pub ,私钥:id_rsa 2.生成.ssh 秘钥 运行命令生成.ssh 秘钥目录( ssh-keygen -t rsa -C xxxxxx126.…...

Chameleon(变色龙) 跨平台编译C文件,并一次性生成多个平台的可执行文件

地址:https://github.com/MartinxMax/Chameleon Chameleon 跨平台编译C文件,并一次性生成多个平台的可执行文件。可以通过编译Chameleon自带的.C文件反向Shell生成不同平台攻击载荷。 登录 & 代理设置 按照以下步骤设置 Docker 的代理: 创建配置目…...

第十四讲 JDBC数据库

1. 什么是JDBC JDBC(Java Database Connectivity,Java数据库连接),它是一套用于执行SQL语句的Java API。应用程序可通过这套API连接到关系型数据库,并使用SQL语句来完成对数据库中数据的查询、新增、更新和删除等操作…...

“AI教学实训系统:打造未来教育的超级引擎

嘿,各位教育界的伙伴们,今天我要跟你们聊聊一个绝对能让你们眼前一亮的教学神器——AI教学实训系统。作为资深产品经理,我可是亲眼见证了这款系统如何颠覆传统教学,成为未来教育的超级引擎。 一、什么是AI教学实训系统&#xff1f…...

java读取设置pdf属性信息

pom <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>2.0.24</version> </dependency>读取属性 import org.apache.pdfbox.pdmodel.PDDocument; import org.apache.pdfbox.pdmod…...

C语言内存管理详解

C语言不像其他高级语言那样提供自动内存管理&#xff0c;它要求程序员手动进行内存的分配和释放。在C语言中&#xff0c;动态内存的管理主要依赖于 malloc、calloc、realloc 和 free 等函数。理解这些函数的用法、内存泄漏的原因及其防止方法&#xff0c;对于编写高效、可靠的C…...

mysql从全备文件中提取单库或单表进行恢复——筑梦之路

前提条件 与业务确认涉及业务、数据库IP、数据误删除时间点、数据删除涉及的SCHEMA、数据表&#xff0c;确认该数据库为MySQLdump备份方式&#xff0c;备份策略为每日凌晨1点进行数据库全备份&#xff0c;备份保留7天&#xff0c;业务误删除数据时间点为当日10点左右&#xff0…...

HTML-新浪新闻-实现标题-排版

标题排版 图片标签&#xff1a;<img> src&#xff1a;指定图片的url&#xff08;绝对路径/相对路径&#xff09; width&#xff1a;图片的宽度&#xff08;像素/相对于父元素的百分比&#xff09; heigth&#xff1a;图片的高度&#xff08;像素/相对于父元素的百分比&a…...

【前沿聚焦】机器学习的未来版图:从自动化到隐私保护的技术突破

网罗开发 &#xff08;小红书、快手、视频号同名&#xff09; 大家好&#xff0c;我是 展菲&#xff0c;目前在上市企业从事人工智能项目研发管理工作&#xff0c;平时热衷于分享各种编程领域的软硬技能知识以及前沿技术&#xff0c;包括iOS、前端、Harmony OS、Java、Python等…...

二叉树的最大深度(C语言详解版)

一、摘要 嗨喽呀大家&#xff0c;leetcode每日一题又和大家见面啦&#xff0c;今天要讲的是104.二叉树的最大深度&#xff0c;思路互相学习&#xff0c;有什么不足的地方欢迎指正&#xff01;好啦让我们开始吧&#xff01;&#xff01;&#xff01; 二、题目简介 给定一个二…...

基于dlib/face recognition人脸识别推拉流实现

目录 一.环境搭建 二.推拉流代码 三.人脸检测推拉流 一.环境搭建 1.下载RTSP服务器MediaMTX与FFmpeg FFmpeg是一款功能强大的开源多媒体处理工具,而MediaMTX则是一个轻量级的流媒体服务器。两者结合,可以实现将本地视频或者实时摄像头画面推送到RTSP流,从而实现视频…...

【kong gateway】5分钟快速上手kong gateway

kong gateway的请求响应示意图 安装 下载对应的docker 镜像 可以直接使用docker pull命令拉取&#xff0c;也可以从以下地址下载&#xff1a;kong gateway 3.9.0.0 docker 镜像 https://download.csdn.net/download/zhangshenglu1/90307400&#xff0c; postgres-13.tar http…...

webrtc入门系列(五)amazon-kinesis-video-streams-webrtc-sdk-c编译

《webrtc入门系列&#xff08;一&#xff09;easy_webrtc_server 入门环境搭建》 《webrtc入门系列&#xff08;二&#xff09;easy_webrtc_server 入门example测试》 《webrtc入门系列&#xff08;三&#xff09;云服务器coturn环境搭建》 《webrtc入门系列&#xff08;四&…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

MySQL:分区的基本使用

目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区&#xff08;Partitioning&#xff09;是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分&#xff08;分区&#xff09;可以独立存储、管理和优化&#xff0c;…...