剑客
关注科技互联网

ReactNative学习笔记

写了一段时间的ReactNative,打算把自己的一些心得体会写下来,可以作为初学者的入门参考。

之前是在学React,四五月份的时候芋头让我研究研究Weex和ReactNative,Weex那会儿还不成熟,就先接触了ReactNative,感觉ReactNative好牛逼,它只做一件事情: 把iOS和Android的原生API和组件以React组件的方式暴露给外界。目前每两周一次的版本迭代几乎都在解决暴露的过程中所产生的一些问题。

开发思路的转变

接触ReactNative之前,我对客户端的了解仅限于WebView,原来客户端有那么多的View,有最常用的View,有用来滚动的ScrollView,还有用来渲染列表的ListView,还有渲染动画的Animated.View。我们前端看页面是一个一个DOM元素,客户端看页面是一个一个视图,WebView只是客户端众多View中的一个。

从前端走近ReactNative最大的转变可能就是对视图的理解,我们开发HTML网页的时候,设计稿有多长我们就一直往下写,即使超出一屏的高度,我们也会预期可以滑下去看到屏幕下方的内容。但是客户端不是的,静止是视图的基本特性,我们在某个位置渲染一个视图,它只会牢牢地钉在那儿,要想让屏幕之外的视图能够滚动到屏幕之内,我们必须将需要滚动的视图包裹在一个可滚动的视图内,这个视图也即我们日后常常用到的ScrollView。

样式的书写

ReactNative使用JS对象的格式写样式,jQuery为DOM动态添加样式的时候也用过这种写法,当然很多前端的样式不能用,比较好的是RN(ReactNative)对样式的错误提示做得很好,写错字或使用不支持的样式它都会提示,具体的样式规范大家可以去官网看看,上手不难。这里要着重说的是RN的布局体系,flexbox布局,它和前端的flexbox布局几乎一样,而我在学习RN之前没怎么接触flexbox,导致写页面非常吃力,经常连一个图片都放不好,建议在学RN之前先熟悉一下flexbox布局,可以看看 阮一峰老师的博客
,最好是上手写写。

需要额外指出的一点是,RN的flexbox布局是前端flexbox布局的一个子集,并没有实现所有的flexbox规范。前端有但是RN没有的属性:flex-flow, align-content, order。RN的flex属性与前端的flex属性不一样,RN的flex属性更像是前端的flex-grow属性。

White Once …

很多人看ReactNative经常会问一个问题:我写一套代码,真的可以在iOS和Android同时运行吗?可以,但是如果想让代码在iOS和Android保持样式一致,你需要付出额外的努力。

我们把Android和iOS类比成Chrome和Safari的话,可能会更容易理解他们的不同,我们在写前端页面的时候,常常会发现相同的CSS样式在Chrome下与在Safari下表现不一样,本来在Chrome居中好好的文字,在Safari偏下了一点点,类似的不同还有很多,不致命但是积少成多就会产生很大的不同。写RN也会遇到相同的麻烦,在iOS上运行好好的页面,跑在Android咋就变样了。基于平台的差异性,这种问题可能会一直存在,要敢写,iOS上表现良好并不一定表示样式是合乎你本来的预期,有可能你没有写某个样式,iOS自动替我们渲染出想要的视图,但是Android则显得笨拙,你不写,它就不做,在这方面表现最为明显的就是高度的问题,iOS对视图高度的渲染极富弹性,它会自动根据视图的内容给予合适的高度,而Android则不会,Android更倾向于overflow: hidden,想想前端如果对一个没有高度的dom使用overflow: hidden会怎么样。

写RN的过程也是一个熟悉iOS和Android渲染差异的过程,写得多了,自然就知道哪些样式在两个平台表现不同,哪些样式需要我们做一些额外的补足才能在两边保持一致。推荐大家在刚入门的时候,不要一味只在iOS上开发,每写一段,在Android上看看效果,特别是涉及到复杂的视图层级,这个时候发现不同,最容易排查出是哪些样式出了问题。后面写得熟练了,这些差异在一开始就知道如何规避,也就免去了两个平台调试的繁琐,会越写越快。

加油!

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址