ReactNative开发之环境搭建

我用的是windows平台,所以这儿只介绍Win平台的环境搭建。

必要软件安装

1.node.js

下载地址:https://nodejs.org/en/

左边8.11.1LTS为稳定版,右边为最新版,随便下载一个即可。我下载的是10.0.0版本。

下载完成后安装,可以一路安装下去,当然了安装目录默认为C盘,可以更换到D盘。

安装完成后使用cmd命令:node -v,如图显示版本号即为安装成功。

安装好以后,请设置一下node的镜像下载地址,改为国内的地址。这个地址为淘宝提供的镜像,速度比较快。

直接在cmd命令里面键入这两条命令即可。

2.安装React Native命令行工具

安装这个很简单,因为安装了node了,直接打开cmd命令,键入以下安装代码即可

3.Android Studio

由于win平台只能开发安卓版本的app,所以还是用Android Studio来的实在。

首先需要安装java环境,需要JAVA JDK 1.8以上版本

下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

选择符合自己电脑的jdk即可。如果你觉得上面去选择麻烦,那么点击这儿直接下载64位的JDK

安装完成后,你的C:\Program Files (x86)\Java目录里面应该有这两个文件夹,只要是1.8开头的就行了,后面的版本号不用在意

接着安装Android Studio,下载地址转站国内的网站:http://www.android-studio.org/

现在国内提供的版本最新为3.0.1,直接点击下载即可,只要是Android Studio2.0版本以上就能搞了

下载安装后,需要下载Android SDK。在欢迎界面选择菜单,选择SDK Manger(PS:软件才开始安装的界面背景是白色的,我这儿已经设置了主题,不用在意)

接着需要我们来配置SDK了。首先第一个,记住SDK的目录,我这儿的目录为D:\Android\SDK。大家最好不要设置到C盘,因为SDK文件太大了,C盘容易造成磁盘空间不足,可以设置到其他的目录,另外目录不能包含中文和空格

勾选右下角的Show Package Details选项,即可显示所有的SDK版本。我们选择react nactive支持的SDK6.0版本

接着选择SDK Tool选项,选择支持的23.0.1版本,其他不用勾选,图上面的是我开发其他安卓版本自动下载的。到时候大家开发其他版本的时候会自动提示的。

接着拉到最下面,选择如图中的Tools,有SDK管理器,还有CPU虚拟化的工具,当然是你是AMD的处理器,就不用选Intel X86那一个。

选择完以后,点击OK,就会弹出窗口,让他慢慢下载。其实下载这个东西不用翻墙,速度挺快的。

环境变量的设置

安装上面的软件搞定以后,需要配置一下环境变量。

我的电脑右键-属性-高级系统设置-环境变量

点击新建,ANDROID_HOME变量,设置目录为SDK目录,这个目录就是之前下载SDK的目录。

添加好后,双击Path项目编辑,再添加两条数据,一个是tools目录和platform-tools目录。

构建第一个React Nactive项目

完成上述操作后,运行cmd命令,然后切换到一个非中文和空格的目录,准备创建一个项目

如图,我在打算在F:\code\ReactNative目录下创建项目,自行选择目录即可

键入以下代码

其中FirstProject为项目名称,自行修改即可

现在就等着吧,让他慢慢下载,差不多要等个10分钟左右,如图为正在下载

下载完成后,就可以看到你的目录下面出现一个目录了,这个就是下载好以后的react nactive项目了,其中我们需要关注的目录是android这个目录文件夹了。

使用Android Studio打开这个目录

等构建完成,这儿最好开启翻墙软件,因为要下载很多gradle文件,相当的慢。

然后启动一个模拟器,如何设置模拟器请自行百度。我这儿使用的是第三方模拟器。

又要等着慢慢的构建,等待构建完成,自动安装到模拟器上面。安装完成后,应该会遇到第一个错误啦

新版本文件名已经从index.android.js变为了index.js;然而并没有使用asset存放index.android.bundle等文件。所以需要我们手动设置

按照步骤:

进入项目的android\app\src\main 新建assets文件夹

然后键入如下命令

完成后,重新运行APP,先停止运行,再运行

运行成功后效果如图

至此,整个环境就搭建完成了。

当然了,后续要完整的跑起来所有项目

还需要安装git和Python 2,请自行下载即可。

 

 

暂无评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注