React Native 环境搭建 及 安卓应用部署

  • Z时代
  • 2024-01-10
  • 分类：综合

react

准备工作

1.安装nodejs和npm

登录NodeJS中午官网 http://nodejs.cn/download/， 下载对应系统的msi安装包，安装成功后会自动设置环境变量。

在cmd中输入node -v 和 npm -v ，查询安装的版本，检验安装是否成功。

2.全局安装react native命令行工具 npm install -g react-native-cli

记得修改npm的下载源，这样在下一步init的时候速度也会加快。可以参考：npm使用中遇到的问题

3.切换到工程保存的路径，创建一个新项目 react-native init FirstApp

部署项目

1.开启服务器（端口8081）

cd D:\React Native\helloworld\FirstApp2

npm start

2.连接真机设备

使用adb devices查看连接到电脑的设备，详情参考官网：在设备上运行

若提示'adb' 不是内部或外部命令，也不是可运行的程序，则需要配置一下环境变量，路径为D:\Android\Sdk\platform-tools，这样就可以使用AS的adb.exe了

正确情况下显示设备的列表：

List of devices attached

3DN0216617013808 device

3.使用AS打包项目到手机

打开之前react native工程的Android部分，第一次时需要下载一些依赖包，觉得gradle下载jar包太慢可以尝试修改项目根目录下的文件 build.gradle ，使用阿里云的国内镜像仓库地址：maven{ url 'http://maven.aliyun.com/nexus/content/groups/public'}。

另外，由于国内连接jcenter太慢，可以考虑将jcenter()全部注释掉。

4.Bug调试

应用安装成功后出现下图

参考链接：https://www.jianshu.com/p/3480d4b27cfe

https://blog.csdn.net/klo220/article/details/81868020


问题原因是我们未给手机设置访问开发服务地，模拟器是直接访问电脑本地服务，真机则需要我们手动配置了

对于Android 5.0及以上的手机，使用adb reverse命令，运行adb reverse tcp:8081 tcp:8081，重新打开APP即可

之后修改APP.js中的内容，再重新使用AS部署应用，就可以展示新的内容了

5.连接到安卓模拟器

连接模拟器的过程与连接到真机类似，直接在Android Studio中把项目安装到模拟机中，成功运行后效果如下：

以上是 React Native 环境搭建 及 安卓应用部署 的全部内容， 来源链接： utcz.com/z/381716.html

回到顶部