Windows10系统搭建安卓开发环境并使用Create-React-Native-App零配置快速搭建跨平台App完整版攻略

Posted by

之前写了一篇文章,在windows10的linux子系统内通过Create-React-Native-App快速搭建跨平台app。虽然初始化项目很快速很方便,但是在linux子系统内难以进行项目的build等后期编译操作。无奈,我又开始研究直接在windows10下搭建安卓开发环境,并使用create-react-native-app零配置快速搭建跨平台app的方法。2017年的8月1日,干到凌晨3点终于build项目成功了,赶紧总结一下。

第一:安装最新版本的JDK,并配置windows操作系统的java环境变量

JDK8的官方网站是:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

JDK8是包含JRE的,JRE是java语言的运行环境,安装JDK会自动安装JRE的。

第二步:配置JAVA的系统环境变量,JAVA_HOME

win10的配置方法是:

右键点击桌面的 “此电脑”—>选择“高级系统设置”—>选择“环境变量”—>点击新建“系统变量”;

环境变量名:JAVA_HOME;

环境变量值:C:\Program Files\Java\jdk1.8.0_144,这里填写JDK的安装目录;

第三步:配置JAVA的系统环境变量,CLASSPATH

win10的配置方法是:

右键点击桌面的 “此电脑”—>选择“高级系统设置”—>选择“环境变量”—>点击新建“系统变量”;

环境变量名:CLASSPATH;

环境变量值: “  .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;  ”,只复制引号里面的值,注意前面有个.

第四步:配置JRE的可执行文件的路径

win10的配置方法是:

右键点击桌面的 “此电脑”—>选择“高级系统设置”—>选择“环境变量”—>找到“系统变量”里的PATH—>点击编辑—>点击新建—>输入下面的值;

环境变量名:PATH;

环境变量值: “  ;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;  ”,只复制引号里面的值

第五步:安装Android Studio和VS Code

推荐使用vs code做react-native的开发,Android Studio主要用来构建,生成,测试,发布安卓APP的。两个都是开源软件,强烈推荐大家使用。

而且两个工具,都有中文界面和中文文档,无比强大。

第六步:配置安卓SDK的环境变量,ANDROID_HOME

win10的配置方法是:

右键点击桌面的 “此电脑”—>选择“高级系统设置”—>选择“环境变量”—>点击新建“系统变量”;

环境变量名:ANDROID_HOME

环境变量值:F:\Android-SDK,这里填写Android-SDK的安装目录,没有可以新建一个;

第七:访问nodejs官网,安装windows版本的nodejs

nodejs的官网网站是,https://nodejs.org/en/。下载最新版本的nodejs,里面是自带npm的,npm是nodejs的包管理器。

第八:通过npm曲线救国,安装yarn

官方的nodejs的windows安装包,自带有npm5。这个npm5目前有个bug,官方不建议用来生成react-native项目。所以,我们暂时用yarn来生成react-native的项目。

这里推荐,使用win10的PowerShell命令行工具,来执行各种命令。

npm  install  --global  yarn

第九:全局安装create-react-native-app

yarn global add create-react-native-app

第十:使用create-react-native-app创建ReactNative跨平台的app项目

使用cd命令在PowerShell里进入你想创建项目的目录,

cd  E:\ReactNative

使用create-react-native-app创建一个名字叫your-app-name的ReactNative的跨平台APP

create-react-native-app  your-app-name

第十一:通过Android Studio创建安卓模拟器

用手机调试安卓App不方便,我们可以通过Android Studio创建N个安卓设备的模拟器,来调试App。IOS的模拟器,只能用Mac操作系统XCode集成开发环境里的模拟器。

需要注意的是,Android Studio创建的模拟器,默认是放在C盘的。。。所以,要注意C盘会爆掉。

第十二:编辑项目的执行配置

Android Studio里,打开我们的项目目录。

选择“Run”–>”Edit Configurations”,新建一个配置。“Deployment Target Options”的“Target”选择“Emulator”。然后“Prefer Android Virtual Device”,选择你刚才创建的模拟器。

第十三:启动项目

使用cd命令在PowerShell里进入你刚刚创建项目的目录,

cd E:\ReactNative\your-app-name

执行命令启动react服务

yarnpkg start

第十四:在安卓模拟器里运行App

yarnpkg run android

第十五:可能的问题

15.1,如果create-react-native-app的时候,出现问题,可能需要使用yarn全局安装react-native-script或者react-native-cli。

yarn global add react-native-script

15.2,初始化React-Native项目

如果项目的结构稳定了,不会再做调整。可以执行以下命令,build项目。这个命令是不可逆的,但是可以通过git保存未build之前的结构,以备不时之需。

yarnpkg run eject

文武双全的总结

只需要在PowerShell里复制粘贴几个命令,就可以生成一个跨平台的app。create-react-native-app实在是太方便了。

Leave a Reply

Your email address will not be published. Required fields are marked *