搭建React Native开发环境

因项目需要,由vue开发转战react native开发,也是一边学一边写了。

首先就是搭建环境。

搭建步骤参考:https://reactnative.cn/docs/environment-setup

1.环境选择

我是windows系统,目标平台是安卓(根据自己的情况选择,选择不一样,后面的搭建步骤不一样)

然后需要下载安装Node、JDK和Android Studio。

2.安装Node和JDK

Node下载地址参考:https://nodejs.cn/download/

安装的Node版本需18及以上。

JDK下载地址参考:https://www.oracle.com/cn/java/technologies/downloads/#java17-windows

安装17版本。这个下载地址需要登录,如果你没有账号也不想注册,上面搭建步骤的参考网页里还有一个下载地址。你也可以从别处下载,只要能用。

Node 18+ 和JDK 17的具体安装步骤就不在这里详细说了。安装完成后可以在命令提示符中输入 node -v 和 javac -version 来查看当前安装的Node和JDK版本。

3.安装Yarn

bash 复制代码
npm install -g yarn

安装yarn可以替代npm,加速node模块的下载,不要用cnpm。

4.安装Android Studio

下载地址参考:https://developer.android.google.cn/studio?hl=zh-cn

搭建步骤中有提示要用一个稳定的代理,我第一次安装没有开代理,不知道安装失败跟这个有没有关系。还有就是本文章第4、5步安装所需内存很大,安装的位置要留足够的内存,要记得安装的位置,后续配置环境变量要用。比如我安装完内存被用23G,所需时间也比较久。

安装过程中有一个界面默认选择的是Standard,但是搭建建议我们选择 Custom 选项,后续中要确保选了以下几项:Android SDK、Android SDK Platform、Android Virtual Device。

5.安装Android SDK

Android Studio默认会安装最新版Android SDK,但目前编译React Native需要的是15版本的SDK。完成本文章的步骤4之后,会有一个欢迎界面,在欢迎界面点击"More Actions",再点击"SDK Manager"。

本图来源于搭建步骤网页

确保勾选了"Android SDK Platform 35"、"Intel x86 Atom_64 System Image"、"35.0.0"

注意图中第7步,选好之后是点击"Apply",而不是"OK"。

6.配置环境变量

在电脑的环境变量中添加一个 ANDROID_HOME 变量,用户变量和系统变量都行,值为SDK所在的目录。比如我的是在用户变量里添加的:

然后再把工具目录添加到path(ANDROID_HOME 在哪个就是哪个path):

bash 复制代码
%ANDROID_HOME%\platform-tools

比如我就在用户变量的path里添加

添加之后一路点击确定。重启一下电脑。

7.运行项目

在项目根目录终端输入 yarn 安装依赖,在android目录下输入 yarn start 启动项目,启动之后会出现一些命令选项,我是安卓,输入a,会自动打开安卓仿真机。

我第一次安装后就是启动项目时报错。后面发现是gradle下载失败了,换了镜像源和仓库还是失败,就卸载重装了。

按照官方提供的步骤来,一般没什么问题。祝顺利。

callback一下搭建步骤的网页:https://reactnative.cn/docs/environment-setup

相关推荐
百锦再41 分钟前
Reactive编程入门:Project Reactor 深度指南
前端·javascript·python·react.js·django·前端框架·reactjs
Ashley的成长之路42 分钟前
2025 年最新:VSCode 中提升 React 开发效率的必备插件大全
ide·vscode·react.js·工作提效·react扩展
百锦再44 分钟前
React编程高级主题:测试代码
android·前端·javascript·react.js·前端框架·reactjs
颜酱2 小时前
图结构完全解析:从基础概念到遍历实现
javascript·后端·算法
小迷糊的学习记录3 小时前
Vuex 与 pinia
前端·javascript·vue.js
发现一只大呆瓜3 小时前
前端性能优化:图片懒加载的三种手写方案
前端·javascript·面试
不爱吃糖的程序媛3 小时前
Flutter 与 OpenHarmony 通信:Flutter Channel 使用指南
前端·javascript·flutter
利刃大大3 小时前
【Vue】Element-Plus快速入门 && Form && Card && Table && Tree && Dialog && Menu
前端·javascript·vue.js·element-plus
NEXT063 小时前
AI 应用工程化实战:使用 LangChain.js 编排 DeepSeek 复杂工作流
前端·javascript·langchain
光影少年4 小时前
react的hooks防抖和节流是怎样做的
前端·javascript·react.js