搭建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

相关推荐
代码AI弗森3 小时前
Python × NumPy」 vs 「JavaScript × TensorFlow.js」生态全景图
javascript·python·numpy
疏狂难除3 小时前
关于spiderdemo第二题的奇思妙想
javascript·爬虫
渣渣盟4 小时前
探索Word2Vec:从文本向量化到中文语料处理
前端·javascript·python·文本向量化
骑自行车的码农4 小时前
React 事件收集函数
前端·react.js
无羡仙4 小时前
JavaScript中的继承实现方式
javascript
一个处女座的程序猿O(∩_∩)O4 小时前
Vue CLI 插件开发完全指南:从原理到实战
前端·javascript·vue.js
小蜜蜂dry4 小时前
JavaScript 原型
前端·javascript
Achieve前端实验室4 小时前
【每日一面】async/await 的原理
前端·javascript·面试
德莱厄斯5 小时前
没开玩笑,全框架支持的 dialog 组件,支持响应式
前端·javascript·github