万事开头难

作为一只进入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配置部署踩坑日记的更多相关文章

  1. react-native —— 在Mac上配置React Native Android开发环境排坑总结

    配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...

  2. 使用 jest 测试 react component 的配置,踩坑。

    首先安装依赖 npm i jest -g npm i jest babel-jest identity-obj-proxy enzyme enzyme-adapter-react-15.4 react ...

  3. 【Android】【踩坑日记】解决Error:SSL peer shut down incorrectly

    前提条件 http://services.gradle.org/distributions/ 复制到浏览浏览器能打开 下一步 打开Android studiogradle version 配置文件进行 ...

  4. 【Android】【踩坑日记】RecyclerView获取子View的正确姿势

    开发过程中发现RecyclerView.getChildAt(position)为空的情况,但是明明这个position却没有越界. 解决办法:用recycler.getLayoutManager() ...

  5. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  6. React Native环境配置

    React Native环境配置 史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有 ...

  7. React Native之配置URL Scheme(iOS Android)

    React Native之配置URL Scheme(iOS Android) 一,需求分析 1.1,需要在网站中打开/唤起app,或其他app中打开app,则需要设置URL Scheme.比如微信的是 ...

  8. Hexo搭建静态博客踩坑日记(一)

    前言 博客折腾一次就好, 找一个适合自己的博客平台, 专注于内容进行提升. 方式一: 自己买服务器, 域名, 写前端, 后端(前后分离最折腾, 不分离还好一点)... 方式二: 利用Hexo, Hug ...

  9. 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用

    史上最详细Windows版本搭建安装React Native环境配置   2016/01/29 |  React Native技术文章 |  Sky丶清|  95条评论 |  33530 views ...

随机推荐

  1. live(),bind(),delegate()等事件绑定方法的区别及应用解析

    1 首先bind()方法是最直观的,但是也是弊端最大的. $('a').bind('click',function(){alert('that tickles!')}) 这和事件冒泡有直接关系,当我们 ...

  2. iOS 在viewController中监听Home键触发以及重新进入界面的方法

    第一步:创建2个NSNotificationCenter监听 [[NSNotificationCenter defaultCenter] addObserver:self selector:@sele ...

  3. eclipse 必备

    eclipse编辑器太小  http://jingyan.baidu.com/article/fc07f98974f40c12fee51959.html 新建jsp文件报错     http://ji ...

  4. 动态链接库加载出错:cannot restore segment prot after reloc: Permission denied

    在执行可执行程序时,出现动态链接库加载出错:cannot restore segment prot after reloc: Permission denied. 主要是由于Linux 内核中提供的强 ...

  5. 抓取dump

    1,在程序奔溃前部署.adplus.exe -crash -pn explorer.exe -o d: -crash:当进程挂掉的时候抓取dump,只能抓取到进程报错时的信息,如果进程不报错,就无法抓 ...

  6. TIMAC 学习笔记(三)

    本文主要内容参考 <Security on TI IEEE 802.15.4 Compliant RF Devices>.<Design Note DN108>.<IEE ...

  7. SQLBindCol---数组输出

    SQLSetStmtAttr(hstmt,SQL_ATTR_ROW_BIND_TYPE,SQL_BIND_BY_COLUMN,0); SQLSetStmtAttr(hstmt,SQL_ATTR_ROW ...

  8. HTML5之 Microdata微数据

    - 为何需要微数据 长篇加累版牍,不好理解 微标记来标注其中内容,让其容易识辨 - RDFa Resource Description Framework http://www.w3.org/TR/m ...

  9. Entity Framework Code First 迁移数据库

    新版EF,系统实现过程中如果对Model进行更改,队形修改数据库并不能正常运行项目,需要借助Code First 手动迁移数据库 首先启用迁移,允许迁移Context Tools->Librar ...

  10. jQuery插件开发 - 其实很简单

    [前言] jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇 ...