搭建React Native开发环境

news2025/1/23 12:11:42

1.安装node

node.js官网

需要确定自己安装的版本是否是12版本以上

node -v

 2.安装yarn

npm install -g yarn

3.安装 Android Studio

这是官网推荐的安装地址:

android studio

国内用户可能无法打开官方链接,请自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项,确保选中了以下几项:

所以需要我们自己想办法来安装.

给大家分享一个百度网盘地址,里面有我们需要的软件:

链接: https://pan.baidu.com/s/1c8AgOvyqWHquDl76oH5Rhg 提取码: f67p

 解压完之后可以看到这几个软件:

JDK的安装比较简单,这里附上一个链接,直接下载安装就行:

Java SE Development Kit

下载的时候需要注册及登录,这点要注意.

需要双击安装第二个软件

 安装完这个软件后,可以搜索Android Studio,然后安装

 安装好后看看是否能打开Android studio,如果打不开的话,就需要修改自己电脑的代理了.

最好是验证一下自己的代理是否可以使用. 

打开是这个页面展示:

如果没有完整显示,可以配置一下代理:

 

点击ok看下代理的端口是否可以成功,如果不成功,证明代理的地址还是无法访问.

如果成功的话,点击保存,然后继续重启 Android studio.

我自己安装的时候,由于之前安装过,一下子就进入到了项目里,这个我暂时没搞明白,

 4. 安装 Android SDK

在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开Android 13 (Tiramisu)选项,确保勾选了下面这些组件(重申你必须使用稳定的代理软件,否则可能都看不到这个界面):

  • Android SDK Platform 33
  • Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)

 

这些依赖都是必须要安装的.

5. 配置 ANDROID_HOME 环境变量 

以下来自于React Native的官网描述:

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认):

变量名就用 ANDROID_HOME,变量值是下方箭头指示这个:

6.把一些工具目录添加到环境变量 Path

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

创建新项目 

npx react-native init AwesomeProject

创建完成:

这个是我截的图,正常的话此处的设备需要我们自己添加.

然后点击创建我们自己的机器,就以箭头所示的机型为例:

 

点击Next

一个安卓模拟器就运行起来了,下方所示:

编译并运行 React Native 应用 

确保你先运行了模拟器或者连接了真机,然后在你的项目目录中运行yarn android或者yarn react-native run-android

cd AwesomeProject
yarn android
# 或者
yarn react-native run-android

如果报错了,可以再执行一遍启动命令.这个其实是报了一个错误,我们只要在相关文件加一句代码:

重新执行运行命令:

 这样就编译成功了.

当你修改代码后,可以通过下方箭头的方式刷新页面,最快的方式就是点击两次R键

安卓手机因为机型很多,所以还可以添加很多不同的机型:

 注意:window电脑只能搭建安卓开发环境,iOS开发环境只能搭建沙盒环境.专门搭建iOS开发环境的话,只能选择Mac本了.

参考文献:

迄今为止最详细的react-native环境安装攻略

搭建开发环境

安装 Android Studio详解

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

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

相关文章

一个27岁妹子的软件测试之路

艰难的测试之路 2023年,现在这个大环境下,软件测试行业卷麻了,应该说不仅仅软件测试这行,而是整个IT行业都卷麻了,但最卷的还是前端,真的是卷的发紫,今天想和大家聊聊我认识的一个妹子&#xf…

基于SpringBoot+Mybatis-plus+Myslq+ElementVue大学生健康档案管理系统

基于SpringBootMybatisMyslqElementVue大学生健康档案管理系统 一、系统介绍1、系统主要功能:2.涉及技术框架:3.本项目所用环境: 二、功能展示三、其它系统四、获取源码 一、系统介绍 1、系统主要功能: 项目分为个人信息、个人健…

使用 @Autowired 依赖注入时警告不建议使用字段注入

文章目录 字段注入缺点无法注入 final 字段与 Spring 容器耦合度高 构造器注入(Spring 官方推荐)Setter 方法注入 在 Spring 中注入依赖时有字段注入、构造器注入、Setter 方法注入三种注入方式。 字段注入缺点 无法注入 final 字段 在 Spring 2.5 中引…

【C++】8.编译:CMake工具入门

😏*★,*:.☆( ̄▽ ̄)/$:*.★* 😏这篇文章主要介绍CMake工具的入门使用。————————————————学其所用,用其所学。——梁启超————————————————— 欢迎来到我的博客,一起学习知识…

Istio Ambient Mesh L4: 剖析ztunnel组件的工作原理

前言 早在2021年,Istio就开始了共享代理模式的探索,并于2022年9月推出的Ambient Mesh——无Sidecar的全新数据平面模式,目前还未发布正式版本。 这篇博客是花了好多时间收集整理出来的,按照学习思路,先简介了 Istio …

vue3项目搭建超详解

vue3安装与目录讲解 文章目录 vue3安装与目录讲解安装node.jsnpm绑定淘宝镜像安装vue脚手架创建vue项目目录解释推荐使用vscode 安装node.js http://nodejs.cn/download/ 根据自己电脑的位数自行下载。可安装到任意盘哈,因为我C盘比较大,我就直接在C盘了…

