react-native 环境搭建,项目构建以及真机调试(window android)

本篇文章参考:react-native 中文官网

 本文旨在介绍windows环境的android应用的环境搭建和项目构建以及真机调试。

由官方文档可知,react-native必须安装的依赖有:Node、JDK 和 Android Studio

虽然你可以使用任何编辑器来开发应用(编写 js 代码),但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。

1、 关于android studio的下载和安装建议参考:Android Studio下载与安装_Shen-Childe的博客-CSDN博客_android studio下载安装

2、 关于node的安装和下载建议使用nvm node版本管理工具进行下载和使用,可以参考我的另一篇博客: nvm动态管理node版本_F_cy的博客-CSDN博客_nvm 查看可安装版本

node的安装版本应在14及以上

3、 jdk的下载直接双击执行文件安装即可,安装文件百度网盘地址:

链接:https://pan.baidu.com/s/19la9SR3-xES7-qADZjcQMQ 
提取码:hd91

jdk安装完成之后进行系统的高级系统设置进行如下配置:

 JAVA_HOME

C:\Program Files\Java\jdk-11.0.11 //这里的路径是你安装jdk时候的路径

 

 %JAVA_HOME%\bin

配置完成后打开命令窗口,输入java -version出现以下代码,jdk安装完毕。

跟随着android安装教程完成后,接下来安装react-native所需要的组件配置

 

 

 

最后:

至此android安装配置完成

 最后进行reaact-native的项目构建:

这里仅仅显示两种项目的构建方式,详情可以查看官方文档。

普通的项目构建:npx react-native init AwesomeProject

ts模板项目构建:npx react-native init AwesomeTSProject --template react-native-template-typescript

执行命令之后耐心等待即可。

 项目构建完成之后,可以使用的android studio打开根目录下的android文件,启动手机模拟器

模拟器启动完毕之后,输入以下命令,检查设备是否连接正常。出现以下device即说明连接成功。

adb devices

  

随后在项目根目录下执行命令

yarn android  或者 npm run android

等待执行完毕即可看到模拟器以下界面,

 如果想要真机调试,首先需要关调手机模拟器,react-native一次只能连接一个设备。

用数据线连接手机,打开开发者调试模式,然后重复 

 物理设备连接成功之后,在项目根目录下再次执行yarn android,等待react-native给手机安装app,安装完成即可查看手机app

猜你喜欢

转载自blog.csdn.net/weixin_44510655/article/details/127281095