React Native for Android on Windows 配置开发安装总结

时间:2021-09-06 05:29:15
配置开发安装总结(由于当前react-native更新较快,目前是针对2015年11月底时的reacti-native android for windows版本,有些内容可能过时)
但是在Windows下安装远没有这么简单。下文是在window7 x64下的安装体验。
 
目录:
1、开发IDE:Webstorm
2、开发环境安装、配置
3、初始化工程
4、初始化工程时遇到的一些问题
5、初始化成功后,开发中常见的一些问题
 
1、开发IDE:webstorm
当前sublime或者webstorm都较为优秀,本文选用webstorm,建议用最新的11版本
1)es6语法支持
     由于常常用es6语法,在setting-》Languages & Frameworks-》JavaScript-》Libraries。勾选 ECMAScript 6。
React Native for Android on Windows 配置开发安装总结
2)增加对JSX语法支持。
在setting-》Languages & Frameworks-》JavaScript
     React Native for Android on Windows 配置开发安装总结
 
 
这时代码区域不会报语法错、格式化也会自动对齐等,例如:
React Native for Android on Windows 配置开发安装总结
 
 
2、开发环境安装、配置 (没有可靠FQ的同学请浏览完本文后慎行)
1)npm和node升级
     npm:npm升级到最新版本,这个很有必要,npm update –g
     node:react native官方要求node>=4.0,建议直接安装node的最新版本(官网下载很慢,而且几乎很难成功,我这里有个云盘上的5.0 64x版本地址:https://yunpan.cn/c3TcJvAbHDuBW (提取码:ca15))
 
2)安装JDK
可直接去官网上下载:
注意X86版本还是X64版本。
 
配置好jdk环境变量:
    例如我的jdk安装地址为:C:\Program Files (x86)\Java\jdk1.8.0_60\bin
    系统变量-》新建 JAVA_HOME 变量,值为:C:\Program Files (x86)\Java\jdk1.8.0_60\bin
    然后再把JAVA_HOME添加到PATH中。%JAVA_HOME%
 
3)安装Android SDK
 

安装sdk-manager 和sdk:

 
 

或者上360软件管家

 
 
设置Android的环境变量:
     设置环境变量ANDROID_HOME:Android SDK Manager的位置 例如:(PATH => D:\Program Files\Android SDK Tools)
     设置环境变量PATH:例如:(PATH => %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)
 
 
4)安装android sdk packages
android sdk安装完毕之后,打开SDK manager,需要安装一些工具、扩展以及android版本。
     建议Tools和Extras全勾选(官方文档中推荐只安装一些固定包)
     android版本根据需要选择安装(选一两个就成,每个都上G,下图我安装了6.0和5.1.1)
     然后漫长的安装......
     这里可以设置镜像,加速下载,例如:http://www.cnblogs.com/liongis/p/3659813.html
React Native for Android on Windows 配置开发安装总结
 
 
5)安装android模拟器(如果是真机调试,这一步就不需要了)
可以选用官方推荐的模拟器,Genymotion(https://www.genymotion.com/),此模拟器之前在mac下配合visual box使用过,启动很快
下边是使用android的自带的avd创建模拟器:
React Native for Android on Windows 配置开发安装总结
 
 
创建完毕后,选择一个模拟器,点start即打开模拟器,在模拟器上有几个常用的快捷键:
    F2:即打开react-native开发工具栏
    Home:相当于android的home
    Esc:相当于退出
 
 
6)之后就是安装react-native
npm install react-native-cli -g ( 需要命令行 git)
 
3、初始化工程
构建一个名为hello的react-native工程,理想的正常的步骤:
1)到工程开发目录下  react-native init hello
2)以上成功后,然后在hello目录下,命令行 运行react-natvie start或者npm start
     此处启动React Chrome Developer Tools需要的一个远程调试服务,有点类似于Weinre。启动之后,可以访问http://localhost:8081/debugger-ui看下
3)在hello目录下,命令行运行react-native run-android,如果成功在模拟器或者真机上启动了应用,即初始化成功了
     此时需要提前把android模拟器打开或者真机usb连接到电脑。
 
     但是实际上,往往会出现很多问题,即如下部分的内容。
 
 

4、初始化工程时遇到的一些问题

 
主要就是一些外部依赖或者网络问题。建议安装一些内容,基本就避免下边的错误。要安装的依赖:
    git
    node(4.0以上版本)
    npm(用最新版本)
    python(2.5~3.0)
    java jdk,android sdk( 各种package)
    .net framework 2.0 SDK
 
如果没有上边内容,可能报以下我遇到的问题:
1)带命令行的git。如果安装完没自己加入环境变量path中,需要自行添加。
2)需要安装python(版本必须在2.5~3.0之间),之前我装的是3.4.3版本,无奈只好退回到2.7,并加入环境变量
React Native for Android on Windows 配置开发安装总结
 
3)需要安装.net framework 2.0 SDK, visual studio 2005(事实上,只要高于这个版本就成),否则在react-native start时会提示如下
React Native for Android on Windows 配置开发安装总结
 
4)在react-native run-android时,好几次就报一个okhttp.jar错误,不要气馁,找个好点的FQ软件,多试验几次就ok了
React Native for Android on Windows 配置开发安装总结
 
 
5)初始化工程时会碰见停在如下地方,....此处可能需要长时间等待 。超时时间 运行大概10分钟,如果超时后提示下载失败,再实验几次(我在此处重试了好几次)
React Native for Android on Windows 配置开发安装总结
 
 
 
喜大普奔的是,这个只需要下载一回,之后这个项目再运行时,就不需要下载这么多东西了。如果下载过程出错,再运行下载时,已下载成功的包,无需再下载了。
另外,如果一直下载不成功,可以借用我在云盘上的一个测试工程:https://yunpan.cn/c3TBeBI39t57q (提取码:a98d)
          下载下来后,在模拟器或者真机上安装此文件夹下的apk:hello\android\app\build\outputs\apk
           然后就可以用此hello做测试开发,只是工程名只能叫hello了,也许只需将node-modules拷贝到你的工程目录下即可(目前没测试)。
 
 
5、初始化成功后,开发中常见的一些问题
1)只能开一个模拟器,如果真机usb调试打开,需要关闭。在cmd中运行,adb devices,保证只有一个设备:
React Native for Android on Windows 配置开发安装总结
 
2)Debug server host for device设置
关于红屏幕,只要出错,模拟器会在屏幕上提示错误,此处如果run-android、提示如下错误。
需要设置下:按F2-》Dev Settings-》Debug server host for device ,设置一个Debug server host for device为你电脑的ip地址。
React Native for Android on Windows 配置开发安装总结
 
 
3)关于React Chrome Developer Tools的使用。
现在就是react native在chrome的扩展工具React Chrome Developer Tools目前在windows下还是无法使用
http://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html ),当运行 react-native start时,在浏览器中键入http://localhost:8081/debugger-ui,会报一个如下的错误。
React Native for Android on Windows 配置开发安装总结
 
 
但是可以代理android的日志:启用Debug in Chrome,可在控制台看android程序的日志。
此处推荐可用android的ddms工具或者monitor也可以查看日志:
     具体位置在android的sdk/tools中(如:D:\Program Files (x86)\Android\android-sdk\tools),在cmd中运行:ddms或者monitor后,可查看当前应用的调试日志,例如如下:
React Native for Android on Windows 配置开发安装总结
 
 
4)远程调试服务经常挂掉:
     控制台常常会提示一些挂掉原因,一般只需重启就成,这个会常常挂掉。
     此时模拟器或者真机中报如下connect错误,需要重新运行下react-native start或者npm start
React Native for Android on Windows 配置开发安装总结