React Native号称能跨平台开发IOS和Android的原生应用,想来必定会成为一种趋势。刚好计划开发一款手机APP,又没有相应的开发资源,决定自己摸索着试试。
第一步是搭建开发环境,以下是官方文档、网上资料,结合本人实际操作的总结:
一、 准备工作
(1)安装安卓SDK
根据React Native官网的指示(http://facebook.github.io/react-native/docs/android-setup.html#content),首先需要安装AndroidSDK,配置ANDROID_HOME环境变量,设置安卓SDK。
首先,安装最新版本的JDK。
如果是64位系统,建议X86和X64都安装。
JDK下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html。
配置JAVA环境变量,设置JAVA_HOME=D:\Program Files\Java\jdk1.8.0_77
其次,安装最新版本的Android SDK。
Android SDK官方下载地址:https://developer.android.com/sdk/installing/index.html
因google在中国被屏蔽,以上网址可能会打不卡,可从以下地址下载:
http://tools.android-studio.org/index.php/sdk
然后,配置ANDROID_HOME环境变量。在Path变量中加入安卓工具:D:\Program Files (x86)\Android\android-sdk-windows\platform-tools;D:\ProgramFiles (x86)\Android\android-sdk-windows\tools
最后,配置Android SDK。
在安装目录下,打开SDK Manager.exe.
点击Install X packages…,安装包。
由于,国外的网站,下载速度可能会很慢,可以点击菜单“tools –> Options…”设置代理。
Http Proxy Server: mirrors.opencas.cn
Http Proxy Port:80
TIPS:
1、如果安装包失败,可以多试几次,或更换代理地址。更多代理可查看:http://www.cnblogs.com/zhuyp1015/p/4558978.html
2、X86模拟器可手工下载。X86模拟器可能会一直下载不成功,如下图所示:
可通过在Intel官网直接下载:https://software.intel.com/en-us/android/articles/intel-eula-x86-android-ice-cream-sandwich-bin
下载后放到SDK的temp目录,如:D:\ProgramFiles (x86)\Android\android-sdk-windows\temp
(2)安装安卓模拟器
Android SDK自带的模拟器运行速度很慢,即使安装IntelX86模拟器加速器,运行速度还是很慢,根据官方问档的推荐,建议使用Genymotion安卓模拟器。
1、下载Genymotion。下载地址:https://www.genymotion.com/download/。Genymotion对个人用户是免费的,下载之前首先要注册。
2、安装Genymotion。由于Genymotion是基于VirtualBox,安装时会一并安装VirtualBox
3、创建和使用虚拟机。点击Add按钮创建虚拟机;点击Start按钮启动虚拟机。
TIPS:
1、可能会碰到Genymotion用户注册不成功的问题,由于Genymotion网站在国外,网络不是很好,建议改天再试。
2、在创建虚拟机时,可能会碰到“the file is corrupt”错误,可以通过手动下载虚拟机文件解决。错误如下图所示:
解决办法:
在路径C:\Users\Administrator\AppData\Local\Genymobile\genymotion.log 下找到日志文件,打开文件,可以看到下载的日志地址,直接copy到浏览器中打开下载
下载后的文件放进目录C:\Users\Administrator\AppData\Local\Genymobile\Genymotion\ova
3、如果虚拟机启动后不能访问网络,可通过在VirtualBox中设置网络连接方式为桥接解决。
用Genymotion创建虚拟机后,默认网络连接方式为host-only,修改为桥接网卡,在虚拟机中,连接无线网络即可访问外网。
(3)安装Node.js运行环境
1、安装Git from Windows,下载地址:https://git-for-windows.github.io/
2、Python2.7.11安装,下载地址:https://www.python.org/downloads/
3、安装Visio studio 2015,由于Node.js运行需要.net framewok和c++运行环境,安装Visio Studio 相对比较方便,下载地址:https://download.microsoft.com/download/B/4/8/B4870509-05CB-447C-878F-2F80E4CB464C/vs2015.com_chs.iso
4、安装Node.js,下载地址:http://nodejs.cn/
TIPS:
1、Python的版本只能 >=v2.5.0 & < 3.0.0.,不要下载最新的python3.5.1版本,否则启动React Native项目时会出错。
2、Visio Studio安装时,记得安装C++运行环境相关组件,否则启动React Native项目时会出错。
二、 设置Reactnative
(1)安装react-native-cli,命令行下的react-native工具
打开cmd运行执行以下命令:
$ npm install -g react-native-cli
(2)初始化项目
在cmd中执行以下命令:
$ react-native init AwesomeProject
TIPS:
1、AwesomeProject的名称可任意修改。
2、如果react-native init projectname 速度很慢,可以设置国内镜像。由于众所周知的网络原因,react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像:
npmconfig set registry https://registry.npm.taobao.org
npmconfig set disturl https://npm.taobao.org/dist
(3)启动工程服务
重新打开一个cmd并切换到AwesomProject目录
执行 npm start,会显示如图的提示,然后再输入react-native start命令。如果显示如图那样,证明你服务已经启动了,在这里我们可以看到服务的端口是8081。
我们在浏览器证明服务是否启动:
在浏览器输入地址:http://localhost:8081/index.android.bundle?platform=android
如果显示下图的那样,那就证明服务已经启动了。
TIPS:
1、在启动时,如果有各种报错,请检查Python的版本,.netframework、C++运行环境十分正确安装。
2、项目的路径中不能有中文,否则,可能出现莫名的错误。
(4)编译运行项目
执行react-native run-android命令
如果显示下图,那就说明AwesomeProject项目编译成功了。
TIPS:
如果出现以下错误:
请检查:
1、服务是否正确启动;
2、虚拟机是否能正常访问网络;
3、如果都没问题,请进行以下设置:
在命令行运行 adb shell input keyevent 82 打开开发者菜单,如下图所示:
进入 Dev Settings .
点击 Debug server host for device
手动键入你电脑的IP地址和本地开发服务器的端口,默认端口是的8081(e.g. 172.19.2.178:8081)
如果adb命令无效,可能是因为安卓的tool目录没加入PATH。
搭建基于Windows的React Native 开发环境(For Android)
原文:http://blog.csdn.net/ryx2001/article/details/51248095