react-native持续踩坑总结

Posted 2020-11-14 mfoonirlee

　　陆陆续续的已经接触了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.log[key] = ()=>{};
}

　　5、TouchableXXX;RN中为了方便响应用户事件（如点击）的交互，产生了一些新的组件TouchableHighlight、TouchableNativeFeedback、TouchableOpacity等，它们会封装一些默认的交互，类似web端的active效果，不过实测发现TouchableHighlight在响应事件的同时在android上存在着会把处于padding逾期的元素隐藏的bug；笔者的解决方法是使用TouchableOpacity来代替，在直观效果上其实两者区别不大，除非是很特殊的场景，一般还是可以应用的。

　　

　　暂时先写到这里吧，因为天天都在踩，后面再持续更新。