陆陆续续的已经接触了RN快3个月,整体的感受。。。感觉在调试兼容andorid问题的时候就像回到了IE时代。
本来想按自己踩坑的路径持续更新一些记录,但是,现实是坑太多,还是统一写一篇汇总一下吧(鉴于笔者的接触时间并不长,所以,不免理解不对之处,还望指正):
1、overflow:hidden; 这个属性前端工程师应该都很熟悉,fb的团队在rn中也支持了这个属性,但是虽然RN实现了这个属性,但是它的支持却并不太好,直到笔者最近使用的RN 0.53.3的版本,这个bug依然存在。。导致android上并不能设置overflow的属性,始终为hidden;如何解决呢?可以参考第三点的方法。
2、border: 1px dashed #000; 这是一个设置边框的属性,与我们常用的设置“实线(也就是border-style:solid)”不同,它是设置为虚线,但是这货在android上压根就不支持。。而在ios上也不能支持对单边的设置,必须四周都要保证同样的border-style border-color,才能够正常显示;
如何解决这种问题呢?android笔者的团队最终使用图片来hack了,而ios需要模拟单边的dashed bodrder则可以利用它本身已经有的能力,绘制一个height:1的容器,设置它的border,再设置它的overflow:hidden,则正好实现了单像素的边框。
3、zIndex: number; 这个也是一个很熟悉的属性了,不过在rn中,它的实现和web又不太一样,但是实现上有些类似:
<>
<Header />
<ParentComponent>
<ComponentA />
<ComponentB />
</ParentComponent>
<Footer />
</>
比如以上这个代码片段,在css中我们可以通过设置postition来强制提高Component*的层级,但是在rn中,层级是由嵌套结构决定的,也就是说如果ParentComponent只有100*100的显示区域,那么它的子组件A、B是无法超出这个显示区域显示的,当然可以使用rn提供的组件modal,不过这个组件笔者在android 8.0又有一个奇怪的bug,而且官方目前还没修复;另外一种是常用的方式是自己基于RN提供的DeviceEventEmitter去驱动早就设置好的一个高层级组件容器去显示,形如:
<>
<Header />
<ParentComponent>
<ComponentA />
<ComponentB />
</ParentComponent>
<Footer />
<MyModal />
</>
把需要跨层显示的元素挂载到MyModal上,通过它在物理层上的本来的高层级来实现。
4、console;console应该是前端同学用得特别多的对象,所以fb也贴心的在rn中实现了,对调试确实有蛮大的帮助,但是这个东西,本身的性能并不好(其中很多概念就不展开了,笔者也没有完全摸清),所以官方建议是在上线的时候移除console,不过。。似乎官方提供的babel-no-console plugin并不能很好的移除所有console。。。于是通常会用一个比较原始的方式:
for(let key in console){
console[key] = ()=>{};
}
5、TouchableXXX;RN中为了方便响应用户事件(如点击)的交互,产生了一些新的组件TouchableHighlight、TouchableNativeFeedback、TouchableOpacity等,它们会封装一些默认的交互,类似web端的active效果,不过实测发现TouchableHighlight在响应事件的同时在android上存在着会把处于padding逾期的元素隐藏的bug;笔者的解决方法是使用TouchableOpacity来代替,在直观效果上其实两者区别不大,除非是很特殊的场景,一般还是可以应用的。
暂时先写到这里吧,因为天天都在踩,后面再持续更新。