初探react-native踩到的一些坑以及解决方案

@youngwind 2015-12-27 13:43:21发表于 youngwind/blog React

前言

前端技术更新迭代的节奏非常之快,稍微学慢点都有可能被淘汰。最近对于以react和redux为核心的web端技术架构已经渐渐掌握,想要精通还需要很长的时间。react-native与react一脉相承,是我试水app开发的最佳切入点。刚刚开始学习,再加上从来没用过xcode,大大小小的坑肯定踩得不少,列举如下。
#1. react-native init 卡住不动

答案:很可能是vpn问题,请在翻墙的情况下找个好一点的网络。
#2. 每回修改代码都要command+R重新build一下,需要好几秒的时间,不能忍!

答案:在模拟器中选择hardware->shake gesture -> enable Live Reload。 如下图所示。
2015-12-20 4 08 11
#3. 代码出错信息在哪儿显示?调试输出信息在哪儿?怎么调试?

没错,一开始我都不知道在哪儿查看调试结果(哎,没用过xcode的伤不起啊!)
当build出错的时候,模拟器会直接报错,比如像这样。
2015-12-21 9 23 54
身为前端程序员,我第一反应就是寻找能不能在浏览器进行调试,答案是可以的。
在模拟器的hardware-> shake gesture -> debug in chrome,然后浏览器就会打开一个新的窗口,像这样。
2015-12-27 9 50 00
程序中的console.log可以直接在控制台看到,也可以打断点进行调试,太棒了!!
不过这里还有一个问题就是不能直接在浏览器中看到界面。(我暂时还没有找到能再浏览器中看到界面的方法,其实我主要的目的是调整样式啊!!网页开发的时候可以直接查看元素的布局,然后直接编辑实时看到效果的呀!没有这个开发效率瞬间降低了好多啊啊!!)
还好后来找到了好歹找到一个查看样式布局的地方(注意,只能查看,不能直接编辑),那就是hardware->shake gesture -> show inspector ,就能看到像下面这个样子了。
2015-12-20 4 06 08

接下来这方面还有几个点要研究一下:如何在真机上进行测试。如何在chrome上看到界面并且进行调试。(我也知道在chrome上完全地调试是不可能的了,因为ios各种复杂的手势交互chrome就不可能模拟到,所以能做到编辑样式我已经满足了。)
#4. react native支持的样式和原生css支持的样式有哪些区别。

http://reactnative.cn/docs/style.html#content
滚到最底部就可以看到了。
#5. 使用react-native-swiper的时候报错,找不到react-timer-mixin

react-native-swiper1.4版本以上修复了这个问题,升级版本就可以了。