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

[梁少峰]

前言

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

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

答案：在模拟器中选择hardware->shake gesture -> enable Live Reload。 如下图所示。

#3. 代码出错信息在哪儿显示？调试输出信息在哪儿？怎么调试？

没错，一开始我都不知道在哪儿查看调试结果（哎，没用过xcode的伤不起啊！）
当build出错的时候，模拟器会直接报错，比如像这样。

身为前端程序员，我第一反应就是寻找能不能在浏览器进行调试，答案是可以的。
在模拟器的hardware-> shake gesture -> debug in chrome，然后浏览器就会打开一个新的窗口，像这样。

程序中的console.log可以直接在控制台看到，也可以打断点进行调试，太棒了！！
不过这里还有一个问题就是不能直接在浏览器中看到界面。（我暂时还没有找到能再浏览器中看到界面的方法，其实我主要的目的是调整样式啊！！网页开发的时候可以直接查看元素的布局，然后直接编辑实时看到效果的呀！没有这个开发效率瞬间降低了好多啊啊！！）
还好后来找到了好歹找到一个查看样式布局的地方（注意，只能查看，不能直接编辑），那就是hardware->shake gesture -> show inspector ，就能看到像下面这个样子了。

接下来这方面还有几个点要研究一下：如何在真机上进行测试。如何在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版本以上修复了这个问题，升级版本就可以了。