React-native初体验 => 移动App开发环境配置 => 使用Android “模拟器” Genymotion => ReactNative快速打包

一.移动App开发环境配置

1.安装最新版本的java jdk

在这里插入图片描述

1.修改环境变量,新增JAVA_HOME的系统环境变量,值为C:\Program Files\Java\jdk1.8.0_161,也就是安装JDK的根目录

在这里插入图片描述

2.修改系统环境变量Path,在Path之后新增;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

在这里插入图片描述

3.新建系统环境变量CLASSPATH,值为.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

在这里插入图片描述

4.保存所有的系统环境变量,同时退出系统环境变量配置窗口,然后运行cmd命令行工具,输入javac,如果能出现javac的命令选项,就表示配置成功!

在这里插入图片描述
在这里插入图片描述

二.安装Node.js环境

注意:需要安装最新的长期稳定版本,不要实验版本;安装完毕之后的node.js会自动配置到全局系统环境变量中

安装完毕后,可以输入node -v查看node版本号;
在这里插入图片描述

三.安装C++环境

注意:大多数情况下操作系统自带C++环境,不需要手动安装C++环境;

如果运行报错,则需要手动安装visual studio中的C++环境;

四.安装Git环境

Git安装完毕后,会自动配置到系统环境变量中;

可以通过运行git --version来检查是否正确安装和配置了Git的环境变量;
在这里插入图片描述

五.安装Yarn包管理工具

在这里插入图片描述

六.安装Python环境

注意:安装Python时候,只能安装2.×的版本,注意勾选安装界面上的Add Python to path,这样才能自动将Python安装到系统环境变量中;

安装完毕之后,可以在命令行中运行python,检查是否成功安装了python。
在这里插入图片描述

7.配置安卓环境

  1. 安装installer_r24.3.4-windows.exe,最好手动选择安装到C盘下的android目录
    在这里插入图片描述
  2. 打开安装的目录,将android-23、android-24、android-25、android-26、android-28右键 x 解压(提取到当前位置)后,放到platforms文件夹下
    在这里插入图片描述
    在这里插入图片描述
  3. 右键 x 解压platform-tools,将解压得到的文件夹,放到和SDK Manager.exe平级的目录中
    在这里插入图片描述
    在这里插入图片描述
  4. 在安装目录中新建文件夹build-tools,右键 x 解压 build-tools_r23.0.1-windows.zip(react-native必须依赖这个)、build-tools_r26.0.0-windows.rar(weex必须依赖这个)、build-tools_r28.0.3-windows.rar,并将解压出来的文件夹,拷贝到build-tools文件夹下
    在这里插入图片描述
    在这里插入图片描述
  5. 在安装目录中,新建extras文件夹,在extras文件夹下新建android文件夹;右键 x 解压m2responsitory文件夹和support文件夹,放到新建的extras -> android文件夹下
    在这里插入图片描述
    在这里插入图片描述
  6. 配置安装环境变量:在系统环境变量中新建ANDROID_HOME,值为android SDK Manager的安装路径C:\Android,紧接着,在Path中新增;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;
    在这里插入图片描述
    在这里插入图片描述

八.安装使用Android “模拟器” Genymotion

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

九.ReactNative快速打包

  1. Yarn 和 React Native的命令行工具(react-native-cli)
  • Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。
  • React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g react-native-cli

  • 安装完yarn后同理也要设置镜像源:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
  1. 运行react-native init AwesomeProject创建React-Native项目
react-native init AwesomeProject

在这里插入图片描述
3. 运行cd AwesomeProject切换到项目根目录中,运行adb devices来确保有设备连接到了电脑上

cd AwesomeProject
adb devices

在这里插入图片描述
4. 运行react-native run-android打包编译安卓项目,并部署到模拟器或开发机中

react-native run-android
  1. 运行上一条命令之前,要确保有设备连接到了电脑上,可以运行adb devices查看当前接入的设备列表;如果无法检查到设备列表,请先确保手机开启了开发者模式,同时要电脑上要安装手机的驱动程序;
adb devices

在这里插入图片描述
6. 注意:首次打包时候,会联网下载gradle相关的文件,需要等待很长时间,大家可以直接从http://www.androiddevtools.cn/手动下载对应版本的gradle文件,并手动拷贝解压到C:\Users\自己的用户名.gradle\wrapper\dists目录下;
7. 注意:接下来,如果是第一次打包,会从https://jcenter.bintray.com下载好多的依赖项,此时需要耐心等待,如果中间出现了长时间卡顿,大家需要Ctrl+C停止打包,并重新运行react-native run-android
在这里插入图片描述
最后:关于RN项目中每个文件的作用
在这里插入图片描述
感谢解决问题
Android平台app打包时遇到的问题:从Could not resolve com.android.tools.build:gradle:3.0.0.说起

源文件待整理上传
链接:https://pan.baidu.com/s/1Zeq8gcctjJVp8GZ5m7V1Gw
提取码:y5dj

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章