您现在的位置是:首页 >其他 >win10 平台搭建react native 并在 Android模拟器上运行app网站首页其他

win10 平台搭建react native 并在 Android模拟器上运行app

金色熊族 2024-06-17 10:19:54
简介win10 平台搭建react native 并在 Android模拟器上运行app

目录

1 安装npm

1.1 nodejs官网下载 安装程序,双击安装,一路点“是"即可

1.3  在PATH中增加    %NVM_HOME%         %NVM_SYMLINK%

2 安装yarn

3 安装java 11.0.2

3.1 安装java 11.0.2

3.2 增加环境变量JAVA_HOME

3.3 环境变量PATH中增加 %JAVA_HOME%in

4  安装android studio

4.1 我安装的是andriod studio 2022.2.1.19

4.2 安装完毕后,设置android sdk

4.2.1 启动android studio,点击more actions,选择sdk manager

 4.2.2 安装android 10.0内的如下插件:

4.2.3 设置sdk tools

4.3 设置环境变量

4.3.1 设置环境变量ANDROID_HOME 

4.3.2 在PATH中添加%ANDROID_HOME%emulator %ANDROID_HOME% ools %ANDROID_HOME% oolsin %ANDROID_HOME%platform-tools

5 创建一个项目

5.1 新建项目

5.2 启动Android模拟器

 5.3 启动项目


本文参考了

(3条消息) 超详细 React Native 入坑使用指南,我在元宇宙等你_懒人码农的博客-CSDN博客Download & Install React Native with Android Studio & Setup Visual Studio Code as IDE Tutorial 2021 - YouTube

1 安装npm

1.1 nodejs官网下载 安装程序,双击安装,一路点“是"即可

1.3  在PATH中增加    %NVM_HOME%         %NVM_SYMLINK%

2 安装yarn

// 使用 npm 全局安装 yarn
npm install yarn -g

// 检查版本是否安装成功
yarn -v

3 安装java 11.0.2

3.1 安装java 11.0.2

这一步参考了(3条消息) React Native的概述,React Native的优缺点,React Native开发/运行环境的搭建_最爱小悦悦啦的博客-CSDN博客

 官网的jdk安装有点坑需要注册登录才能安装,我们可以找一个国内镜像网进行安装
以华为镜像为例:Index of java-local/jdk

安装好后双击文件exe文件,直接一路"Next"即可安装完成

3.2 增加环境变量JAVA_HOME

3.3 环境变量PATH中增加 %JAVA_HOME%in

4  安装android studio

4.1 我安装的是andriod studio 2022.2.1.19

4.2 安装完毕后,设置android sdk

4.2.1 启动android studio,点击more actions,选择sdk manager

 4.2.2 安装android 10.0内的如下插件:

 注意,尽管在撰写这篇博客时,android sdk的版本已经到了android 13,但是根据(3条消息) 超详细 React Native 入坑使用指南,我在元宇宙等你_懒人码农的博客-CSDN博客

的说法,react native 想在android上跑,必须安装sdk 29系列(归属于android 10),所以这里必须安装android 10.0.

4.2.3 设置sdk tools

切换到sdk tools 界面,选中29.0.2

ndk(side by side)必须安装20.1.5948944(根据(3条消息) 超详细 React Native 入坑使用指南,我在元宇宙等你_懒人码农的博客-CSDN博客

 最后安装下图红色框标记的五个项:

4.3 设置环境变量

4.3.1 设置环境变量ANDROID_HOME 

4.3.2 在PATH中添加%ANDROID_HOME%emulator %ANDROID_HOME% ools %ANDROID_HOME% oolsin %ANDROID_HOME%platform-tools

 

5 创建一个项目

5.1 新建项目

新建一个文件夹作为以后开发react native的大本营,然后启动命令行,并进入该路径

然后输入

npx react-native init MyApp 

 这里MayApp是你给项目起的名字.命令执行后,你会发现新建了一个名为MyApp的文件夹。假如执行失败,可能是因为你的权限不够(比如你是在C盘建立了这个目录)。此时你要用管理员权限进入命令行。

5.2 启动Android模拟器

启动Virtual Device Manager

 点击下图红色框标记的按钮,启动模拟器

 5.3 启动项目

在命令行 通过cd 命令进入MyApp文件夹

输入

npx react-native run-android

 这个命令将启动刚才建立的项目。但是启动过程可能很长,原因是启动包括configure和execute两个阶段。以下图为例,configure花了16分钟

 随后execute花了49-16=33分钟

 上图右侧是程序启动后的界面。

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。