万事开头难

作为一只进入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. C#/.NET使用HttpWebRequest、SqlBulkCopy从API获取数据批量插入DB

    小弟新手程序员一枚,代码技术和文章水平均不才.所写文章均为对自己所写所学代码的简单记录,可能对于老手程序员营养价值不高,望莫见怪. 我工作上有个需求:从某处API接口上获取数据(大约1W条而已)并插入 ...

  2. 蓝牙 CoreBluetooth

    baseK(相关基础知识)蓝牙常见名称和缩写 BLE:(Bluetooth low energy)蓝牙4.0设备因为低耗电,也叫BLEperipheral,central:外设和中心设备,发起链接的是 ...

  3. Android中Universal Image Loader开源框架的简单使用

    UIL (Universal Image Loader)aims to provide a powerful, flexible and highly customizable instrument ...

  4. Linux内核中影响tcp三次握手的一些协议配置

    在Linux的发行版本中,都存在一个/proc/目录,有的也称它为Proc文件系统.在 /proc 虚拟文件系统中存在一些可调节的内核参数.这个文件系统中的每个文件都表示一个或多个参数,它们可以通过 ...

  5. 第三篇、微信小程序-网络请求API

    wx.request(OBJECT)发起的是https请求.一个微信小程序,同时只能有5个网络请求连接. OBJECT参数说明: 效果图: net.js Page({ data:{ result:{} ...

  6. 第二篇、为UITableViewCell 高度自适应加速 缓存cell的高度

    通过NSCache缓存已经算好的行高 @interface ZHCellHeightCalculator : NSObject //系统计算高度后缓存进cache -(void)setHeight:( ...

  7. IOS-UI-UIDynamic(一)

    UIDynamic是从iOS7开始引入的技术 属于UIkit框架 可以模拟显示生活中的物理现象 如碰撞 抖动 摆动等 一. 使用UIDynamic步骤: 1.创建一个动力效果器UIDynamicAni ...

  8. 【转】 SqlServer性能检测和优化工具使用详细

    http://blog.csdn.net/dcx903170332/article/details/45917387

  9. javascript笔记——工作笔记

    1.防止普通用户缓存静态文件,每次修改之后给静态文件的应用后面加上参数后缀[项目文件较多时最好使用前端构建工具] 比如: <script src="$!webPath/resource ...

  10. Js 变量的作用域

    变量的作用域 所有的变量作用域是指在哪里可用哪里不可用 局部作用域和全局作用域 在js中以函数来分割作用域 在函数里面就叫做局部作用域,在函数外面的就叫全局作用域 在函数里面如果省略var 关键字 那 ...