[IOT物联网]Python快速上手开发物联网上位机程序——前言

一、什么是Python Python是一种简单易学、高级、通用的编程语言。它是一种解释型语言,不需要编译即可运行,因此可以快速地进行开发和测试。Python具有简洁优美的语法,使用它可以提高生产力和代码可读性。Python拥有强大的标准库和第三方库&am…

windows10下设置本地apache\nginx站点部署ssl证书,使本地配置的域名可以用https访问

首先我们需要下载openssl来生成证书文件: 去官方网址下载https://slproweb.com/products/Win32OpenSSL.html; 下载好了,双击exe文件,然后就下一步,下一步安装完成; 安装之后配置环境变量,新建…

工赋开发者社区 | 何谓智能工厂?国内外智能工厂建设的现状分析

导读 本文将分析国内外智能工厂建设的现状与问题,智能工厂的内涵,以及推进智能工厂建设的成功之道。 1 国内外智能工厂建设的现状分析 近年来,全球各主要经济体都在大力推进制造业的复兴。在工业4.0、工业互联网、物联网、云计算等热潮下&am…

MDPI参考文献引用

在引参考文献的时候,MDPI论文有一个统一的格式要求,这里是帮助那些不会快速引文献的同学快速引用MDPI格式的参考文献。 【1】首先安装endnote,并创建仓库 【2】下载endnote识别的MDPI输出参考文献格式类型:https://endnote.com/style_downl…

【移动端网页布局】flex 弹性布局子项目属性 ② ( align-self 子项目属性 - 设置指定子项目元素侧轴排列方式 | 代码示例 )

文章目录 一、align-self 子项目属性 - 设置指定子项目元素侧轴排列方式二、代码示例 - 设置指定子项目的侧轴排列方式 一、align-self 子项目属性 - 设置指定子项目元素侧轴排列方式 align-self 子项目属性 用于 控制 子项目 在 侧轴 上的排列方式 ; align-self 子项目属性样…

C/C++访问MySQL数据库(非常详细的配置,一步一步的来,细心看我,不会你怪我)

第一步: 打开mysql的安装目录,默认安装目录如下:C:\Program Files\MySQL\MySQL Server 8.0,确认 lib 目录和 include 目录是否存在。 第二步: 打开VS2019,新建一个空工程,控制台应用程序即可,注…

web安全之CSRF漏洞——苦日7小时

CSRF_exercise CSRF(Cross-Site Request Forgery)攻击,也称为“跨站请求伪造”攻击,是一种利用用户已登录的身份在用户不知情的情况下,向服务器发送恶意请求的攻击方式。攻击者可以通过构造一些针对被攻击网站的特定请…

无锁化栈、队列深入解析及实现

首先声明,本文探讨实现的无锁化栈、队列皆是通过CAS硬件原语实现,且没有解决ABA问题。 之前比赛一直有看到无锁化编程优化部分,但一直没有实践过,(这里主要是使用的CAS,当然lock-free实现其实有好几种,这取决于具体的…

Django006:ModelForm组件

大家好,我是csdn的博主:lqj_本人 这是我的个人博客主页: lqj_本人的博客_CSDN博客-微信小程序,前端,python领域博主lqj_本人擅长微信小程序,前端,python,等方面的知识https://blog.csdn.net/lbcyllqj?spm1011.2415.3001.5343哔哩哔哩欢迎关注…

SpringBoot @Async异步线程 + CompletableFuture使用

参考资料 SpringBoot 最简单的使用异步线程案例 AsyncSpringboot Async异步扩展使用 结合 CompletableFuture 目录 一. 配置线程池二. 耗时任务1三. 耗时任务2四. 调用 一. 配置线程池 当池子大小小于corePoolSize,就新建线程,并处理请求当池子大小等于…

[golang gin框架] 31.Gin 商城项目- 提交订单逻辑操作以及去支付页面制作

一.界面展示 确认订单页面 确认订单页面相关逻辑见 golang gin框架] 30.Gin 商城项目- 购物车商品确认页面以及收货地址的增删改查 点击 去支付按钮逻辑: (1).判断用户是否存在地址,不存在则新增并设置为默认地址 (2).点击去支付,请求提交订单执行结算操作: 订单执行结算操作步…

C语言-【移位操作符详解】

这篇文章主要介绍了C语言中移位操作符,文章中通过详细的代码以及有关计算机中零碎的知识点对移位操作符进行了一个更好的解释,需要的小伙伴们可以一起学习学习吖~ 移位操作符:移动的是补码的二进制序列。 在C语言当中,有两种移位…

English Learning - L3 作业打卡 Lesson2 Day8 2023.5.12 周五

English Learning - L3 作业打卡 Lesson2 Day8 2023.5.12 周五 引言🍉句1: The color green is natural for trees and grass.成分划分弱读语调 🍉句2: But it is an unnatural color for humans.成分划分弱读连读语调 🍉句3: A person who h…

React | React组件化开发(二)

✨ 个人主页:CoderHing 🖥️ React .js专栏:React .js React组件化开发(二) 🙋‍♂️ 个人简介:一个不甘平庸的平凡人🍬 💫 系列专栏:吊打面试官系列 16天学会Vue 11天学会React …