React Native环境配置搭建

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

React Native官网环境搭建教程写的不够详细,并且有些坑,使得搭建环境很慢,本文章就是为了解决这些问题,以新手为标准的文档。
首先看下官网的说明:

reactnative环境搭建,react native,react.js,javascript

重点:必须安装的依赖有:Node、JDK 和 Android Studio
安装完这三个基本就可以了,接下来就详细讲讲这三个的安装。

一、安装node

可以直接去node官网下载对应的node版本,但是我推荐使用NVM,因为NVM可以很方便的切换版本,避免后续接手旧项目还得很麻烦的处理node降级的问题。
NVM的安装是使用移步我写的另一篇文章NVM管理node版本

二、安装yarn

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

npm install -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名。

注意:如果vscode编译器的终端输入yarn的命令报错“无法将 yarn 项识别为…”,原因是vscode中的集成终端使用的是powershell,所以我们要设置一下powershell的执行权限。

设置powershell的执行权限:
1、在开始搜索框中搜索powershell,右键,以管理员身份运行

reactnative环境搭建,react native,react.js,javascript

2、执行set-ExecutionPolicy RemoteSigned命令,并输入y选项
reactnative环境搭建,react native,react.js,javascript

三、安装Java Development Kit

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

1、下载Java Development Kit
我要介绍的是Oracle JDK的方式,
打开官网,如下图所示,点击下载jdk-11.0.19_windows-x64_bin.exe文件,因为安装exe文件后,会自动给你配置环境变量,无需手动配置。

reactnative环境搭建,react native,react.js,javascript

2、同意协议后继续下载
点击第一步后会打开如下弹窗:

reactnative环境搭建,react native,react.js,javascript
3、登录Oracle
点击上一步后,如果没有登录,需要登录一下。如果没有注册过,需要先注册后登录

reactnative环境搭建,react native,react.js,javascript

登录后下载得到jdk-11.0.19_windows-x64_bin.exe文件
reactnative环境搭建,react native,react.js,javascript

4、安装jdk-11.0.19_windows-x64_bin.exe
安装这个就很简单,直接一路下一步就好了,安装路径建议用默认路径。

reactnative环境搭建,react native,react.js,javascript
reactnative环境搭建,react native,react.js,javascript

reactnative环境搭建,react native,react.js,javascript

5、查看是否安装成功
打开cmd,输入 javac -version ,如果能看到版本号就说明安装成功了

reactnative环境搭建,react native,react.js,javascript

四、搭建Android 开发环境

搭建Android 开发环境是很麻烦的,官网也没有说得很详细,搭建过程是有一点坑的,本文就手把手教你搭建Android 开发环境,带你少走一些弯路。
1、下载 Android Studio
国内用户可能无法打开官方链接,那就需要先连接VPN,再进入官方链接下载。没有VPN就自行使用搜索引擎搜索可用的下载链接。
点击进入 Android Studio

reactnative环境搭建,react native,react.js,javascript
reactnative环境搭建,react native,react.js,javascript

下载得到 android-studio-2022.2.1.19-windows.exe,双击打开安装
reactnative环境搭建,react native,react.js,javascript

2、 安装 Android Studio
作为资深安装工程师,告诉你安装技巧就是,一路Next,最后Install。
reactnative环境搭建,react native,react.js,javascript
reactnative环境搭建,react native,react.js,javascript
reactnative环境搭建,react native,react.js,javascript
reactnative环境搭建,react native,react.js,javascript
reactnative环境搭建,react native,react.js,javascript
reactnative环境搭建,react native,react.js,javascript
reactnative环境搭建,react native,react.js,javascript

3、配置Android Studio
上个图片已经勾选打开Android Studio
(1)选择方式
打开后会弹出一个弹窗如下,默认选择第二个选项就好

reactnative环境搭建,react native,react.js,javascript

(2)是否要配置代理
下一步如果出现如下弹窗,就是想让你配置一个代理,在我们没有熟悉 Android Studio或者没有经常用的时候,这个配置无需理会,点击 Cancel 关闭弹窗

reactnative环境搭建,react native,react.js,javascript

(3)进入到初始配置页面,点击 Next,如下:

reactnative环境搭建,react native,react.js,javascript

(4)选择自定义安装,如下:

reactnative环境搭建,react native,react.js,javascript

(5)默认路径就好,继续 Next

reactnative环境搭建,react native,react.js,javascript

(6)选择主题背景颜色
选哪个都无所谓,看个人喜欢

reactnative环境搭建,react native,react.js,javascript

(7)勾选要下载的内容

注意:不一定要下载这个模拟器,可以使用第三方模拟器(例如:夜神模拟器),使用第三方模拟器的用法我就不介绍了,本文只介绍Android 官方提供的Android Virtual Device模拟器,我觉得挺好用的。

Android 官方提供的Android Virtual Device模拟器的直接跳到(16)步骤

重点来了,一共需要下载的包是1.97G,这个Android Virtual Device包就占了1.44G,走下一步会下载得非常慢,有时候是下载进度一动不动,不过没关系,后面会讲解决方案,先继续走。
像下图这样全部勾上,包括Android Virtual Device,Android SDK Location路径也是默认就好(防止后续找不到),点击 Next 走下一步:

reactnative环境搭建,react native,react.js,javascript

(8)这一步是检测到你可以设置系统加速,已经给你推荐2GB,继续点击 Next 走下一步:

reactnative环境搭建,react native,react.js,javascript

(9)安装确认,点击 Next

reactnative环境搭建,react native,react.js,javascript
(10)要下载的详情
显示要安装的包,继续 Next
reactnative环境搭建,react native,react.js,javascript

(11)同意协议
分别点击左边的三个项目,勾选右边的 Accept 表示同意协议,然后点击 Finish:

reactnative环境搭建,react native,react.js,javascript

(12)接下来就是安装各个包
点击 Show Details 查看要下载的具体内容

reactnative环境搭建,react native,react.js,javascript

(13)拿到模拟器包的链接
重点来了,把下载模拟器包的链接复制出来:
https://dl.google.com/android/repository/sys-img/google_apis/x86_64-33_r10.zip
以后可能下载路径会变动,最好自行复制,看到带有x86_64的zip包就没错

reactnative环境搭建,react native,react.js,javascript

(14)下载模拟器包:x86_64-33_r10.zip
把复制链接放到浏览器地址栏,回车下载,直接就是满速下载,无需挂代理
十几分钟就下载好了,可以让它先下载,先走后续的步骤。

reactnative环境搭建,react native,react.js,javascript

(15)关闭下载,关闭Android Studio
模拟器太大了,这样下载太慢了,不知道等到哪天才能下载成功,走到这一步其实是为了拿到模拟器包的下载链接,上一步已经在下载模拟器包了。
先点击 Cancel 关闭下载 ,然后点击 Finish,然后点击右上角 X 关闭Android Studio:

reactnative环境搭建,react native,react.js,javascript

(16)重新打开Android Studio
重新打开Android Studio,就又回到初始步骤,按照之前的步骤继续走。
重点:走到下面这一步的时候,把Android Virtual Device取消勾选,可以看到 Total download size只有224M(这样后面下载包当然就很快),然后继续 Next,后续的步骤和上面一样。

reactnative环境搭建,react native,react.js,javascript

(17)这样很快就下载完成:

reactnative环境搭建,react native,react.js,javascript

注意:下载完成的时候,可能程序会自动给你配置系统环境变量,如果你安装了360之类的安全软件,会提示你 检测到有程序尝试修改系统设置,这时候一定要允许,不然后续可能得自己配置环境变量了,怎么配置就自行百度了。

点击 Finish 完成:

reactnative环境搭建,react native,react.js,javascript

(18)打开项目
打开react native项目,还没项目的就自己先去 new 一个项目:

reactnative环境搭建,react native,react.js,javascript

(19)打开SDK Manager
打开项目后,就会像下图这么展示,
点击下图箭头指的图标(SDK Manager):

reactnative环境搭建,react native,react.js,javascript

复制下图Sdk路径

reactnative环境搭建,react native,react.js,javascript

粘贴到文件夹目录,回车打开Sdk目录:

reactnative环境搭建,react native,react.js,javascript

(20)解压模拟器
在Sdk目录下面找到x86_64文件夹,把(14)步骤下载的模拟器压缩包(这个包解压出来刚好是x86_64文件夹)解压到这个目录替换掉这个文件夹,如下:

reactnative环境搭建,react native,react.js,javascript

(21)配置 SDK
关闭Android Studio,再次打开SDK Manager
在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开Android 13 (Tiramisu)选项,确保勾选了 Android SDK Platform 33 和 Google APIs Intel x86 Atom System Image(这个就是上一步解压的模拟器包,前面是横杠说明已经配置好,无需再勾选下载) ,如下:

reactnative环境搭建,react native,react.js,javascript

然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的33.0.0版本。你可以同时安装多个其他版本。

reactnative环境搭建,react native,react.js,javascript

然后点击"Apply"来下载和安装这些组件,弹窗确认,点击 ok

reactnative环境搭建,react native,react.js,javascript
reactnative环境搭建,react native,react.js,javascript
reactnative环境搭建,react native,react.js,javascript

最后点击Finish,然后关闭SDK Manager

(22)创建模拟器
点击 Create device 按钮
reactnative环境搭建,react native,react.js,javascript

创建自己喜欢的分辨率的模拟器型号

reactnative环境搭建,react native,react.js,javascript
reactnative环境搭建,react native,react.js,javascript
reactnative环境搭建,react native,react.js,javascript
看到下图所示就代表创建成功了

reactnative环境搭建,react native,react.js,javascript

(23)配置 ANDROID_HOME 环境变量

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

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

reactnative环境搭建,react native,react.js,javascript

