网站首页 > 技术文章 正文
鉴于当下大环境欠佳,所以我时刻具有危机感,不停的升华自己。故而今后会定期开展学习,并把学习心得分享出来,很久没有写学习总结,此般能力仍需重新拾起,时刻保持自己的竞争力,是大环境不好的情况下不易被淘汰的底气
最近在学习react native,所以我把RN开发环境搭建的经验总结一下,分享出来,希望对大家有帮助
第一步:安卓Android Studio
首先得 下载 Android Studio 和应用工具 - Android 开发者 ?|? Android Developers然后安装好。国内的用户可能打不开官方的链接,那就自己用搜索引擎去找能行的下载链接。在安装的界面里选“Custom”这个选项,一定得把下面这几项给选中了:
安装以版本:android-studio-2024.1.1.12
点击android-studio安装包,进入安装流程,
安装过程中可自定义安装位置,安装了
android studio 默认会安装jdk,默认在安装目录下的jbr,版本为java17,可直接采用该jdk进行java开发环境配置。
配置方式:(使用npm启动RN时必须java开发环境)
1、在环境变量中配置添加系统变量JAVA_HOME:D:\android\Android Studio\jbr。
2、在Path变量中新增 %JAVA_HOME%\bin
3、打开cmd,输入javac -version 查看配置是否成功
第二步、创建RN新项目
执行: npx @react-native-community/cli@latest init AwesomeProject828
该步骤会自动下载npm依赖包
第三步、使用Android studio 打开项目(AwesomeProject828/android),进行项目配置
首次使用Android studio打开RN项目时,会将../node_modules/@react-native/gradle-plugin 下的gradle插件加载进来进行构建
1、gradle配置。由于下载资源gradle很慢,可直接下载包后进行配置,配置如下图
gradle下载依赖很慢,需要配置国内镜像,配置方式:
在gradle的本地包下的init.d文件夹下新建文件init.gradle文件,添加内容如下:
allprojects {
repositories {
mavenLocal()
maven { url "https://www.jitpack.io"}
maven { url "https://maven.aliyun.com/repository/releases"}
maven { url "https://maven.aliyun.com/repository/google"}
maven { name "Alibaba" ; url "https://maven.aliyun.com/repository/public" }
maven { name "Alibabaplugin" ; url "https://maven.aliyun.com/repository/gradle-plugin" }
maven { name "Alibabacnter" ; url "https://maven.aliyun.com/repository/central" }
// maven { name "Bstek" ; url "http://nexus.bsdn.org/content/groups/public/" }
mavenCentral()
}
buildscript {
repositories {
maven { url "https://www.jitpack.io"}
maven { url "https://maven.aliyun.com/repository/releases"}
maven { url "https://maven.aliyun.com/repository/google"}
maven { name "Alibaba" ; url 'https://maven.aliyun.com/repository/public' }
maven { name "Alibabaplugin" ; url "https://maven.aliyun.com/repository/gradle-plugin" }
maven { name "Alibabacnter" ; url "https://maven.aliyun.com/repository/central" }
// maven { name "Bstek" ; url 'http://nexus.bsdn.org/content/groups/public/' }
maven { name "M2" ; url 'https://plugins.gradle.org/m2/' }
}
}
}
2、安装android SDK,然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的34.0.0版本
- 创建安卓模拟器,随意选择一个手机分辨率后,选择镜像时需要选择API 34的版本(RN依赖34的版本)
第四步,启动本地工程
1.进行项目构建,点击右上角的sync 按钮,进行项目依赖下载
- 在项目目录下(AwesomeProject828)打开cmd执行命令 npm run android,启动前端资源,目前默认端口号为8081,启动成功会打开node命令行界面,如下:
3、启动安卓工程,点击Android studio工具栏上的启动按钮进行项目构建和启动,启动时会自动启动安卓虚拟设置
- 上一篇: laravel-环境搭建 laravel环境部署
- 下一篇: 一次性弄清前端上线和生产环境地址
猜你喜欢
- 2024-10-07 【前端进阶】Vite + Vue3:多页面应用的优雅构建与环境变量管理
- 2024-10-07 springboot+Neo4j:快速搭建自己的知识图谱可视化构建平台
- 2024-10-07 前端工程化体系设计与实践第5章第1节部署流程的设计原则
- 2024-10-07 自主搭建5个精品脚手架,玩转前端提效|无密分享
- 2024-10-07 前端工程化体系设计与实践第4章本地开发服务器第2节动态构建
- 2024-10-07 开箱即用!腾讯前端React+TDesign开源后台开发模板
- 2024-10-07 前端vue项目创建环境node.js安装 nodejs vue项目的部署
- 2024-10-07 Util应用框架开发环境搭建(六)- 安装 NodeJs
- 2024-10-07 测试人员需要自己搭建测试环境吗?(附步骤)
- 2024-10-07 搭建个人网站系列-前端框架vuecli的搭建介绍
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端md5加密 (49)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- 前端接口 (46)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle约束 (46)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- mac oracle (47)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)