万事开头难

作为一只进入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. PL/SQL Developer连接远程Oracle数据库

    转自:http://zhengdu.net/archives/152 一.首先看远程端oracle服务是否启动 如果没有启动,请启动oracle服务 ps:创建或者删除oracle监听 二.远程端or ...

  2. Android 异常捕获

    在用户使用APP时,如果APP毫无征兆的突然退出程序,又没有任何提示信息.我想这是一种最差劲的用户体验了吧,如果是我估计干脆就直接卸载APP了.因此,作为Android开发者对于这种情况的发生一定要有 ...

  3. 三道题(关于虚表指针位置/合成64位ID/利用栈实现四则运算)

    第一题 C++标准中,虚表指针在类的内存结构位置没有规定,不同编译器的实现可能是不一样的.请实现一段代码,判断当前编译器把虚表指针放在类的内存结构的最前面还是最后面.  第二题 在游戏中所有物品的实例 ...

  4. Oracle + Entity Framework 更新没有设置主键的表

    最近用Entity Framework 开发的时候,发现一个问题,在默认情况下,EF不能对一个没有主键的表进行更新.插入和删除的动作. 那么,应该怎么处理没有主键的表呢? 我们打开这个表的edmx文件 ...

  5. JavaScript学习笔记-数组(1)

    数组是值的有序集合.每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引.JavaScript数组是无类型的:数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的类型.数 ...

  6. css笔记——关于 body/html 的高度百分比

    body{  height:100%;  视窗的高度 min-height:100%;文档的具体高度} 这两个百分比的具体高度在页脚永远放在文档底部非常重要,此时用min-height:100% 具体 ...

  7. hash桶

    #include <stdio.h> #include <stdlib.h> #include "chain.c" //include the chain. ...

  8. [CSS]浮动的那点事儿

    元素是怎样浮动 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动. 一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动元素之后的元素将围绕它. 浮动元素 ...

  9. Get code int value for different encoding

    http://msdn.microsoft.com/en-us/library/system.text.encodinginfo.getencoding%28v=vs.110%29.aspx usin ...

  10. OWIN and Katana - 1

    翻译自 http://www.asp.net/aspnet/overview/owin-and-katana/an-overview-of-project-katana 十多年来,基于ASP.NET框 ...