(24)把一些工具目录添加到环境变量 Path
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量,选中Path变量,然后点击编辑。点击新建然后把这些工具目录路径添加进去:platform-tools、emulator、tools、tools/bin

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

如图:

reactnative环境搭建,react native,react.js,javascript

你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效。

完成。

(35)启动react natvie项目测试
vscode打开项目,例如我的项目:终端输入yarn android,然后会默认自动打开上面创建的模拟器。文章来源地址https://www.toymoban.com/news/detail-645760.html

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

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

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

相关文章

  • React Native 环境搭建——IOS环境

    React Native 环境搭建,参考:加餐|集中答疑:详解iOS环境搭建-极客时间 已有npm、node、Homebrew 1、安装 Homebrew Homebrew国内如何自动安装(国内地址)(Mac Linux) - 知乎 2、安装 node、npm 3、安装 Watchman 的工具 它是由 Facebook 开发的一个工具,只要你的文件有一些变化,它就会自

    2024年02月05日
    浏览(20)
  • 【React Native】学习记录(一)——环境搭建

    Expo是一套工具,库和服务,可让您通过编写JavaScript来构建原生iOS和Android应用程序。 一开始学习的时候直接使用的是expo。 接下来需要搭建安卓和IOS端(为此特意换成了苹果电脑),主要参考的是 这里。 先说说比较容易大家的苹果系统:(在此之前记得先安装node) 可以通过

    2024年02月15日
    浏览(18)
  • React Native 环境配置(mac)

    安装工具的工具brew ,如果是中国大陆, 请参考Homebrew国内源 , 如果网络足够好,可以尝试官网直接安装brew 官网。 官方推荐使用Homebrew来安装 Node 和 Watchman。在命令行中执行下列命令安装(如安装较慢可以尝试阿里云的镜像源): 安装完 Node 后建议设置 npm 镜像(淘宝源)以

    2024年02月08日
    浏览(24)
  • ReactNative进阶(二十一)开源插件 react-native-device-info 获取设备信息

    项目开发过程中,需要获取设备信息,例如获取设备名称。可通过使用开源的第三方组件react-native-device-info,该组件适用于 iOS 和 Android 双平台。 在 ReactNative 项目中可通过 npm 命令下载 react-native-device-info 组件依赖包: android 需要在 AndroidManifest.xml 配置文件添加 android.permiss

    2024年02月07日
    浏览(22)
  • react native在windows环境搭建并使用脚手架新建工程

    截止到2024-1-11,使用的主要 软件的版本 如下: 软件实体 版本 react-native 0.73.1 react 18.2.0 react-native-cli 2.0.1 Android Studio 2022.3.1 Patch3 Android SDK Android SDK Platform 33 34 Android SDK Android SDK Tools 33 34 Android SDK Intel x86 Atom_64 System Image Android SDK Google APIs Intel x86 Atom System Image node 20.10.0 yarn 1.

    2024年02月02日
    浏览(27)
  • react native android环境搭建,使用夜神模拟器进行开发(适用于0.73+版本)

    前言 本文基于:“react-native” : “^0.73.0” 1.安装 Node Node.js,下载时选择 = 18 版本 2.下载并安装 JDK Java SE Development Kit (JDK),下载时选择 17 版本 安装 验证是否安装成功 打开命令提示符输入 javac -version 回车 3.安装 Android Studio 下载并安装 Android Studio ,获取编译 Android 应用所需

    2024年01月23日
    浏览(36)
  • React Native 环境安装

    Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.   搭建开发环境 · React Native 中文网 Homebrew(包管理器) → rvm(ruby版本管理) → ruby → cocoapods 安装 Homebrew Homebrew 安装RVM 使用RVM 安装Ruby RVM 查看版本,并设置默认Ruby版本 安装cocoapods pod 生成项目 进入指定目录下

    2024年01月22日
    浏览(25)
  • react native 0.73 配置 react-native-fs

    npm yarn android/settings.gradle android/app/build.gradle androidappsrcmainjavacomreactnative_demoMainApplication.kt 把原代码 改为

    2024年04月08日
    浏览(25)
  • React Native 开发工具配置

    VSCode 插件 Auto Close Tag Auto Rename Tag colorize ESLint GitLens Markdown All in One Prettier React Native Tools Git 可视化工具 SourceTree 帮助文档:https://blog.csdn.net/qq_44721831/article/details/128674431 真机投屏工具 scrcpy 使用 USB 连接电脑后,运行程序即可使用 帮助文档:https://github.com/Genymobile/scrcpy/wiki/

    2024年02月11日
    浏览(34)
  • 【React Native】学习记录(二)——路由搭建和常见的开发技巧

    在开发过程中发现,两个模拟器都不能输入中文,所以需要配置一下。 先说一下安卓,在弹出的输入框中查看设置,设置一下对应的 languages 即可: 在苹果模拟器中,跟苹果手机一样,打开设置,然后打开通用,同样设置语言: 我在这里走了弯路,去了另一个库…,路由文

    2024年02月15日
    浏览(22)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包