React Native Android配置部署踩坑日记
万事开头难
作为一只进入ECMAScript世界不久的菜鸟,已经被React Native的名气惊到了,开源一周数万星勾起了我浓烈的兴趣。新年新气象,来个HellWorld压压惊吧^_^(故意少打个'o')
具体的详细教程这里都有,我就说说这里没找到的几个坑,由于大部分资料还是0.1.4版本的react-native,笔者用最新的0.1.7和现有的很多是不一样的。
http://reactnative.cn/docs/android-setup.html#content
00.第一个坑,安卓墙
Android SDK下载:
本来抱着侥幸心理想试试能不能再低版本Android环境下编译,答案是,不能!脸书工程师的代码会校验当前Android Platform API 版本是不是=== 23,
解决方案:可以先在http://pan.baidu.com/s/1eQppdPC 这里下载Android Dev Tools,然后用国内的镜像地址设置代理再下载所需要的各种SDK,安卓资源站在这里,代理设置方法也有http://androiddevtools.cn/
nodeJS设置镜像:
这应该是开发node都知道的,我是用cnpm替代npm解决的,react-native init这条命令会拉很多dependency,不用国内的镜像要等死了。
01.第二个坑,Cygwin环境冲突
由于脸书的工程师都是用的mac电脑,对windows支持不佳,而且他们估计也没考虑到Windows可以装一种Cygwin的神奇软件。如果过程中出现了这个:
ERROR Watchman was not found in PATH. Seehttps://facebook.github.io/watchman/docs/install.html for installation instructions
{"code":"ENOENT","errno":"ENOENT","syscall":"spawn watchman","path":"watchman","spawnargs":["--no-pretty","get-sockname"]}
Error: Watchman was not found in PATH. See https://facebook.github.io/watchman/docs/install.htmlfor installation instructions
at exports._errnoException (util.js:874:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
at onErrorNT (internal/child_process.js:344:16)
at doNTCallback2 (node.js:441:9)
at process._tickCallback (node.js:355:17)
在mac中说明没安装上监视文件的watchman,但是我非常纳闷为什么windows下起react-native Server会报这个错,费劲千辛万苦,发现我的Cygwin迷惑了react-native,环境中含有Linux命令,然后被判定为Linux或mac OS系统,然后去执行目前只有Linux和MAC才有的watchman程序,windows下是不需要的而且要在:
项目名\node_modules\react-native\packager\react-packager\\src\FileWatcher\index.js 中把MAX_WAIT_TIME这个变量改的很长(不要超过了整数最大值),不然25秒后依然报timeout错。
10.第三个坑,白屏
真机调试白屏,由于AVD相对比较慢,笔者直接祭出安卓6.0的真机USB调试的,发现全都是白的,啥也没有,查阅资料发现这是因为显示悬浮窗这个权限被拒绝了,去手机权限中心允许这一条就可以了(这是一个用来弹出开发菜单的浮窗)。
11.真机测试
安卓就两条命令react-native start;react-native run-android,ios只要后面一条,然而我的黑苹果虚里脊慢的不要不要的,先玩玩安卓了。
AVD是不需要任何配置就可以直接用react-native run-android跑起来的,真机上会出现红色报错,需要进开发选项Dev Settings去配置Debug Server host(最后一个选项),设置成PC的内网IP:8081就可以了。附图↓ (一个js文件变成apk真的很酷炫,摇一摇就能实时更新到最新代码更酷炫~)
100.路漫漫,其坑多兮
此处只是列举了几个耗时较长的坑,目前安卓端和Windows开发环境还不成熟,想起了2年前coscos2d-x还不成熟时的踩坑噩梦。好久没碰cocos2d-x了,想想那时候写的C++好菜,现在连菜都算不上了,cocos2dx越来越主流,然而我却快忘记了。希望React Native在开源社区下更快完善,慢慢成为主流,让全栈JS变成万金油全堆JS。
React Native Android配置部署踩坑日记的更多相关文章
- react-native —— 在Mac上配置React Native Android开发环境排坑总结
配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...
- 使用 jest 测试 react component 的配置,踩坑。
首先安装依赖 npm i jest -g npm i jest babel-jest identity-obj-proxy enzyme enzyme-adapter-react-15.4 react ...
- 【Android】【踩坑日记】解决Error:SSL peer shut down incorrectly
前提条件 http://services.gradle.org/distributions/ 复制到浏览浏览器能打开 下一步 打开Android studiogradle version 配置文件进行 ...
- 【Android】【踩坑日记】RecyclerView获取子View的正确姿势
开发过程中发现RecyclerView.getChildAt(position)为空的情况,但是明明这个position却没有越界. 解决办法:用recycler.getLayoutManager() ...
- 史上最全Windows版本搭建安装React Native环境配置
史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...
- React Native环境配置
React Native环境配置 史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有 ...
- React Native之配置URL Scheme(iOS Android)
React Native之配置URL Scheme(iOS Android) 一,需求分析 1.1,需要在网站中打开/唤起app,或其他app中打开app,则需要设置URL Scheme.比如微信的是 ...
- Hexo搭建静态博客踩坑日记(一)
前言 博客折腾一次就好, 找一个适合自己的博客平台, 专注于内容进行提升. 方式一: 自己买服务器, 域名, 写前端, 后端(前后分离最折腾, 不分离还好一点)... 方式二: 利用Hexo, Hug ...
- 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用
史上最详细Windows版本搭建安装React Native环境配置 2016/01/29 | React Native技术文章 | Sky丶清| 95条评论 | 33530 views ...
随机推荐
- Windwos下Apache的缓存设置
1.打开httpd.conf,找到以下几个Module并将其启用(如果没有,可以自行添加) mod_proxy.so(module_proxy) m ...
- 如何更好的理解(pageX,pageY,clientX,clientY,eventX,eventY,scrollX,scrollY,screenX,screenY,event.offsetX,event.offsetY,offsetLeft,style.left)
1 pageX,pageY:鼠标指针相对于当前窗口的X,Y坐标,计算区域包括窗口自身的控件和滚动条.(火狐特有) 2 event.clientX,event.clientY:鼠标指针相对于当前窗口的X ...
- Jersey(1.19.1) - Building Responses
Sometimes it is necessary to return additional information in response to a HTTP request. Such infor ...
- Nginx - Core Module Directives
The following is the list of directives made available by the Core module. Most of these directives ...
- HDOJ2006求奇数的乘积
求奇数的乘积 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- 优化Android应用内存的若干方法
原帖地址:http://www.open-open.com/lib/view/open1392013992317.html 在app开发的各个阶段中要考虑RAM的限制问题, 包括在设计阶段(正式开发之 ...
- 微信之Android各版本列表
微信在不断地更新迭代,ios微信下载点击这里立即开始(手机电脑都可以,电脑端要安装iTunes),每个版本都放出一些新的功能或修复相关错误,详情可以点击下面的版本链接进行查看.(这里有Android微 ...
- CSS之Win8界面摸拟
开门见山,先把测试Result放上: <head> <meta charset="UTF-8"> <meta http-equiv="X-U ...
- DOS批处理命令-注释
注释是每个程序中不可或缺的(不是对计算机来说,而是对我们这些程序员阅读代码来说) 语法: ①rem 这是批处理的注释命令,rem后面的内容全部是注释 例:rem 这是一行注释 ②:: 批处理遇到以冒号 ...
- Java 源码学习线路————_先JDK工具包集合_再core包,也就是String、StringBuffer等_Java IO类库
http://www.iteye.com/topic/1113732 原则网址 Java源码初接触 如果你进行过一年左右的开发,喜欢用eclipse的debug功能.好了,你现在就有阅读源码的技术基础 ...