搭建React-Native安卓开发环境

·  阅读 1120
搭建React-Native安卓开发环境

最近一直在琢磨着使用react-native开发跨平台移动App,奈何手上拮据,没有入手Mac。在window10上搭建react-native环境遇到很多坑。查阅了很多的技术博客,发现在Mac进行环境搭建居多,而且面对的react-native的版本有点老旧,react-native官网已经更新到了0.55版本。环境的搭建已经出现了较大的变动,中文官网还没有进行更新。阅读 react-native官网文档,在window10上面搭建安卓开发环境,对遇到的坑进行解决和总结。

一、 安装环境与软件版本号

系统: window10 企业版2015长期支持方案
JDK: Java SE Development Kit 8u161(http://download.oracle.com/otn-pub/java/jdk/8u161-b12/2f38c3b165be4555a1fa6e98c45e0808/jdk-8u161-windows-x64.exe)
react-native: 0.55 (http://facebook.github.io/react-native/)
AndroidStudio: AndroidStudio 3.1.1.0(https://dl.google.com/dl/android/studio/install/3.1.1.0/android-studio-ide-173.4697961-windows.exe)
NodeJS:8.11.1(主要是安装nodejs的npm包管理器)
python :2.7.14
复制代码

二、快速开启React-Native开发方式

React-Native官网提供了两种快速开启学习移动App开发的方式,一种是使用create-react-native-app的脚手架工具快速创建一个APP项目;另外一种是通过搭建安卓编译环境,然后使用react-native-cli脚手架工具生成项目,再进行开发。两者区别在于create-react-native-app可以在没有安装和配置环境和工具(比如AndroidStudioXcode)就可以开启一个项目,你需要安装好Node环境(即是npm)。

另外一种是需要搭建安卓编译环境(JDK,安卓SDK,安卓模拟器等等),过程比较麻烦。官网给出建议如果是想快速了解和学习react-native,不想搭建繁杂的环境,可以选择create-react-native,该方式还具有热加载的功能,代码上的改动会即是更新到app视图上。但是并不意味着以后就不需要搭建安卓编译环境,最后app开发完成之后,还是需要对代码进行编译打包成apk。下面分别对两种方式进行说明。

1.通过create-react-native-app方式快速开启

create-react-native脚手架是通过npm进行安装的,所以在安装脚手架之前需要安装npm包管理器,可以安装最新版本的node安装npm,安装完成之后,直接在命令行终端运行以下命令:

npm install -g create-react-native-app 
复制代码

接下来在你需要建立项目的目录下,运行以下终端命令,完成项目的创建工作,下面命令相当于创建一个名为example的项目。

create-reactive-app example
复制代码

进入创建的项目目录。对项目进行启动。

cd example
npm start
复制代码

项目启动之后,会提供一个开发的服务和打印一个二维码,你可以通过在AppStore(苹果手机App商店)或者GoogleStore下载 expo软件,然后通过expo的扫描二维码来浏览自己创建的项目。expo浏览的前提是expo所连接的网络和电脑开发环境的网络必须在同一个网段,建议是同一个WiFi或者通过电脑映射的wifi信号。facebook的这种快速浏览开发项目,可以避免繁杂搭建环境,最快上手react-native。

启动项目之后,运行如下图所示:

运行效果
项目代码结构如下图所示:
项目结构

在项目已经启动之后,可以对使用expo扫码浏览项目运行效果,但是expo的苹果版本,注册登录之后,并没有发现scanQRCode这项功能,关于Android版本的expo需要vpn,所以自己采用了安装安卓模拟器的方式浏览(下面介绍第二种方式介绍安装方式)。启动安卓模拟器,在项目根目录运行npm run android或者打印二维码时的提示命令a利用js引擎来编译转换成安卓原生源码。运行效果如下所示,对App.js的源码进行改动会对及时更新到视图上:

运行效果

2.通过react-native-cli方式快速开启

通过react-native-cli创建项目,需要JDK,Android SDK,Node,python支持。因为react-native的编译需要JDK8及以上版本(建议8版本,比较稳定),python2.7版本.具体如上所示。JDK和python可以自行到官网下载,比较简单。react-native官网建议通过 Chocolatey安装,不过需要vpn。所以还是建议通过自行官网下载。安装完JDK和python之后,下面需要对androidSudio进行安装,因为我们通过AndroidStudio来安装Android SDK和安装安卓模拟器。

配置jDK路径,对react-native编译过程需要JDK的支持,我们需要把jdk路径写进path里面,在我的计算机->属性->高级系统设置->环境变量,新建一个JAVA_HOME,默认情况之下,我们JDK安装的目录是如下所示:

JAVA_HOME

安装AndroidStudio3.1.1.0, AndroidStudio默认会安装最新的Android SDK,所以在下载完AndroidStudio之后,需要选择custom自定义安装的方式. 编译react-native的app和原生安卓源码混合需要 Android 6.0 (Marshmallow) SDK。而Android 6.0 (Marshmallow) SDK可以通过SDK managers进行安装。需要确定Android SDK、Android SDK Platform、Performance (Intel ® HAXM)、Android Virtual Device被选中安装,因为react-native官网上的AndroidStudio和自己安装的版本不一样,所以采用自己的安装依赖步骤,下面在configure->SdkManager下面需要安装的依赖步骤。

welcome
1
2
3

接下来对SDK的路径进行建立环境变量,和JAVA_HOME一样,而android sdk的默认路径已经在上图中,不做再次重述。

安装react-native-cli脚手架,通过安装create-react-native-app相类似的方式安装react-native-cli。在命令行终端运行以下命令,安装、创建项目并运行。

 npm install -g react-native-cli
 react-native-cli init  AwesomeProject
 cd AwesomeProject
 react-native run-android
复制代码

项目结构如下图所示:

结构
安装安卓模拟器,在AndroidStudio中创建安卓模拟器,步骤如下图所示:
1.PNG
2.PNG
3.PNG
4.PNG
项目运行效果下图所示:
5.PNG
通过react-native-cli编译的app是apk格式的,可以从模拟器上浏览:
6.PNG

三、 安装安卓模拟器遇到的坑

本人电脑是台式联想拯救者系列,安装安卓虚拟器需要在BIOS开启VT虚拟化功能,然后在win10系统中要进入BIOS需要连接独立显卡,独立显卡的接口是DVI接口,所以需要留意。下面是电脑的系统配置。

settings.PNG
遇到Could not find tools.jar. Please check that C:\Program Files\Java\jre1.8.0_151 contains a valid JDK installation.问题,可以通过修改JAVA_HOME路径解决。

win10搭建react-native的安卓开发环境到此完结。

分类:
阅读
标签:
分类:
阅读
标签: