React Native环境配置搭建(看这一篇就够了!)

这篇具有很好参考价值的文章主要介绍了React Native环境配置搭建(看这一篇就够了!)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

首先打开react native官网查看搭建环境教程

搭建开发环境 · React Native 中文网https://reactnative.cn/docs/environment-setup开发平台选择 windows  目标平台选择 Android

准备工作:必须安装的依赖有:Node、JDK 和 Android Studio。

React Native环境配置搭建(看这一篇就够了!),react native,android,react.js

1、安装node

 node必须在14以上,可以去 node官网下载,我这里用的是NVM。NVM教程 

可以打开cmd,查看当前node版本信息

React Native环境配置搭建(看这一篇就够了!),react native,android,react.js

2、全局安装yarn 

Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。
第一步骤已经安装了node,现在可以打开cmd执行以下命令;

npm install -g yarn

3、安装 Java Development Kit [JDK] 17 

Java Downloads | Oraclehttps://www.oracle.com/java/technologies/downloads/#jdk17-windows

React Native 需要 Java Development Kit [JDK] 17。你可以在命令行中输入 javac -version(请注意是 javac,不是 java)来查看你当前安装的 JDK 版本。如果版本不合要求,则可以去Temurin或Oracle JDK上下载(后者下载需注册登录)。

React Native环境配置搭建(看这一篇就够了!),react native,android,react.js

 配置java环境,打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建

新建一个JAVA——HOME的系统变量,然后根据自己的安装目录来配置变量值。

React Native环境配置搭建(看这一篇就够了!),react native,android,react.js

4. 安装 Android Studio

下载 Android Studio 和应用工具 - Android 开发者  |  Android Developers (google.cn)https://developer.android.google.cn/studio?hl=zh-cnReact Native环境配置搭建(看这一篇就够了!),react native,android,react.js 

React Native环境配置搭建(看这一篇就够了!),react native,android,react.js 然后下载Android studio,进入到安装界面,然后直接无脑下一步next就可以直接安装程序了。

5、下载项目所需要的SDK 

打开项目后,左上角,点击File,之后点击Settings打开SDK Manager

React Native环境配置搭建(看这一篇就够了!),react native,android,react.js

选中一下所有依赖的sdk

React Native环境配置搭建(看这一篇就够了!),react native,android,react.js

React Native环境配置搭建(看这一篇就够了!),react native,android,react.js 全部选择完毕后,点击下边的Apply按钮进行安装

然后我们切换到SDK Tools,下载相关的依赖,同上述方法一样,选择完后,点击Apply,来下载。

React Native环境配置搭建(看这一篇就够了!),react native,android,react.js

6、配置SDK

找到我们要下载的配置sdk的路径

React Native环境配置搭建(看这一篇就够了!),react native,android,react.js 

配置 ANDROID_HOME 环境变量:(这个官网是有步骤的,小编也给各位摘录过来方便操作)

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

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

React Native环境配置搭建(看这一篇就够了!),react native,android,react.js

还需要把一些工具目录添加到环境变量 Path
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量,选中Path变量,然后点击编辑。点击新建然后把这些工具目录路径添加进去:platform-tools、emulator、tools、tools/bin
React Native环境配置搭建(看这一篇就够了!),react native,android,react.js

 文章来源地址https://www.toymoban.com/news/detail-790183.html

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

配置完成后,我们可以打开cmd试一试adb --version命令能不能用 

React Native环境配置搭建(看这一篇就够了!),react native,android,react.js

7、配置虚拟机 virtual device

选择手机小图标,然后点击create virtual device

React Native环境配置搭建(看这一篇就够了!),react native,android,react.js 选择一个我们喜欢的机型,然后next。

React Native环境配置搭建(看这一篇就够了!),react native,android,react.js

 选择我们之前下载好的33版本,然后点击next

React Native环境配置搭建(看这一篇就够了!),react native,android,react.js

 然后点击Finish,完成虚拟机的创建。

React Native环境配置搭建(看这一篇就够了!),react native,android,react.js

 我们可以在虚拟机列表查看我们所创建的虚拟机。

