万事开头难

作为一只进入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. asp.net 文件压缩zip下载

     今天分享下昨天做的一个东西 asp.net 的文件  zip 批量下载,首先你需要去 到http://dotnetzip.codeplex.com这个站点下载zip 的包,在里面找到 Ionic.Z ...

  2. pdf文件流生成pdf文件

    protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { Code.Login Starr_mode ...

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

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

  4. 申请Android Map 的API Key(v2)的最新申请方式(SHA1密钥)

    申请Android Map 的API Key(v2)的最新申请方式(SHA1密钥)具体步骤如下:                                                     ...

  5. JAVA UDP网络编程学习笔记

    一.UDP网络编程概述 采用TCP协议通信时,客户端的Socket必须先与服务器建立连接,连接建立成功后,服务器端也会持有客户端连接的Socket,客户端的Socket与服务器端的Socket是对应的 ...

  6. tinyMCE自定义添加图片插件

    需求: 在富文本编辑器中插入图片,图片来自用户可以自己上传的图片库. 本来可以用比较恶心的方式,也就是直接用tinyMCE自带的插入图片插件来实现.恶心是因为这个图片插件需要用户填入图片的url. 想 ...

  7. JSON对象(自定义对象)

    JSON对象(自定义对象) 1.什么是JSON对象 JSON对象是属性的无序集合,在内存中也表现为一段连续的内存地址(堆内存) 1)JSON对象是属性的集合 2)这个集合是没有任何顺序的 2.JSON ...

  8. 为oracle中的表格增加列和删除列

    http://blog.csdn.net/rainharder/article/details/6663458 alter table 表名 drop column 列名eg:alter table ...

  9. mysql 恢复备份时出错 Unknown command ‘\”

    今天恢复mysql备份时,出现了Unknown command ‘\”这样的错误,原以为是备份文件出错,重新备份导入时还是出错.研究了一凡是因为编码的问题,解决方案如下: 使用你导出备份时的编码重新导 ...

  10. Servlet、Filter 生命周期

    Servlet作为JavaEE必须掌握的内容,Struts2通过使用Filter的功能实现了一个MVC的框架.因此掌握这Servlet以及Filter的生命周期显得非常重要. 1. Servlet的生 ...