React Native环境配置搭建(看这一篇就够了!),react native,android,react.js 

8、react native首次运行出现的问题以及所遇到的坑。

1、版本问题

在react native官网为我们提供了两个下载命令,分别是下载最新版和指定版本React Native环境配置搭建(看这一篇就够了!),react native,android,react.js

 在这里呢,我们不要去下载最新版本,应该下载0.72版本的项目,因为最新版本的启动命令是用不了的,比如它提供的yarn android。

我们应该用下边这段命令去创建项目

npx react-native@X.XX.X init AwesomeProject --version X.XX.X
npx react-native@0.72 init demo --version 0.72
 2、android gradle-8.0-bin-zip下载失败、下载很慢的解决方法
 然后在我们创建完成项目之后,我们需要修改gradle文件夹下边的gradle-wrapper.properties文件。

React Native环境配置搭建(看这一篇就够了!),react native,android,react.js

将这段改为distributionUrl=file:///C:/android_gradle/gradle-8.0.1-all.zip。

如果按照默认的路径去下载这个压缩包,就会导致超时。因为他这个链接在我们下载的时候会特别慢,从而导致下载失败,我们可以直接下载好,然后放入我们电脑中,用绝对路径去访问,这样就会解决这个问题。

大家可以去我的百度网盘提取这个压缩包

https://pan.baidu.com/s/1HJkZSHD0fJR2kYzr4tDgyw?pwd=qqsy

提取码: qqsy 

然后在c盘中创建一个android_gradle文件,将压缩包放入这个文件夹里边就可以了。

3、React-Native: Android 编译过程中 gradle 依赖包下载各种下载不下来、下载超时、极慢下载的处理方案。

我们在项目目录中找到android文件夹,打开build.gradle文件。将里边换成阿里的镜像源,代码如下:

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "33.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33

        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
        ndkVersion = "23.1.7779620"
    }
    repositories {
        // google()
        // mavenCentral()
        maven{ url 'https://maven.aliyun.com/repository/google'}
        google()
        mavenCentral()

    }
    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
    }
}

def REACT_NATIVE_VERSION = new File(['node', '--print',"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version"].execute(null, rootDir).text.trim())



直接将原来的代码更改为以上代码即可。我们在下载依赖包的时候一定要注意我们的网络,可以更换为自己的手机热点,尽量用5G网络。下载速度可以大大提高。

9、启动项目

通过以下命令来运行我们的项目:

yarn android

在最后的最后我们就完成了react native项目环境的搭建,我们会进入前端开发的全新领域。

 React Native环境配置搭建(看这一篇就够了!),react native,android,react.js

以上就是react native环境搭建的全部过程,如果小伙伴在安装中遇见问题,可以在评论区留言,我看到后会在第一时间帮助大家解决问题。如果这篇文章能够帮助到大家,也希望大家可以给小编点一个免费的小赞。 

 

到了这里,关于React Native环境配置搭建(看这一篇就够了!)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 07 Windows 7 AI工具-爬虫环境配置【看这一篇就够了!】(包含适用于Windows7的Anaconda、python、pycharm下载链接/报错解决方法)

    在信息搜集的过程中,我真的觉得手动搜信息效率太低了,人也容易疲惫,所以就开始研究利用爬虫搜信息,经过反复寻找适配渠道,解决大量报错之后, 我终于把Windows 7 的爬虫环境配置好了,以下将Windows 7 爬虫的安装配置环节总结,希望能帮助到刚入门的宝子!!! 1.

    2024年01月20日
    浏览(39)
  • 1秒将本地SpringBoot项目jar包部署到Linux环境(看这一篇就够了)

    在IDEA编辑器中 一键 将本地已经打包好的 SpringBoot 项目部署到 linux 环境,实现 秒级 部署 前置知识:需掌握Maven的打包 在windows环境使用命令启动SpringBoot项目 在Linux环境使用命令启动项目 在Linux环境使用脚本启动项目 优化脚本,每次启动时先关闭旧项目 分离依赖,每次上传

    2024年02月04日
    浏览(29)
  • AI绘画Stable diffusion保姆级教程,看这一篇就够了「安装-配置-画图」

    随着chat gpt爆火之后,越来越多的人开始关注人工智能,人工智能相关的其他应用如AI绘画,也再次得到人们的关注。AI绘画的确很上头,最近几天小编也研究一下,这里把研究的过程以及中间遇到的问题整理一下,我这里遇到的问题,相信新入门的小白也会遇到,希望本文对

    2024年02月10日
    浏览(25)
  • 深入解读Fast-Planner算法看这一篇就够!(含Ubuntu20.04 + Ros noetic 环境下 Fast-planner 算法仿真环境的配置与真机效果演示。)

    目录 目录 声明 前言 相关资源 论文与代码链接: 论文解读 算法仿真 1. 下载源码 2. 安装库与相关包 3. 编译过程问题解答  3.1.1 使用catkin_make指令编译 3.1.2 采用catkin build编译 3.2 运行程序时可能发生的问题 算法真机测试 1. 编译问题 2. 程序话题修改(以比赛为例子) 2.1 修改

    2024年02月08日
    浏览(34)
  • 【Nginx】入门看这一篇就够啦,nginx 简介、安装、工作原理、工作方式、详解配置文件

    目录 1、nginx 简介 2、nginx的工作原理 3、nginx 工作方式 4、nginx 安装 命令行安装 卸载命令 从源码构建 查看版本 测试启动 5、详解nginx配置文件 第一部分:全局块 第二部分:events块 第三部分:http 6、hosts 文件简介 nginx [engine x] 是 HTTP 和反向代理服务器、邮件代理服务器和通

    2024年02月19日
    浏览(38)
  • 【Linux】在ubuntu18.04系统中配置网络信息(超有用,完美解决,只看这一篇就行了)

    最近用centos搭建hadoop集群已经熟练了,但是学习场景中更多的使用的是ubuntu环境,就安装了ubuntu的环境进行搭建,结果ubuntu在很多地方与centos操作有较大区别,首先网络配置就让我折腾了半天,现在我将我已成功配置好的经验分享给大家 1.首先打开我们的VMware虚拟机,左上角

    2024年02月13日
    浏览(27)
  • 精通线程池,看这一篇就够了

    当我们运用多线程技术处理任务时,需要不断通过new的方式创建线程,这样频繁创建和销毁线程,会造成cpu消耗过多。那么有没有什么办法 避免频繁创建线程 呢? 当然有,和我们以前学习过多连接池技术类似,线程池通过提前创建好线程保存在线程池中, 在任务要执行时取

    2023年04月17日
    浏览(41)
  • CSS基础——看这一篇就够了

    目录 一、CSS简介 1.CSS是什么? 2.CSS的作用 3.CSS的构成 二、CSS选择器 1.基础选择器 (1).标签选择器 (2)类选择器 (3)标签选择器 (4) 通配符选择器 2.复合选择器 (1)后代选择器(包含选择器) (2)子选择器 (3)并集选择器 (4)伪类选择器  三、基本属性 1.字体属性

    2024年02月09日
    浏览(29)
  • 超图(HyperGraph)学习,看这一篇就够了

    最近事多,好久没更新了,随便写写(Ctrl+V)点 一、超图定义 通常图论中的图,一条edge只能连接2个vertex,在超图中,不限量 如何理解呢,就用我正在做的KT问题来看:7道题目-7个顶点;4种概念-4条超边,其中第1,2,3题都是考察概念1的,则构建一个包含了这仨的超边,以此类

    2024年02月02日
    浏览(38)
  • SourceTree使用看这一篇就够了

     你梦想有一天成为git大师,然而面对复杂的git命令,你感觉TMD这我能记得住吗?你曾经羡慕从命令行敲git命令,才会更加炫酷,然而时间一长,TMD命令我有忘了。那么今天我介绍的这款工具会让你从git命令中解救出来,这就是git可视化工具SourcTree。 事实上Git的功能十分强大

    2024年02月08日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包